99% React Developers Fail to Answer THIS Question!

[@codedamn]

EDIT 2: People who are confused and think the video is wrong, please watch part 2: kzbin.info/www/bejne/oGq7iaaaeppsY9E 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).

[@yobebill1234]

I understood it. Great explanation.

[@TastyTales792]

sad that you are completely wrong, and you judge developers by this misinformation, and you don't seem to see that the official docs say something else. If this.setState would mutate the state, that would mean that the object reference stays the same, thus telling react, that nothing has changed. LITERALLY EVERYONE knows that if you mutate the state, rerenders wont happen, because there's nothing to notify react about the state change. There must be a new object reference. If there is, then it is not mutation. 'state.a = 5 ' would be mutation, but 'state = {a: 5}' IS NOT HAPPENING because you would lose the value of 'b' . Still this would still not be mutation, because there is a new object. What's probably really happening is 'state = Object.assign({}, state, {a: 5})' or equivalent. You could ask developers the question: what is mutation? Because you don't seem to know.

[@jayt2257]

I learned somewhere that its best to keep state changes relagted to a single parent component and let all the children handle the UI. But i guess if your using functional components, you should avoid using event listeners and the sought on the parent that is handeling states to avoid that issue you me tioned at the end where a rerendered functional component with event handlers can result in a memory leak?

[@MythicEcho]

@@TastyTales792 but he showed this in his second part, please elaborate where he is wrong, cause im also confused whats wrong with that.

[@cazterk]

...me two

[@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.

[@blank4157]

Ye, just checked official docs. The only difference between setState method of class component and setState function in useState hook is the former automatically merge old object to newer one while the latter doesn't. Other than that there are no major changes compared to what is claimed in this video.

[@codedamn]

this.setState DOES MUTATE the state. Sir, try to run a setInterval function updating the state in componentDidMount and try to run a setInterval function in useEffect with empty dependency array. You will see that in class based components the state DOES update properly (because the class state is mutated directly) whereas in functional component you code would not run properly.

[@coder5877]

@@codedamn But you do access state in a class with the ‘this’ keyword which will always point to the latest version of the class members including state. That’s why you think it’s being mutated but it could and I think it’s likely the React sets a whole new state object onto your class instance.

[@codedamn]

​@@coder5877 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). @Matic Jeras

[@pankajkthakur8042]

@@codedamn setstate don’t mutate the state .. and because of that the virtual dom compares the state from already defined state that the dom has to re render …

[@yashsharma6269]

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

[@Krajesh21]

Developers never work hard bro, they think hard. The main difference between the SE and the developers are the thinking and problem solving skills. Apart from it, our hero do the best and taught so much for us.

[@umangbhatnagar1415]

@@Krajesh21 🤦🏻‍♂️🤦🏻‍♂️🤦🏻‍♂️🤦🏻‍♂️🤦🏻‍♂️

[@Ismail_Vatakara]

obviously

[@codedamn]

Learn about React, Next.js and more full-stack technologies on codedamn's interactive full-stack learning path: cdm.sh/fullstack

[@hv7460]

Does this mean functional component will slow down my application by a large scale if there is lot of memory leak?

[@NaryVip]

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

[@onceajordan]

I usually ask to create a drop down which option represents a diff user. Then different toggle button to show a pop up with the user name from option selected, add a timeout in popup. If you change the option while click was done with previous option, the popup shows wrong value. This is a simple demonstration to show class based and function component

[@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.

[@codedamn]

NO. This is completely wrong perspective. Classes are functions in JavaScript but DO NOT confuse their implementation in React with "just another function".

[@TheMorpheusish]

@@codedamn React class Components extends Component which in turn is just a Javascript class. Think about this for a moment, If the class component works as you say, then there would be no need the memo function. The React team would basically just tell everyone to use a Class Component if you don't need things recreated 🤷.

[@codedamn]

kzbin.info/www/bejne/oGq7iaaaeppsY9E

[@successmotivation83]

@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.

[@jg7634]

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.

[@codedamn]

Wrong. In this example you don’t even update what is stored at the address. You’re right about const behaviour with objects and arrays, but wrong here about assuming it’s the reason you can use it

[@arminphulkar]

@@codedamn just because you use const, doesn't mean you can't mutate, try const arr=[1,2,3]; arr.push(4); and check if it added or not. 'const' doesn't mean it can't be mutated, it only means you can't re-assign it, that's it.

[@arminphulkar]

J G is right, you can't mutate the reference, but you can mutate the value at that immutable reference.

[@codedamn]

@@arminphulkar That statement is right, but not the logic behind functional components.

[@JuDaSuCrUz]

I would argue that the reason const is used is because of convention. It has nothing to do with the previous value or what is stored in memory. This is because, as mentioned in the video, functional components are re-created on re-render, which re creates the state variables with updated values. It does not matter if you use const, let or var. I'm referring to linting mechanisms that suggest/enforce the use of const over let. If there is variable, whether is a piece of state provided by React or a user-declared one, that does not change, why use let? Use const instead and save yourself from your value changing at some point by other functions. Aside from that, a reason to use const over let is that mutating the state value (first item of the array) directly has no effect other than displaying the assigned value if done before the return; the value is not tied to the rendering mechanisms, reactivity if want, of React. Additionally, changing the value directly in an event also has no effect, which is the most common place to update state. That being said, there is no need to use let as it does nothing for you, other than making your life complicated. In summary, the first variable is just a plain value with no additional properties or magic. It is the second variable, the update function, that enables the component to be re-rendered.

[@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!

[@RyanWaite28]

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.

[@bopon4090]

I would say this is a good answer from the perspective of OOP and Functional but not exactly form the react .

[@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!

[@asagiai4965]

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.

[@DK-ox7ze]

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

[@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.

[@codedamn]

kzbin.info/www/bejne/oGq7iaaaeppsY9E

[@jasonlatta2000]

Newish to react, but I think I would have done alright with this… thanks to one random example project I saw: A select list + button that alerts the selected element after a few seconds. With a functional component, the message will be whatever was selected at the time of the click. But, with a class component, the mesage would be the item selected when the message appeared. A random example that clearly showed how the state being referenced is stable across renders of a class component, but scoped to each render of a functional component. Really spelling this out though did make me think about how this works with the dependancies argument of hooks, avoiding re-renders etc, which made me think of this: React abstracts re-rendering concerns for you with the virtual dom - you tell it what to display and it figures out the necessary updates. Hooks are similar for state, in a class component, the state is actually something you’re managing. In a functional component, you just say what to do for your state, and react manages it and updating the function accordingly.

[@zdfvbadfbadb]

It's likely that what you saw in that example project was not due to the concept discussed here, but rather a mistake in how the state was being updated in one of the components (assuming the goal was that the two components produced the same results).

[@jasonlatta2000]

@@zdfvbadfbadb it was part of a tutorial where they specifically pointed out that one method did not achieve the desired effect (so they were not meant to be the same)

[@danielchan7666]

This was the best explanation I've found so far. Big ups thank you

[@Aspiiire]

I directly started with function component and I know a little bit of differences but in this video I learned a lot!! thank you so much

[@aadisarma6676]

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

[@codedamn]

More to come!

[@nacimhoc]

the way you understand and explain concepts is remarkable! thanx for sharing your knowledge

[@zathkal4004]

As I heard from a senior dev - that the soul of react is learning how to manipulate state ... Thanks bro

[@muhammadzaakirmungrue3146]

You should have mentioned that there are cases where a class component will outperform a functional component. I find placing httpRequests into componentDidMount is faster than placing it into a useEffect because componentDidMount is called only once and useEfeect is called on every render.Also a setInterval function in useEffect with an empty dependency array causes side effects when the component is quickly closed and reopened . IN REACT IT IS CALLED A MEMORY LEAK !!! Also the unique custom JSX tags is what makes React so robust , you can have a few dropwdowns or input fields one page with each in separate components by simply using these tags instead of using hooks.

[@surajbhushanpandey2882]

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

[@Mayomoz11]

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

[@anubhavsrivastava7218]

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.

[@codedamn]

Yes that's a good one-liner summary

[@dev_among_men]

Finally! I have searched this thing multiple times but never found a satisfactory answer

[@xdiepx]

Had this question in the interview. Saw this video a few weeks back and man I nailed it ^^. Thanks man

[@gulshanaggarwal4577]

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. 😎

[@dimitargetsov9690]

With my best respect , change, if You please , ( at 2.40,at the functonal component) , " setState(100)" to "setX(100)".

[@RalOliver]

So well done man... thx a lot for the explanation.

[@sheeraz1022]

Thanks a lot for this valuable information. I think instead of using setState in functional component, it has to be setX() right?

[@codedamn]

Yes you're right. It should be setX around 6:22

[@aashishbhatnagar3972]

that's really insightful thanks brother

[@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.

[@codedamn]

You’re wrong. Check the other comment made here.

[@BoonBoonitube]

@@codedamn lol, sure. We are never redefining the state, so the use of const is inconsequential. We are using a setter to update the value returned from the useState hook. This is basic Javascript.

[@doc8527]

​@@BoonBoonitube array is technically an object in JavaScript. To further explain why it works like you said.

[@doc8527]

@@codedamn Technically you only explain the differences, which is probably not enough to justify your title. A better approach is probably explaining why func component is created, which problems it's trying to solve, then the technical differences between them. Along the way we know the fundamental of React. You sorted of taking the backward way to talk about components. I just try to find a reason to explain why ppl are being aggressive to you, it's probably the title clickbait. And it endup sounds like a cheap talk that is not better than what's the diffs between useMemo and useCallback

[@codedamn]

@@doc8527 I could (would) do a follow up video on this, it seems like this video did not address all questions properly. Functional components have multiple benefits over class-based components both in DX and debugging (less high order component in render tree, etc.)

[@amjadsaleem1270]

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.

[@mohitashliya8750]

Really Helpful tutorial I have doubt before and now it's cleared Thank you

[@yashwantsahu3002-ram]

I watched this video till the end and it's super usefull for me. I request you to please create more such type on content like trick question on react Js. Thanks Sir.....

[@AlexandrosFotiadis]

Classbased components and functional components have a lot of differences just focusing on the state mutation behaviour and call it the difference is personal thing.

[@codedamn]

kzbin.info/www/bejne/oGq7iaaaeppsY9E

[@J0hnR4nd0m]

Thanks for the video. I've been doing React pretty much since it's first release, but I never really thought too much about how class-based and functional components differ. I primarily use functional components, because they tend to enforce a cleaner component structure, due to the way they set up the life cycle. However, I'm not sure I completely agree with your last point of functional components avoiding the "HOC hell". In practice, you are still going to use a lot of context providers from all kinds of third party libraries like react-router, i18next, redux or MobX, theme providers from MUI just to name the ones that probably exist in most react projects. If you're used to building apps using storybook you will also have HOCs for providing remote data access as well, since storybook basically requires to separate visual elements and functional elements of a component into separate functions as well. Anyway, great video. I very rarely get to enjoy learning new concepts in react these days. :)

[@codeak2206]

Hi @codedamn, Then how o deal with memory leak possibilities? As you mentioned previous version of functional components will completely be ignored and any asynchronous methods like timer()/setTimeout() can be there in memory ?

[@thisisrajneel]

Was just thinking about this while coming back from college!

[@codedamn]

🙌

[@headlights-go-up]

You are a wonderful teacher, thank you for devoting time to making these videos!

[@zdfvbadfbadb]

Probably the reason that 99% of experienced React devs get this question wrong in interviews is that knowing that level of difference between class and function components is completely irrelevant (as proven by the fact that most React devs don't answer correctly). What is much more important in the class vs function comparison would be all the things the dev needs to know to convert a class component to a function component when they happen to stumble upon one in a legacy codebase, not some obscure under-the-hood trivia that is only relevant to the handful of devs responsible for maintaining React itself. If an interviewer asks this question, they are probably more interested in proving how smart they are than actually determining if the person being interviewed can write good React code.

[@kushagrabainsla1641]

Great content, subscribed !!

[@aminehl6025]

After reading the comments I know now why react developers fail to answer. Most did not probably even do JS before this and many know little to nothing about the ABC of OOP or how React actually works in the background. I mean it's not that obvious that he meant that the object generated by class C1 is where the mutation happens he is saying that when react is notified about an update it will not recreate a new object C1, but rather would mutate it. As you develop, you are mostly not going to care about it or use that piece of information at all. it mostly has nothing to do with your codebase. I think he shouldn't use states as an example as it would create confusion but I'm sure it's understandable to an extent

[@RogerOnTheRight]

Decent, clear explanation. Well done, thanks.

[@aryangarg6749]

Great Explanation Bro. Thanks For Sharing This Knowledge.

[@ashutoshkumar-hj7ql]

what a brilliant explanation.

[@mohibshaik8310]

I watched the video till end , thank you for the knowledge

[@ThomasBurleson]

The key takeaway: FCs are immutable functions that can be called multiple times and thus must account for leak possibilities. Really well explained! * Class components use lifecycle methods. * FCs use hooks for lifecycle phases. * State is stored in associated hooks. * `useState()` hook triggers re-render (or re-entrant calls).

[@stevereid636]

I found this very useful. It's quite easy to take React for granted. Good to know what's going on under the hood.👍🏾

[@nielsSavantKing]

Hi, ah, very nice, very clear explananation. But on the other hand, state function also do something more overhead: it makes more copies of the state. So is that nor more memory consumed?

[@sanjeevchaurasia4819]

I understand it well. Still watched it.

[@ilearncode7365]

The difference is that nobody is usimh class based components since hooks came out like 4 years ago. That should be the real answer. This is like asking a netscape compatilibilty question.

[@varunprashar3357]

Very good explanation, really appreciate your efforts.

[@chiragsainii]

This was really nice🔥🔥

[@mohammadshohag604]

I appreciate your teaching.

[@martinpettersson4863]

In a scenario where you have a component with some state, a couple of lifecycle operations and a high render frequency. Would a class based component edge out functional components in performance? Since a class based component doesn't have to recreate function stack frames, return addresses and any other overhead that comes with function calls.

[@adityatomar3784]

I watched this video till the end. Thank You Mehul for your sincere efforts in video making

[@MarceloGiarola]

8:56 I watched till the end

[@tranduc5227]

Love this video, it is very useful!

[@jasonsebring3983]

They are trading one hell for another... unintended closures become apparent very quickly on any memoized functions.

[@nikhilbhatiaa]

If someone ask me this question, I’ll just quit the interview right away

[@sunilsahu8254]

I never knew this kind of thing there behind class and functional based components 👍

[@JoseLuisQuevedo]

LOVED IT, WATCHED IT TILL THE END!

[@jamesfoley4054]

Great explanation thanks

[@sanjarcode]

TBH, this didn't make sense. It's exactly the same. Functional components are a syntactic sugar, to making React even more declarative. Can I get an explanation?

[@tsdineshjai8565]

Wonderful explanation 👏 Mehul could you make a video of top react interview questions everyone should know.

[@hyfydistro]

I see the tree JSX tree hell with the Context API sometimes in code base with React hooks. Is this common or just some bad programmer practice?

[@harshitjoshi3082]

1. Mutation 2. Class components uses oop While function components use Hooks which are built using closure 3. Render tree (rendering difference)

[@sidwebworks9871]

watched it till the end....just like old times

[@codedamn]

🙏

[@mallappabijjur5577]

Insightful information

[@codedamn]

😁

[@ahmadirfan7840]

If the class based components is mutable, is that the reason why we used componentWillMount(), componentWillMount() and etc?

[@ramonaridgewell]

I watched to the end. Thanks.

[@aytacg26]

I watched it till the end and thank you very much for this valuable information

[@unstable_diffusion]

I might get it wrong but most companies are ditching class components in favor of functional ones. So this question might get obsolete in 1-2 years. I've been to multiple react interviews and never had this question.

[@benjaminguma9962]

I watched this useful video till da endddd!

[@danumichael2143]

Great explanation

[@arcosd63]

I watched this video almost until the end. So, class components mutate, functional components ( const ) are immutable, except when using hooks

[@therebelliousgeek4506]

I'm preparing a portfolio for my first job, hopefully they won't ask me that much about class based components. I know it, but I really really prefer functional components, it's just plain better, in every sense. But guess you need that to work on older stuff. oof.

[@therebelliousgeek4506]

@@mohithguptakorangi1766 No, mern projects for my portfolio.

[@therebelliousgeek4506]

@@mohithguptakorangi1766 Not yet at least.

[@ANONYMOUS-ze7nc]

Your Opinion on Salesforce developer VS Java Developer?

[@theavggamer7298]

Yeah, watched till end and learned something.

[@pavitkailay5174]

wattup bro, I watched the video till the very end!!

[@dhanashekaranm4725]

Thanks for the video

[@saumopal1997]

So basically functional components follow the functional programming paradigm and class based components follow the OOPS paradigm.

[@sanjarcode]

No. The class and functional here have nothing to do with OOP/FP. They're misnomers. Functional components just make React even more declarative (i.e. less fixed structures - follow rules of hook, return UI for components, all lifecycle "hooks" are just variation of useEffect).

[@echobucket]

Const doesn’t have anything to do with mutation in JavaScript.

[@B08AH]

You should never use state in functional component, it is meant to be pure function. Which makes the question, and answer to it, irrelevant.

[@abdelmalekdjema4972]

3:31 shouldn't you recall setX(100) instead of setState(100) ?

[@codedamn]

Yes you’re right it should be setX

[@immayurpanchal]

Hi @codedamn. Your content is really great. I have watched both of the videos. I am a fan of reading. Would you please share some article which explains the same concepts with actual examples? That would be really great for me to understand the concept even better. Happy Diwali

[@mraravind1111]

At 5:47 you say that in a functional component, the state object stays the same in the previous render of the function upon a state update. However, there isn’t a way to access the previous rendition upon updating a state, therefore wonder why should anyone care about the previous rendition staying same or not???

[@codedamn]

UI is only one part of React component. The logic layer is also written in the same component. Imagine having a timer with setTimeout which accessed the state long after the component is unmounted or changed the state

[@mukulr5171]

Thanks for this

[@bramlachat2515]

I watched this video till the end!

[@thegreatbambino3358]

Doesn't const in the assignee of useState refer to the array itself which is then destructured and not the elements of the array itself? As in I can declare an array normally like const arr = []; and then push and pop elements from that array because const refers to the memory address where the array resides and not that the array itself is immutable.

[@codedamn]

The const refers to elements of array itself as well. const [x] = [5]; x = 2; is wrong code

[@thegreatbambino3358]

@@codedamn Hmm. you're right. just ran a simple test in node. I honestly thought named destructuring was essentiatlly syntactic sugar for array[0] or array[1].

[@nadimalaa8961]

Thank you

[@literallybiras]

Not really correct according to the docs

[@codedamn]

Really correct according to source code kzbin.info/www/bejne/oGq7iaaaeppsY9E

[@meghapaul1496]

What an explanation! Thank you so much for clearing out the muted and not muted concept so well!🙌

[@smaranh]

2:37 Class component has a bracket missing

[@wayneswildworld]

Who uses class based? I've heard that everyone is moving to functional?

[@sunilmaurya6594]

by this video you gonna go more subscribers

[@viswanathank2551]

Watched till the end thanks 😉

[@ZestyGuy-World]

I am telling everyone who are watching this that this video is not for beginners and intermediate developers like me!!!!!

[@manojkumar-jt3fw]

Sir, can u please suggest me the source where i can start learning React