@@lucasrodrigues9766 man, we should know class components for sure to work with legacy projects. But please don’t use class components in new projects.
For almost a year now, I have never used class components. I just don't feel the need to use them anywhere. Functional components can do everything now that a class component can do. Also React's new docs will also replace all class components with functional.
Yeah functional components seems to be the future to me. I have a buddy who works for a private tech company and he usually does functional components now.
I still love using class, it is much easier when passing and updating state in a big scale project. function component is so dirty when working in a big project. Updating state from child is pain in the ass using function. Using class, you can just pass the state and you can update that state directly from child component without passing the state setter. "OR maybe I'm just missing something?"
if you want, you can write all your states into "const [state,setState]=useState({all_your_state})" and pass only state and setState to the child component. though I am not sure if this is a good practice.
I never use class components since I first learn React last year. But a lot of more senior programmer do still use the class components so I have to learn it too. But it's to 'noisy' for me. This video confirms it. Thank you ^_^
I think it’s good to be aware of class based components, and understand how they work, but I can’t envisage a scope for using them over functional components. Currently in my job, I’m refactoring a react-native app written in class based components to functional components
Refactoring a code is one of the most tiring thing to do in a project lmao. You have to like really be careful that all other functionalities are still working.
fire content as always, could you make a shortcut vscode video? 11:55 kinda nice. hitting that 100k papa react! that seems like a pretty good christmas
i first learned react and i am coding on class component, because i like coding on class component and it makes me easy to code maybe i have not coded in functional component before
This doesn't really explain the advantages and disadvantages of the each. I feel like if you have a component that has some complex state or has much functionality, class components are much easier to work with, and also performance, class based components are more performant than function based ones if you are doing frequent updates. Things get even more complicated once you start to memoise things and need to add dependency arrays and stuff. I have a pretty big webapp, I've used class components for the "macro" pages, as in, the ones which handle the overall state of the whole app, then I used functional components to make all the rest. In short: use functional components if you don't re render them often and have simple state Use class components if the component is big or does many rerenders
I disagree with your points, at a fundamental level functional components are lighter, more performant, and simpler to understand and implement than class based components. The above points you mentioned would only favour class based components if you aren’t applying them in a correct manner, this typically happens due to a lack of understanding hence defaulting to class based components. There is a reason why react defaults to functional components now and is deprecating class based lifecycle functions.
@@SonnySangha my webapp on normal use has up to 50 rerenders a second, the speed of the class component comes from the fact that you don't need to "re run" and build all the functions that reside in the component itself but only the render method, while function components recreate everything at every render, you could use hooks like useCallback to improve this, but that means having to manage dependencies which is kind of annoying once you get to bigger components. I'm slowly moving away from class components and moving to functional components + mobx for state management. I have to point out that for the usual website or program, function components are fine for everything, Even larger ones, mine is more of a "special case"
@@SonnySangha There is no inherent performance benefit of Hooks over Class based components or vice versus. Both have the same performance. The React team has stated they were going to provide some features that FCs + Hooks would benefit from, but nothing has been updated in that regard. @Specy I don't think you can say that Class Components are more performant for frequent updates, and then provide ways we mitigate that in Functional Components and then say you just don't like having to manage dependencies and such. Imo, handling dependencies and doing the shallow comparison is much easier and cleaner than having to handle that in a Class lifecycle method. Long story short, FCs vs Classes really comes down to preference at this time. Neither is more performant than the other, and frequent re-renders wouldn't be a reason for why you'd choose one over the other. It's why we memoized and dependency arrays.
You explain nicely. Just a suggestion while speaking drop the accent. for example I cant really understand when you say could and couldnt . both sound same .suggestion As non native english speaker .
I think both can be useful. I usually prefer class based components, especially for larger components with complex logic that track more than a few state variables.
I know that people prefer to use functional components but as an ex-game developer class component look much simpler to me as they're a bit similar to the monobehaviour classes from unity. edit: After working for more than a year in react, I'd prefer functional components they have better features and are easier to work with.
I really don't understand why people are so fond about functional components. To me, as a Java developer, classes are a way to accomplish this. Also the use of 'const' as being a variable is just pure nonsense. A const is a constant and not something that should be changed... just my 2 cts ;)
@@latelatecheung because I felt like being trapped inside unity, I never knew what's it's like to write low level code or something that runs on the web, I still love game development but I was really burnt out as I had to make models, textures, UI, animations, all the sounds, shaders and script for every game object all by myself, it soon started to feel overwhelming and my games were laggy af, Yeah I know I can make 2d games much faster (and as an Indie I should) but I prefer 3d games, I still make a few projects in unity and dots in my part-time but you know, I have bills to pay and learning javascript is an easy way to do that. I'm a lot mature programmer now, I may make games in my free time just not as a full time gamedev.
@@latelatecheung and if you're thinking I should use Unreal engine or something else, then yeah I tried and it just doesn't run that good with my 8 gigs of RAM.
I think one thing that always gets missed with these discussions is Custom Hooks. Most people who are coming from Class based components have trouble seeing the value of Functional Components. I think you did a good job explaining this, but the real value in my opinion is the ability to pull out ALL of the state logic and all of your side effects into their own custom hooks which can be consumed across all of your other components. Which allows your components to only focus on the UI and not have to worry about state at all. When I demonstrate this... that is usually when the lightbulb goes off for most people. Obviously this could be handled previously in class components with HOCs or some type of service based architecture & pure components... but with Hooks, it's so much easier to do it.
Great video. But Functional components is a hack inside React. The React team created this logic inside React for Class components added tons of boilerplate code. After years of using Class components, they are told for developers: "You need to use functional components". RIdiculous team. React is a mistake.
Sonny, would love to see something like a dropbox type clone, so users sign up with their own emails instead of google sign in and can upload and share files!
Doesn't seems like enough info has been provided here about why functional components are better than class component, it's not sufficient for cracking a react interview.
Hi Sonny, just found your channel by accident and you have excellent content. I just began learning React 5 days ago and I am picking it up quickly since it is functional. Before picking up React I was studying hard classes and found learning classes and creating new objects kind of confusing especially when it came to learning how to use this key word, I prefer React hooks any day of the week! Question? I am not in the tech industry yet. I am still fairly new to learning front end development. I was wondering from your personal experience, are most companies using React the new and modern way in a functional format or are most using React as a class-based system? After I get a good handle of React as function would you recommend I re learn React again but in the old way which was classes? Thanks Sonny!
![[UNCUT] The Loyal Pin ปิ่นภักดิ์ EP.6 (1/4)](http://i.ytimg.com/vi/m05kZ2GDKXg/mqdefault.jpg)
📬Do you want DAILY coding problems sent DIRECTLY to your Inbox? (with solutions the next day) 👉 links.papareact.com/university
Functional based components is a winner. If you want to use class based components instead of going to react they can go for angular or vue
Agree, I have never seen a scenario where a class component can be useful after the introduction of hooks.
I agree but for more information there are no classes in vue lol
But you have to learn it since you will encounter projects that you will have to deal with that use class components
@@lucasrodrigues9766 man, we should know class components for sure to work with legacy projects. But please don’t use class components in new projects.
Agreed!
For almost a year now, I have never used class components.
I just don't feel the need to use them anywhere. Functional components can do everything now that a class component can do. Also React's new docs will also replace all class components with functional.
Yeah functional components seems to be the future to me. I have a buddy who works for a private tech company and he usually does functional components now.
Sony, you have mentored me in this career. highly appreciate you.
I am from Bangladesh, one of the greatest programmers of all time. I like your projects very much.
An explanation if there is a difference in the re-renders between the two approaches would be nice.
I still love using class, it is much easier when passing and updating state in a big scale project. function component is so dirty when working in a big project. Updating state from child is pain in the ass using function. Using class, you can just pass the state and you can update that state directly from child component without passing the state setter. "OR maybe I'm just missing something?"
if you want, you can write all your states into "const [state,setState]=useState({all_your_state})" and pass only state and setState to the child component. though I am not sure if this is a good practice.
Useful af, since I was following a tutorial that still used class components (while a guy on reddit said functional comp's were better)
Hey can you name the channel for class based components in react
@@inspirationsemotivationtak1467 @Almighty java
I never use class components since I first learn React last year. But a lot of more senior programmer do still use the class components so I have to learn it too. But it's to 'noisy' for me. This video confirms it. Thank you ^_^
React is anti-Islam !!!
Love you bro from India, You have made this topic very easy for us, Thanks a lot
I think it’s good to be aware of class based components, and understand how they work, but I can’t envisage a scope for using them over functional components. Currently in my job, I’m refactoring a react-native app written in class based components to functional components
that looks like so much work
@@kaunghtethein3322 yeah, it’s not fun 😭
Refactoring a code is one of the most tiring thing to do in a project lmao. You have to like really be careful that all other functionalities are still working.
And that is how I understood functional and class component in less than 16 mins guys, of course after more than a few months of learning react
Now this is how you teach anything 👍
Clearing fundamentals first and then diving into the project making
The right way.
fire content as always, could you make a shortcut vscode video? 11:55 kinda nice.
hitting that 100k papa react! that seems like a pretty good christmas
ctrl D
Bro took glasses off and i was like wow new youtuber nice
Really great video. That last bit of syntax, of pulling out the props, and still having that catch all props at the ends seems really clean
I write everything as class components. IDK why, but the component life cycle is more clear and makes more sense to me in a class than in a function.
I had an argument on twitter. This video helps a lot. Thanks
i first learned react and i am coding on class component, because i like coding on class component and it makes me easy to code maybe i have not coded in functional component before
Dude is one of the best dev teachers there is!
The one and ONLY Sonny! Thank you being my energy!!!
Very happy to come across this, i have been struggling to understand this, but now i do well a lot. Thanks
Thank you for this Video Sir. very clear, professional and helpful. so in 2023 can you suggest for new projects to use FC as the default preffered?
Always love and enjoy your contents, thanks for everything 🙏
this is an fantastic video sir its clears some questions of class based components thanks
Sonny could you do a React Testing video?
This doesn't really explain the advantages and disadvantages of the each. I feel like if you have a component that has some complex state or has much functionality, class components are much easier to work with, and also performance, class based components are more performant than function based ones if you are doing frequent updates. Things get even more complicated once you start to memoise things and need to add dependency arrays and stuff.
I have a pretty big webapp, I've used class components for the "macro" pages, as in, the ones which handle the overall state of the whole app, then I used functional components to make all the rest.
In short:
use functional components if you don't re render them often and have simple state
Use class components if the component is big or does many rerenders
I disagree with your points, at a fundamental level functional components are lighter, more performant, and simpler to understand and implement than class based components. The above points you mentioned would only favour class based components if you aren’t applying them in a correct manner, this typically happens due to a lack of understanding hence defaulting to class based components.
There is a reason why react defaults to functional components now and is deprecating class based lifecycle functions.
@@SonnySangha my webapp on normal use has up to 50 rerenders a second, the speed of the class component comes from the fact that you don't need to "re run" and build all the functions that reside in the component itself but only the render method, while function components recreate everything at every render, you could use hooks like useCallback to improve this, but that means having to manage dependencies which is kind of annoying once you get to bigger components. I'm slowly moving away from class components and moving to functional components + mobx for state management. I have to point out that for the usual website or program, function components are fine for everything, Even larger ones, mine is more of a "special case"
@@SonnySangha There is no inherent performance benefit of Hooks over Class based components or vice versus. Both have the same performance. The React team has stated they were going to provide some features that FCs + Hooks would benefit from, but nothing has been updated in that regard.
@Specy I don't think you can say that Class Components are more performant for frequent updates, and then provide ways we mitigate that in Functional Components and then say you just don't like having to manage dependencies and such. Imo, handling dependencies and doing the shallow comparison is much easier and cleaner than having to handle that in a Class lifecycle method.
Long story short, FCs vs Classes really comes down to preference at this time. Neither is more performant than the other, and frequent re-renders wouldn't be a reason for why you'd choose one over the other. It's why we memoized and dependency arrays.
u're so clean! i've learned a lot of information so quick thanks!
wow, got a lot of clarity from this vid
You explain nicely. Just a suggestion while speaking drop the accent. for example I cant really understand when you say could and couldnt . both sound same .suggestion As non native english speaker .
Use effect in functional component while cycle in class components
thank you!
i used your link just to support you I love your content and appreciate you
Functional components since react hook came. It makes my life easier.
Glad to see this video, i just learned react as well and confusing about which better between class and functional component. Thanks a lot sonny 😁
Thumbnail is 🔥🔥
I think both can be useful. I usually prefer class based components, especially for larger components with complex logic that track more than a few state variables.
I know that people prefer to use functional components but as an ex-game developer class component look much simpler to me as they're a bit similar to the monobehaviour classes from unity.
edit: After working for more than a year in react, I'd prefer functional components they have better features and are easier to work with.
I really don't understand why people are so fond about functional components. To me, as a Java developer, classes are a way to accomplish this. Also the use of 'const' as being a variable is just pure nonsense. A const is a constant and not something that should be changed... just my 2 cts ;)
why leave game industry? if I have ability to be a game programmer, I do not want go to develop web
@@latelatecheung because I felt like being trapped inside unity, I never knew what's it's like to write low level code or something that runs on the web, I still love game development but I was really burnt out as I had to make models, textures, UI, animations, all the sounds, shaders and script for every game object all by myself, it soon started to feel overwhelming and my games were laggy af, Yeah I know I can make 2d games much faster (and as an Indie I should) but I prefer 3d games, I still make a few projects in unity and dots in my part-time but you know, I have bills to pay and learning javascript is an easy way to do that.
I'm a lot mature programmer now, I may make games in my free time just not as a full time gamedev.
@@latelatecheung and if you're thinking I should use Unreal engine or something else, then yeah I tried and it just doesn't run that good with my 8 gigs of RAM.
@@thatsalot3577 I know you feel bro. hope you get good pay in web industry
I think one thing that always gets missed with these discussions is Custom Hooks. Most people who are coming from Class based components have trouble seeing the value of Functional Components. I think you did a good job explaining this, but the real value in my opinion is the ability to pull out ALL of the state logic and all of your side effects into their own custom hooks which can be consumed across all of your other components. Which allows your components to only focus on the UI and not have to worry about state at all.
When I demonstrate this... that is usually when the lightbulb goes off for most people. Obviously this could be handled previously in class components with HOCs or some type of service based architecture & pure components... but with Hooks, it's so much easier to do it.
In the end of class era, you did not really use constructor and super. You just declared state as an object inside your class.
This is very helpful information. Really well put together.
I see no reason why one would want to use class components...
to use the this object
Lol hooks were a mistake. I know how react codebases looked before and after hooks. After is definitely more like a nice dish of spaghetti 😂
Great video. But Functional components is a hack inside React. The React team created this logic inside React for Class components added tons of boilerplate code. After years of using Class components, they are told for developers: "You need to use functional components". RIdiculous team. React is a mistake.
Sonny,
Could you please make a video on time management and how to avoid distractions.
You are so great and master in time management.
Explain very clear, thanks.
Great video and nicely explained. Thank you !
Sonny, would love to see something like a dropbox type clone, so users sign up with their own emails instead of google sign in and can upload and share files!
Doesn't seems like enough info has been provided here about why functional components are better than class component, it's not sufficient for cracking a react interview.
Someone call the interview police… 👮♂️
Hi Sonny, just found your channel by accident and you have excellent content. I just began learning React 5 days ago and I am picking it up quickly since it is functional. Before picking up React I was studying hard classes and found learning classes and creating new objects kind of confusing especially when it came to learning how to use this key word, I prefer React hooks any day of the week!
Question? I am not in the tech industry yet. I am still fairly new to learning front end development. I was wondering from your personal experience, are most companies using React the new and modern way in a functional format or are most using React as a class-based system? After I get a good handle of React as function would you recommend I re learn React again but in the old way which was classes?
Thanks Sonny!
Uuu and he doesn't answer
@@Andres_cali LOL I am pretty sure he got soooo many subscribers to attend too.
Good explanation, but I still don't know in which cases developer supposed to use class instead functional components
(Maybe I've lost something)
Thank u about this gorgeous explanation Sonny, I have question! When we will be more deep in development we use Higher Order Component ?
Man you are amazing 💫 love you brother...
100k Subscribers LETS GO!!! 🔥🔥🔥
Thanks for the free month and great content. You are now my go to place when I eat lol
Thank you. Very well taught.
Thank You!
Understand fully nice video make more video bro
love it man really you're an added value
1 million subscribers coming soon..., keep teaching sonny :)
Really good video! Very helpful...❣️
great video man
Great video. It was explained very well.
I learned something new. Nice eyebrows
😉
Doubt cleared
Thank u
Best tutorial!
Thank you so much for a very detailed explanation, I fully understand the difference between the two.
Wow! Been a bit since I watched your vids. Love the quality upgrades to the transitions and overall viewing experience. Job well done.
Thank you for the videos !
Awesome 🔥🔥🔥
When it comes to banking systems, this way will be very dirty in coding style especially, when lot of effects block is written into.
Completely disagree. This is down to lack of understanding
Nice video bro, thanks you so much
how can u write on the screen whidout using paint or similar? that would be so usefull to know
Watched this channel grow from 5k to 100k. Way to go Sonny 🔥🔥
Very good content, thanks!
love from india dude
13 yr old here 😍
its almost 2022, why would you still use class components? well sometimes you need to but thats just an expection
So there’s no other difference other than brevity and cleanliness?
What program do you use to draw on the screen while recording?
understood thank you!!
Functional component is fun to use.
That was helpful
I love to use functional components.
Good Work #PAPAFAM
Sonny the best!💪💪💪
Next project: VENMO Full Stack🔵!
functional components are simply superior 😈😈
Sonny is the best!
TLDR; Use Functional Components and Hooks! Forget the existence of class based components.
lol i was just wondering if someone would make a video about this. thanks
Navigation 6 using class based component any suggestions
100K is near 🔥🔥🔥🔥.
I am from India
precise explanation🔥
ma sonny only 1k left pleas surprise as at the same time 100k make an awsome PWA(access camera and mach more ... ) project with nextjs
video start at 2:43
Sonny is ZTFSH still live/ open for Dec?
Im confused what happened at the end with the ..props, why did you add year as well? Where are you pulling those values from?
Hey guys anyone knows which brand is his headset? it looks really nice
Audiotechnika!
Hello, what's the tool you use to draw on screen btw? Looks cool.
I think I found the program he's using. It's called ScreenBrush
Thanks bhai!