React Class vs Functional Component | ReactJS tutorial Series Part 3

React js Comparison between Class Components and Stateless ES6 Function Components. Understanding Syntax, Utility and Differences.

code samples from this tutorial
Steps of running this code example
---------------------------------------------------------

$cd react-class-vs-es6-components
$npm install
$npm start

Please be my patreons on patreaon

Follow me for technology updates

Help me translate this video.

[vahidsediqi]

I start learning React i was so disappointed it was so hard for me i couldn't learn anything .
after finding your tutorials now it is much easier me, thanks from Afghanistan !

[dragateli]

I know this is widely overlooked, but I'm very glad you worked to really iron out your accent. I know a lot of Indians / Bangladeshi, etc all think their english is proper, but it's hard to understand.

[SubrataSen]

With great knowledge comes a great responsibility #thanks for sharing ....

[PipikaTV]

Nice little comparison :) It's little bit outdated, since you say that you use Class components only when state management is needed, but you can use the react hooks (useState()) so you say not to use Class components at all? I'm working with React for long time now, and my personal preference is Class interface, first of all, it's more readable, and readability of code is the number one priority for long term projects, next, lifecycle methods are lot more clearer than useEffects, though longer, but clearer in terms of codestyle, also both "ways" of react implentation end up being compiled into same minified file, and with the functional components you lose polymorphism and inheritance, so it's of for UI devs who just create stateless components and change the text, but when you connect the front end with the API, you can create an inverted copy of the MVC model on the back end, which is not possible with functional components, and if yes, it would look very hard to read and even harder for another developer to extends, thus instead creating new component in order to change the logic. Not a fan of FC at all :)

[adnantariq]

I don't know if i said this already, but you're a life saver. Thank you sir for sharing your wisdom and experience in a clear, systematic, and easy to follow manner.

[sachinkumarverma]

Wow! you made my life so easy learning React. No need to mention I had wandered a lot over different channels and course videos but yours is the one which covers every detail in a short and precise manner. Kudos to you :)

[dougstiers]

Nice job of keeping it simple. And I agree with Bo Li, good job with your English and presentation overall.

[praveerroshan]

Clear crystal explanation. even a lay man can understand it . thanks for such a nice video.

[ajmalhasan]

sIR u teach in the most simplest way which is much needed for beginners

[revathiv]

It will be very useful. Actually am new to React i able to follow this tutorial so easily. Thank you so much.

[secretsanta]

Is that rajinikanth in ur cover image of the video?

[janacallsu]

Started learning ReactJS using your tutorials. So far so good. It takes sometime for me to absorb the concepts as I am new to JavaScript itself. Hope I will pick things faster than I thought due to your tutorial

[volatile]

I legit went through 4 different react tutorials before finding this one which is actually beginner-friendly. Fine teaching. I can at times hear your Indian accent breaking through but I respect you for developing a great American accent.

[redraushan]

Very easy to follow tutorial, thanks!

[ChintanDave]

What does default keyword make difference in export statement either in class or functional component ?

[jorgerivera]

Excellent explanations, this tutorial is a masterpiece.

[hk_build]

Why we need functional components in react??

Though there are illustration that
Functional components are stateless, more of representational components, no need to extend from component, code size is less, No render function.. etc

But even we can use states in fun component then what other things that makes fun component different from class component

Anything extra you feel wanted to add ?

Thanks

[urvishagreat]

Worked on angular then started react, initially couldn't get much idea but then I got your channel and it's saviour. Please make videos on advance react topics 👍

[mdsajaldeowan]

this is a great channel for learning,
i am learning a lot of things from the channel,
thanks a lot sir for teaching us,
you are awesome Teacher

[ivankolev]

Superb explanation, just what I was looking for!