Class Components vs Functional Components in React (Which is better? - Beginner's Guide)

[@SonnySangha]

📬Do you want DAILY coding problems sent DIRECTLY to your Inbox? (with solutions the next day) 👉 links.papareact.com/university

[@serenity-symphony]

Sony, you have mentored me in this career. highly appreciate you.

[@shreyasp4789]

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

[@alexkonstantinov4256]

Agree, I have never seen a scenario where a class component can be useful after the introduction of hooks.

[@munandisichali605]

I agree but for more information there are no classes in vue lol

[@lucasrodrigues9766]

But you have to learn it since you will encounter projects that you will have to deal with that use class components

[@alexkonstantinov4256]

@@lucasrodrigues9766 man, we should know class components for sure to work with legacy projects. But please don’t use class components in new projects.

[@mrcrypticx1]

Agreed!

[@meetshah4432]

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.

[@TheSoulCrisis]

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.

[@Native-Coder]

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.

[@md.mehedihasan800]

I am from Bangladesh, one of the greatest programmers of all time. I like your projects very much.

[@mikolots]

Dude is one of the best dev teachers there is!

[@aengtech]

I had an argument on twitter. This video helps a lot. Thanks

An explanation if there is a difference in the re-renders between the two approaches would be nice.

[@zhrgci]

Useful af, since I was following a tutorial that still used class components (while a guy on reddit said functional comp's were better)

[@inspirationsemotivationtak1467]

Hey can you name the channel for class based components in react

[@zhrgci]

@@inspirationsemotivationtak1467 @Almighty java

[@TrainYourDragon999]

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

[@codekicks2171]

Love you bro from India, You have made this topic very easy for us, Thanks a lot

[@mikedelta658]

The one and ONLY Sonny! Thank you being my energy!!!

[@alwyschwuetz]

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

[@johnjohnix]

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

[@0080437]

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.

[@r_yan3531]

Now this is how you teach anything 👍 Clearing fundamentals first and then diving into the project making The right way.

[@guitarupfront9444]

i used your link just to support you I love your content and appreciate you

[@lancetakiguchi9756]

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

[@salvatorebarretta1410]

u're so clean! i've learned a lot of information so quick thanks!

[@CavanMitchell]

wow, got a lot of clarity from this vid

[@Vikingsplayer]

this is an fantastic video sir its clears some questions of class based components thanks

[@isaacidibia2117]

Very happy to come across this, i have been struggling to understand this, but now i do well a lot. Thanks

[@RizaHariati]

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 ^_^

[@aryandhanawade8063]

React is anti-Islam !!!

[@feliwein_cc]

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

[@dimitritsikaridze6220]

ctrl D

[@ebrahim-sani]

Always love and enjoy your contents, thanks for everything 🙏

[@DanyTLaw]

Thanks for the free month and great content. You are now my go to place when I eat lol

[@mthoNtanzi]

This is very helpful information. Really well put together.

[@alamesawikanningkaton5028]

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 😁

[@subramanyashegade8248]

Thumbnail is 🔥🔥

[@themoadel]

love it man really you're an added value

[@thatsalot3577]

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.

[@jsomhorst]

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]

why leave game industry? if I have ability to be a game programmer, I do not want go to develop web

[@thatsalot3577]

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

[@thatsalot3577]

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

[@latelatecheung]

@@thatsalot3577 I know you feel bro. hope you get good pay in web industry

[@ashutoshpandey4171]

1 million subscribers coming soon..., keep teaching sonny :)

[@CodingFire]

100k Subscribers LETS GO!!! 🔥🔥🔥

[@reach5593]

Functional components since react hook came. It makes my life easier.

[@chrisbrowning550]

Great video and nicely explained. Thank you !

[@ajalasegun1]

I see no reason why one would want to use class components...

[@priyojitchatterjee6164]

to use the this object

[@rumble1925]

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 😂

[@mayurbahuguna8438]

Man you are amazing 💫 love you brother...

[@raivikas200]

100K is near 🔥🔥🔥🔥.

[@srinivasulurao]

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.

[@SonnySangha]

Someone call the interview police… 👮‍♂️

[@ayasalem1745]

Bro took glasses off and i was like wow new youtuber nice

[@sanTakagi-gv4dy]

Explain very clear, thanks.

[@saitejagatadi9711]

Sonny, Could you please make a video on time management and how to avoid distractions. You are so great and master in time management.

[@andyb9990]

Sonny could you do a React Testing video?

[@thehomeschooldev6126]

Thank you. Very well taught.

[@mikaelmodig5131]

In the end of class era, you did not really use constructor and super. You just declared state as an object inside your class.

[@osvaldogalvez4776]

Thank you for the videos !

[@14Shlomid]

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?

[@mierLG]

Thank you so much for a very detailed explanation, I fully understand the difference between the two.

[@danuvian]

Great video. It was explained very well.

[@anonymousgerman2809]

great video man

[@soumyanilpodder8435]

Really good video! Very helpful...❣️

[@The-Dev-Ninja]

thank you!

[@rohandeysarkar8443]

Watched this channel grow from 5k to 100k. Way to go Sonny 🔥🔥

[@salilchandwadkar789]

Awesome 🔥🔥🔥

[@decathlonbo]

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.

[@JayroJunior]

Very good content, thanks!

[@trungphan2504]

Nice video bro, thanks you so much

[@jaygarricktheflash]

Wow! Been a bit since I watched your vids. Love the quality upgrades to the transitions and overall viewing experience. Job well done.

[@riteshkhodiyar184]

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 .

[@heratyian]

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.

[@JayC00]

One of the best Videos

[@darshanakv4946]

Best tutorial!

[@specy_]

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

[@SonnySangha]

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.

[@specy_]

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

[@decathlonbo]

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

[@eip408]

precise explanation🔥

[@sambitmohanty8308]

Doubt cleared Thank u

[@jealousy0890]

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!

[@binaprajapati7709]

love from india dude 13 yr old here 😍

[@rogerteku2877]

Use effect in functional component while cycle in class components

[@zafariqbal92]

Thank You!

[@luqmanhrizal]

Next project: VENMO Full Stack🔵!

[@jasonchen8566]

Sonny is the best!

[@naveenkumarkota2090]

understood thank you!!

[@rajeshwariy869]

Understand fully nice video make more video bro

[@mounasellami199]

Thank u about this gorgeous explanation Sonny, I have question! When we will be more deep in development we use Higher Order Component ?

[@byalfoster]

video start at 2:43

[@АлексейАлтаев-ш4о]

Good explanation, but I still don't know in which cases developer supposed to use class instead functional components (Maybe I've lost something)

[@kirakira160]

Sonny the best!💪💪💪

[@DevlogBill]

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!

[@Andres_cali]

Uuu and he doesn't answer

[@DevlogBill]

@@Andres_cali LOL I am pretty sure he got soooo many subscribers to attend too.

[@empty_dayofthetech]

What program do you use to draw on the screen while recording?

[@JC-rv2tq]

Love this

[@JustClickApprove92]

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

[@kaunghtethein3322]

that looks like so much work

[@JustClickApprove92]

@@kaunghtethein3322 yeah, it’s not fun 😭

[@Saradomin65]

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.

[@b33m0s77]

I learned something new. Nice eyebrows

[@SonnySangha]

😉

[@riz4691]

Functional component is fun to use.

[@Victor-wh9bs]

Good Work #PAPAFAM

[@VinayKumar-1701-i7b]

nice video sangha

[@shinigami2669]

I love to use functional components.

[@harisamjad-pro]

Thanks bhai!

[@jasonruff1270]

functional components are simply superior 😈😈

[@meer-cha4985]

What an absolute legend

[@aryan7069_]

Great video

[@frankhenry10x]

Sonny is ZTFSH still live/ open for Dec?

[@isurujn]

Hello, what's the tool you use to draw on screen btw? Looks cool.

[@eriknilsson4994]

I think I found the program he's using. It's called ScreenBrush

[@sergeydiachenko1429]

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.

[@なんでやねん-s8g]

Both are better because you didn’t use open mouth photo for the thumbnail.

[@ikamy]

That was helpful

[@arthurweasley5857]

its almost 2022, why would you still use class components? well sometimes you need to but thats just an expection

[@faikyesilyaprak8761]

Clean and pure information. Quite rare in 2021. Thanks for the great effort. Keep it up!!

[@zongyu100]

Hey guys anyone knows which brand is his headset? it looks really nice

[@SonnySangha]

Audiotechnika!

[@yuno3364]

lol i was just wondering if someone would make a video about this. thanks

[@aribiali3574]

you are my guy