99% React Developers Fail to Answer THIS Question!

Timestamps
0:00 Teaser
0:29 Video Starts
1:35 What is Component in React?
2:33 Class-based Component vs Functional Component
3:31 Fundamental Difference
7:09 Functional Component Architecture
8:20 Conclusion
8:35 Outro

👉 Checkout codedamn on social:

If you found the video valuable, please leave a like and subscribe ❤️ It helps the channel grow and helps me pumping out more such content.

👋 About Me:
Hey! I'm Mehul Mohan, a CSE'21 graduate from BITS Pilani, Goa. I started coding early in life, at the age of 13 when I created my first blog on Blogger. I am listed in Google, Microsoft, Sony, eSet, etc. Hall of Fame for reporting vulnerabilities in their systems.

🍎 I am Apple's WWDC'19 Scholar - visited San Francisco and attended WWDC.

🚀 Currently working on my own startup - codedamn.

Connect with me:

🏷 Video Tags:
99% React Developers Fail to Answer THIS Question!
React 18 full course
React free tutorials
React course
React beginner tutorial
react tutorial
react js
learn react
react javascript
react tutorial 2021
react js tutorial
react tutorial for beginners

[codedamn]

EDIT: ​ I watched the video again. I believe the confusion is that I mentioned 'state.a = 5' is set and called it a mutation whereas you're saying that 'state = {a : 5}' is happening. I'm wrong saying only a single member is updated. If the state is updated then it is mutation which does not happen in functional components (that's all I wanted to say at 4:22 - that this state gets mutated, but looks like it came out in a way where I said the object got mutated inside the state, sorry about that).

[mtcjrs]

this.setState does NOT mutate the state object, instead, it merges the old state and state changes into a new object. From the React docs:
You may optionally pass an object as the first argument to setState() instead of a function... This performs a shallow merge of stateChange into the new state, e.g., to adjust a shopping cart item quantity...
If you are not convinced you can save a reference to state and log it in componentDidUpdate or in the setState callback to see that it does not change.

[yashsharma]

I have never seen a developer work as hard as you do just to teach teaching stuff. Really appreciate your work man.

[NaryVip]

The title could have been "Class based component Vs Function based Component in React".
but the current title was really catchy

[TheMorpheusish]

I appreciate what you do. But a lot of information passed here happens to be incorrect.

Let's go back to the basics, Classes in Javascript is just a syntactic sugar for Prototype functions. The same applies to React Components. Irrespective of whether you are using a Functional Component or Class Component, a state or prop change will cause a re-render.

[successmotivation]

@codedamn, if I get it quite right, setState() in class-based components causes states to be mutated internally by React and re-rendered while in functional components states are not mutated but the functions are called again to get the new render tree with the updated state values.

[zdiogo]

this is simply amazing, your teachings brings me closer to computer science and not just being a front end dev, it's so interesting to learn this way!

[jg]

The reason you can use const in the react functional component from your example is because its pointing to a reference in memory where the state information is stored. you are never mutating the memory address you are just updating what is stored at the address.

That's why you can use const in java script with arrays and objects.

[VeredaProductions]

Thank you so much. I've watched a couple of videos that were just explaining the same stuff, but not actually telling how it works and neither elleging the best option... So thank you!

[amjadsaleem]

Dude your videos are short but so informative, code-along videos on other channels might be good for practice but you clarify and explain concepts really well. Thanks for that.

[gulshanaggarwal]

Super! I have been using React into my projects but never figured out these technical level concept.
I hope Mehul will be posting these type of content. 😎

[anubhavsrivastava]

I watched it till the end and joined the discord server as well. Great work you are doing with your content.
For this question can we simply say that class based components merge the changes in the original state whereas the functional based components returns a new state value on every state change.

[sudarshankj]

this.setState doesn’t mutate the object. If that were to be the case, React wouldn’t know that it has to re-render. What it does is, figures out what parts need to be merged. And if there is a difference between the newly created object’s content vs the older one, then rendering occurs.

[asagiai]

I can only answer from what I know.

React components were usually and started as class based component. They usually have a file of their own.
In the class you have to specify and write a lot of things. Especially necessary things, I guess, like mounting events? Props etc.
And most of them are mandatory.
Meanwhile, with the advent of hooks, the functional component was born. Which makes it easy to create a component. That is almost similar to a class based ones.

I think that would be my answer. I just hope I'm not confusing something.

[BoonBoonitube]

What you said about the reason the state hook is able to be a const is wrong. Since we are destructuring an array from from useState we are never redefining it. State is always an array, we are only redefining the first index of the array returned by useState, which is totally valid.

[surajbhushanpandey]

Ok, that's why in the Class Base Component we can actually the get previous state, but that is not possible in functional Component.

[RyanWaite]

The answer to the question was given by the very name of the two types, especially for those who know the different programming paradigms and their philosophies:
classes are associated with object-oriented programming, which is based on modeling real world concepts via state and behavior to act on that state; pure functions are associated with functional programming, which is based on promoting predictability and reducing side effects via producing the same outputs when given the same inputs and tying small functions into larger ones as composability. Therefore, the main difference between the two would be that the class implementation mutates some existing object in memory while the functional approach replaces the value with each call (i don't even use React). Both has their pros and cons.

[DK-oxze]

It would be nice to know the internal working of hooks as well. Like how a hook re-renders the component with new value?

[Mayomoz]

That was super helpful! Thank you, got yourself a new subscriber

[aadisarma]

👌. Loooking for more in depth knowledge on other topic with real-time example.