When I first started working with React, I mostly used function components, especially because I read that class components were old and outdated. ...
For further actions, you may consider blocking this person and/or reporting abuse
The issue with class based components and the driving reason why the React team went towards functional components was for better abstractions. In 2013 when React came out, there was a feature called mixins (this is before JavaScript classes were possible). Mixins were a way to share code between components but fostered a lot of problems and anti-patterns. In 2015 JS got classes and 2016 React moved towards real class-based components. Everyone was excited that mixins were gone but we also lost a primitive way to share code in React. Without React offering a way to share code, the community turned towards patterns instead.
With classes, if you want to share reusable code between two components, you only really have two pattern choices - higher order components (HoC's) or the "render props" pattern. HoC has several known problems. In other words, I could give you a "try to abstract this" task with classes and you just wouldn't be able to do it with HoC, it had pretty bad limitations. The render props patter was popularized later and it actually fixed all four known issues with HoC's, so a lot of react devs became a fan of this new pattern, but it had new new problems that HoC's never had. I wrote a detailed piece on this a while back gist.github.com/bradwestfall/4fa68...
The reason why hooks were created was to bring functional components up to speed with class based components as far as capability (as you mentioned above) but the end goal of that was custom hooks. With a custom hook we get functional composition capabilities and this solves all six issues of Hoc and Render Props problems, although there are still some good reasons to use render props in certain situations (checkout Formik). If you want, checkout Ryan's keynote at the conference where they announced hooks youtube.com/watch?v=wXLf18DsV-I
Also, the reason why classes are still around is just because the React team knew it would be a while for companies to migrate their big code bases from classes to hooks so they kept both ways around.
Hope it helps someone
Wow, thanks so much @bradwestfall ! This is a very interesting back-story on classes and function components. I really appreciate the time you took to explain all of this.
No problem, your article does a nice job comparing strictly from a syntax standpoint, there's just the whole code abstraction part to consider. Honestly, after teaching hooks now for 3 years, I know that hooks syntax can be harder to grasp than the class syntax, but I also know that most developers are willing to take on the more difficult hooks syntax for the tradeoff of having much better abstraction options, that's really the main idea. For real though, checkout Ryan's conference talk, it's fantastic
This is a hot topic bro, nice done, otherwise i guess that functional components are cleaner and easy to maintain, so whatever the size of your app, we always look for better and maintainable code, so FC are better than classes any way (React point of view only)
the only thing I like Class Component is that there is a
callback in setState. I usually use it when after set loading for the page :)The equivalent in functional components is the useEffect hook, which can be setup to run a function when one or more specific dependencies change.
There is also a hook called useReducer which gives you the ability to perform complex actions and logic when dependencies change. Very useful for deriving properties from complex state.
Spot on!
Some people told, the argument to use class components - error boundaries, which don't have function implementation yet. (It's not my opinion, I just recently started to learn react and seeking for useful information here and there)
I am new dev in react. I am learning class component. Is that okay for me?
When I started learning React, I saw function components first, and then class components. But I think a better approach will be learning class components first, so then, when you learn function components, you will see why they exists and the advantages they have over the class components.
Totally agree with you
We need to learn first Class component and then Functional Component
Yes, I think you are right.
You'll need to learn both anyways, it is quite frequent to find projects that mix the two methodologies.
Thank you Jeysson, I think it will help me lot in my react learning
Nice comparison I have completely converted to functional components it would be hard to go back to classes now. When I initially started to learn hooks my thoughts were the reverse.
It really is that much better though.
I now have the dilemma of choosing between class or function components at my workplace... I guess that as I gain more experience I will be able to make better decisions.
That is awesome @lukeshiru ! Thanks for sharing your experience. I think that what is actually happening is that the app in which I'm working on is rather old, and function components did not exist back then.
Taking into account your experience, do you think that using class components have any benefit over the function components?
In class components, the render method will be called, whenever the state of the components changes. On the other hand, the Functional components render the UI based on the props. Class Components should be preferred whenever we have the requirement with the state of the component. best regards upflixapk.com/
First of all, the clear difference is the syntax. Just like in their names, a functional component is just a plain JavaScript function that returns JSX. A class component is a JavaScript class that extends React. Component which has a render method.
Have you not heard of the React hooks model? React apps haven't needed classes for stateful components since mid 2017.
It would bea major mistake to spend time implementing class components into your code. You don't need to remove all your class components, but you should start boyscouting their removal. The React team and the community have both chosen hooks as the defacto pattern system going forward. If you lean against the community, your going to have problems integrating libraries and tools. Not to mention that you're going to run into friction with any new hires, regardless of their experience.
Great, thanks for your input!
I was under the impression the official stance was that class components were deprecated...as in dont create new code using these.
We recently had to ditch a form library that was written with classes. The reason being is because it did not have useEffects that reacted to all changes in state (and I'm not sure if you could write the equivalent useEffect with hooks).
So we were seeing bugs where dynamically injected fields could not register themselves.
React hooks are OK but i wouldn't go back to a class based approach for new code
Thank you very much for this, your article and the discussion that follows were a great help to clarify the subject! I will definitely go with FC but take some time to be more comfortable with the class-based approach in case of need.
I have a very little observation to make regarding the way you explained useState affectation "to an array" under "State" in FC section. You wrote: "We need to define an array that will have two main elements[...] We then need to assign the useState hook to that array. [...]"
When I see brackets, as a beginner, it automatically triggers the "array" reflex, but brackets on the left side of the assignment operator means destructuring assignment, here array destructuring.
As I understand this, we don't assign the useState hook to an array, it's the other way around actually, we are unpacking or extracting values from an array and assigning them to variables. useState return an array of 2 values and DA allows us to avoid this kind of extra lines:
reactjs.org/docs/hooks-state.html#...
for a more complete review of this syntax:
javascript.info/destructuring-assi...
I found DA very useful in many situations for arrays, strings and objects. Totally worth mentioning, learning and using!
Again thank you!
Cheers!
Less and clear code for the same result with functions and somehow closer to JS, in my opinion .
Read somewhere that functional components are faster .
Interesting take.
Created an account just to say how much I appreciate this post. Thank you!!
Thank you so much @francobb ! I really appreciate it.
True, but it'd be really cool if we didn't have to add an extra dependency just for error boundaries.
Are you aware of any performance impact when using class components instead of function components?
Since classes in js are just syntactic sugar over constructor functions, it's very doubtful conclusion.
Its my first day learning react and I can't smiling while reading this article. I don't know if I am just happy or its the article, but whichever it is, thanks for this Damian Demasi.