If you use React you may have heard a growing consensus that using functional react for everything component is now “best practices” for React development. In my opinion best practices is a buzz phrase that people throw out there a lot that to seem like it means a whole lot but really means nothing at all. If you or someone else is writing a piece of code and their reason for writing it a certain way is “because it’s a best practice” that’s a horrible answer, to me the idea of best practices is just conscious of why your coding a certain way and if you think that way is the most efficient way to write it. Nothing should be as broad of a statement as “it’s a best practice now to do it this way” that’s taking all thinking of how to design your code out of the process and just doing it one because someone said so. Now that I have that tangent about “best practices” out of the way in regard to functional react let’s talk about the differences between functional and class component react.
Readability
Functional React a very obvious difference is syntax, functional React is just plain JavaScript which might be slightly easier to write and understand. I think the readability factor is a little overrated in this comparison, I have never thought that class component based React was particularly unreadable and I personally actually find some of the functional React’s advanced methods (life cycle methods compared to hooks and so on) a little less readable than there class based counter parts but maybe that’s just because a lot of them are a little newer and I am not used to them yet. Overall functional React has much cleaner look especially for basic components, with no render function, or life cycle and state functions, although hooks have changed that a little.
Efficiency
Functional React runs away with this one, without having to use the render function like class based React, and class based React can have a lot of redundant renders. This is not to say that class Based React can’t be efficient you just have to be conscious of what might cause a re-render and if that was necessary re-render. Using life cycle methods like shouldComponentUpdate with componentWillUpdate or React pure component can be helpful. Functional components are much more lightweight and just take a lot less overhead compared to all the features and overhead of class based React.
When to Use One or the Other
With hooks it seems like you can basically do whatever class-based components can do but quicker and more readable. Well this might be true for many aspects there are still many uses for class-based components, and it doesn’t seem like the React team is going to phase out class-based components anytime soon. For example advanced features such as hooks for functional components can have varying of less than perfect side affects like useEffect basically the functional version of ComponentDidMount (but definitely different a few important ways) especially when using async/await as effect callback function cannot be async. There are many small examples like these and overall if you have a complex component it might be best to write it as class-component or to not port it over to a functional component because it is “best practices”. There will always be new features being added and this amateur React developer’s blog will more than likely be obsolete, so it is always best to do your own research and figure out what mix of components for your project will work best.
Sources:
- https://medium.com/@Zwenza/functional-vs-class-components-in-react-231e3fbd7108#:~:text=But%20there%20are%20some%20benefits,you%20to%20use%20best%20practices.
- https://reacttraining.com/blog/useEffect-is-not-the-new-componentDidMount/#:~:text=They’re%20almost%20the%20same,network%20call%20or%20a%20subscription.
- https://blog.bitsrc.io/improve-performance-in-react-functional-components-using-react-memo-b2e80c11e15a
- https://blog.bitsrc.io/will-react-classes-get-deprecated-because-of-hooks-bb62938ac1f5
- https://medium.com/@stojanpeshov/react-hooks-component-will-mount-2c21ba2778a1#:~:text=You%20can%20only%20use%20Hooks,in%20a%20class%20components.
I Feel All Sorts of Ways About Programming 