99% React Developers Fail to Answer THIS Question!

Рет қаралды 100,909

Күн бұрын

PART 2 of this video: • 100% React Developers ...
⚛️ Learn Full Stack Development on codedamn: cdm.sh/fullstack
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
👉 Free HTML5 + CSS3 Course: cdm.sh/htmlcsscourse
👉 Free JavaScript Course: cdm.sh/jsbasicscourse
👉 Free ReactJS Course: cdm.sh/react
👉 Free NextS Course: cdm.sh/nextjsbasicscourse
💰 Refer codedamn to friends and earn $$: cdm.sh/refer
👉 Checkout codedamn on social:
Instagram: cdm.sh/ig
Twitter: cdm.sh/twt
Facebook: cdm.sh/fb
GitHub: cdm.sh/github
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.
📙 I am an author of 2 books, on JavaScript and React - cdm.sh/mehulbooks
🚀 Currently working on my own startup - codedamn.
Connect with me:
📸 Instagram: cdm.sh/mehulig
📱 Twitter: cdm.sh/mehultwitter
📝 LinkedIn: cdm.sh/mehullinkedin
📂 GitHub: cdm.sh/mehulgithub
🌎 Personal website: cdm.sh/mehulblog
💻 Start learning to code for free: cdm.sh/codedamn
🧑‍🤝‍🧑 Discord community: cdm.sh/discord
👉 HTML5 + CSS3 Tutorials: cdm.sh/htmlcssytplaylist
👉 Complete JavaScript Tutorial: cdm.sh/jstutorial
👉 Complete React Crash Course: cdm.sh/reacttutorial
👉 Next JS Tutorials: cdm.sh/nextjsytplaylist
🏷 Video Tags:
99% React Developers Fail to Answer THIS Question!
React.js course
React 18 full course
Learn react.js free
React free tutorials
React course
React beginner tutorial
React.js full course
react tutorial
react js
learn react
react javascript
react tutorial 2021
react js tutorial
react tutorial for beginners
👉 Check out my other personal KZfaq channel (it is in Hindi/English mix) where I share coding tips, tricks, and hacks: cdm.sh/mehulyt

Пікірлер: 257

@codedamn 2 жыл бұрын

EDIT 2: People who are confused and think the video is wrong, please watch part 2: kzfaq.info/get/bejne/oJ-Ii9aVqpudXaM.html 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 2 жыл бұрын

I understood it. Great explanation.

@TastyTales792 2 жыл бұрын

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

@yashsharma6269 2 жыл бұрын

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

@Krajesh21 2 жыл бұрын

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 2 жыл бұрын

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

@Ismail_Vatakara Жыл бұрын

obviously

@mtcjrs 2 жыл бұрын

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 2 жыл бұрын

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 2 жыл бұрын

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 2 жыл бұрын

@@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 2 жыл бұрын

@@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 2 жыл бұрын

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

@NaryVip 2 жыл бұрын

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

@onceajordan 2 жыл бұрын

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

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

@gulshanaggarwal4577 2 жыл бұрын

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

@amjadsaleem1270 2 жыл бұрын

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.

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

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

@TheMorpheusish 2 жыл бұрын

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 2 жыл бұрын

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

@TheMorpheusish 2 жыл бұрын

@@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 2 жыл бұрын

kzfaq.info/get/bejne/oJ-Ii9aVqpudXaM.html

@DK-ox7ze 2 жыл бұрын

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

@MoritzKrog Жыл бұрын

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. :)

@anubhavsrivastava7218 2 жыл бұрын

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 2 жыл бұрын

Yes that's a good one-liner summary

@headlights-go-up 2 жыл бұрын

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

@Mayomoz11 2 жыл бұрын

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

@codeak2206 10 ай бұрын

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 ?

@nacimhoc 2 жыл бұрын

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

@Aspiiire 2 жыл бұрын

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

@RalOliver 9 ай бұрын

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

@aadisarma6676 2 жыл бұрын

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

@codedamn 2 жыл бұрын

More to come!

@zathkal4004 2 жыл бұрын

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

@mohitashliya8750 2 жыл бұрын

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

@danielchan7666 Жыл бұрын

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

@aryangarg6749 2 жыл бұрын

Great Explanation Bro. Thanks For Sharing This Knowledge.

@RogerOnTheRight 2 жыл бұрын

Decent, clear explanation. Well done, thanks.

@aashishbhatnagar3972 Жыл бұрын

that's really insightful thanks brother

@stevereid636 2 жыл бұрын

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

@kushagrabainsla1641 2 жыл бұрын

Great content, subscribed !!

@xdiepx 2 жыл бұрын

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

@RyanWaite28 2 жыл бұрын

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.

@bipinmaharjan4090 2 жыл бұрын

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

@tranduc5227 2 жыл бұрын

Love this video, it is very useful!

@asagiai4965 11 ай бұрын

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.

@martinpettersson4863 2 жыл бұрын

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.

@sheeraz1022 2 жыл бұрын

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

@codedamn 2 жыл бұрын

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

@muhammadzaakirmungrue3146 2 жыл бұрын

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.

@varunprashar3357 2 жыл бұрын

Very good explanation, really appreciate your efforts.

@JoseLuisQuevedo 2 жыл бұрын

LOVED IT, WATCHED IT TILL THE END!

@jg7634 2 жыл бұрын

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 2 жыл бұрын

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

@arminphulkar2442 2 жыл бұрын

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

@arminphulkar2442 2 жыл бұрын

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

@codedamn 2 жыл бұрын

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

@JuDaSuCrUz 2 жыл бұрын

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.

@chiragsainii 2 жыл бұрын

This was really nice🔥🔥

@hyfydistro 2 жыл бұрын

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?

@dev_among_men 2 жыл бұрын

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

@aytacg26 2 жыл бұрын

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

@yashwantsahu3198 10 ай бұрын

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

@ahmadirfan7840 2 жыл бұрын

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

@adityatomar3784 10 ай бұрын

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

@tsdineshjai8565 2 жыл бұрын

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

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

@ashutoshkumar-hj7ql 3 ай бұрын

what a brilliant explanation.

@mohammadshohag604 2 жыл бұрын

I appreciate your teaching.

@sudarshankj 2 жыл бұрын

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 2 жыл бұрын

kzfaq.info/get/bejne/oJ-Ii9aVqpudXaM.html

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

@Shaktiman-dz4vq 2 жыл бұрын

1 doubt. so in functional component when I changed a state variable, it made new function call. That is the a new function component call was made. Does that mean the whole component will be re rendered or only the part which is affected by that particular state variable?

@codedamn 2 жыл бұрын

The tree that new function call would return would be diffed with the older tree. Wherever the updates are required they would be applied on real DOM. That’s what vDOM is

@Shaktiman-dz4vq 2 жыл бұрын

@@codedamn thank you for clarifying it.

@mdsalehan5683 2 жыл бұрын

Can u please recommend us any course of web dev Nd android dev that follows the topic in depth !

@thisisrajneel 2 жыл бұрын

Was just thinking about this while coming back from college!

@codedamn 2 жыл бұрын

🙌

@immayurpanchal 2 жыл бұрын

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

@mohibshaik8310 9 ай бұрын

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

@tejasnikam3287 2 жыл бұрын

Amazing !!!!

@jamesfoley4054 2 жыл бұрын

Great explanation thanks

@jasonlatta2000 2 жыл бұрын

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)

@dimitargetsov9690 Жыл бұрын

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

@dhanashekaranm4725 2 жыл бұрын

Thanks for the video

@benjaminguma9962 2 жыл бұрын

I watched this useful video till da endddd!

@viswanathank2551 2 жыл бұрын

Watched till the end thanks 😉

@manojkumar-jt3fw 2 жыл бұрын

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

@danumichael2143 2 жыл бұрын

Great explanation

@thegreatbambino3358 2 жыл бұрын

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 2 жыл бұрын

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

@thegreatbambino3358 2 жыл бұрын

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

@sunilsahu8254 2 жыл бұрын

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

@sanjeevchaurasia4819 2 жыл бұрын

I understand it well. Still watched it.

@mukulr5171 2 жыл бұрын

Thanks for this

@AlexandrosFotiadis 2 жыл бұрын

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 2 жыл бұрын

kzfaq.info/get/bejne/oJ-Ii9aVqpudXaM.html

@meghapaul1496 2 жыл бұрын

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

@ramonaridgewell 2 жыл бұрын

I watched to the end. Thanks.

@mallappabijjur5577 2 жыл бұрын

Insightful information

@codedamn 2 жыл бұрын

😁

@mraravind1111 2 жыл бұрын

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 2 жыл бұрын

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

@HumbertoRincon 2 жыл бұрын

I watched this video till the end!

@codedamn 2 жыл бұрын

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

@hv7460 2 жыл бұрын

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

@nadimalaa8961 Жыл бұрын

Thank you

@abdelmalekdjema4972 2 жыл бұрын

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

@codedamn 2 жыл бұрын

Yes you’re right it should be setX

@sunilmaurya6594 2 жыл бұрын

what a quality content

@sidwebworks9871 2 жыл бұрын

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

@codedamn 2 жыл бұрын

🙏

@vishwanathsnayak Жыл бұрын

well explained

@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

@aeronwolfe7072 Жыл бұрын

Great video!!!

@theavggamer7298 2 жыл бұрын

Yeah, watched till end and learned something.

@smaranh 2 жыл бұрын

2:37 Class component has a bracket missing

@pavitkailay5174 2 жыл бұрын

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

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

@mohdnawazishalam3255 2 жыл бұрын

Can u please share some more topics like this

@ujjawalchatterjee 2 жыл бұрын

Superb video

@codedamn 2 жыл бұрын

🙌

@jatinchourasia9977 2 жыл бұрын

make more vids like this

@BoonBoonitube 2 жыл бұрын

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 2 жыл бұрын

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

@BoonBoonitube 2 жыл бұрын

@@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 2 жыл бұрын

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

@doc8527 2 жыл бұрын

@@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 2 жыл бұрын

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

@ANONYMOUS-ze7nc 2 жыл бұрын

Your Opinion on Salesforce developer VS Java Developer?

@danianiazi8229 2 жыл бұрын

Want More in React interview concept

@hellofriend3091 2 жыл бұрын

Love you brother

@codedamn 2 жыл бұрын

🤗

@hellofriend3091 2 жыл бұрын

@@codedamn ❤️

@jasonsebring3983 2 жыл бұрын

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

@dpkumar81 2 жыл бұрын

Super video

@indranilmondal.webdev 2 жыл бұрын

Just thanks

@ArnavSingh-im5bj 2 жыл бұрын

I think the main difference is binding

@sunilmaurya6594 2 жыл бұрын

by this video you gonna go more subscribers

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