While many people still use class-based components in React, and they may have their own reasons as to doing so, let me tell you why you should be using functional components in your projects from here on out.
Functional components look good. They make the code look crisp, concise, and easy to read. It avoids unwanted verbiage and subconsciously pleases the viewer. Surely this is good enough of a reason, no?
One key point with respect to aesthetics is the
this keyword, or, the lack thereof. In functions, we won’t be using
this and this also avoids the confusion of where/when to use it and not.
Occam’s Razor states that the simplest solution is more likely to be correct. This applies to functional components as well. Since there is very little code that needs to be written, the performance is also definitively improved.
The react team has stated that they would be focusing full support for functional component architecture in future releases. So in the future, who knows, Class-based components might be a thing of the past.
Using props is as simple as passing an argument to the functional component. Generally, we use the keyword
props but you can name it anything you like.
You can even destructure the arguments to get exactly the attribute you need for your component.
Hooks are inbuilt functions that we can make use of to replicate the effect of lifecycle methods found in Class-based components.
useState and useEffect are the most important ones and they get the job done effortlessly.
Sometimes, with the use of hooks, the number of lines needed is reduced by more than half.
Hooks allow the seamless integration with different state management libraries such as Redux, Context API etc.
Testing and Debugging
With functional components, it is very clear what the input and the output of the function are, and hence the tracing is comparatively easier. And hence testing and debugging is much easier.
Functions do not deal with the unnecessary hassles of binding and we can separate the different parts of the project into different functional components to maintain user-friendliness.
Why you should not abstain from class-based components
With all the above mentioned compelling points, I do not encourage you to shun the usage of class-based components in your codebase. In fact, I encourage you to bring a healthy mix of both.
There is absolutely nothing wrong with using class-based components, coming from an Object-Oriented upbringing, I have used
class all my life and it comes to me naturally.
A general rule of thumb is to make any new component as a functional component and if/when you need to use a certain lifecycle method or any other functionality that you otherwise cannot using functional components, go with a class-based component.
React is exploding in popularity and is being used by an ever-growing number of people, and rightfully so, mostly due to its plethora of versatile functionalities. Make use of all the features React has to offer, as long as the support for it lasts.
In the end, we are making better products for the people we serve, aren’t we?
My personal blog: Blog
Mailing List: Substack