React Hooks: Is it better than Classes
Before Hooks, the concept of functions was simple. The core concepts of react like states and lifecycle hooks were limited to class components only. Functions, on the other hand, were simple, stateless components that inherited props and displayed them. Anything beyond that you would have to restructure the code and turn it into a class component.
Problems in Class Components
If you have used class components or have been learning to use class components in React, you might agree that they are very confusing and complex, especially when compared to hooks. The readability of the code decreases sharply with the increase of the bulk of code in a class component.
Using Lifecycle Methods is also always confusing. At first, there is componentDidMount(), which is fairly easy to understand. Then there comes componentDidUpdate(), shouldComponentUpdate(), getSnapshotBeforeUpdate() and more. I still don’t know some of the methods and often forget the names of the ones that I do know.
It is also hard to reuse stateful logic between components. Although react also offers “render props” and “higher-order components” as a solution, it requires you to restructure your components to use them.
And then there is method binding. You always forget those when creating a method in a class component. And remember it after you get the error, “cannot read property of null”, in the console.
If you have any of the above problems, then the solution for that problem might be …
Hooks
But what are Hooks?
The official documentation describes it as functions that let you to “hook” states and lifecycle properties of react in the functional component. It sounds like they just tried to put properties of class on a function component.
Yes, they did do that but also solved all the problems that you read earlier in the post.
With the introduction of Hooks, you can now manage state in a functional component. Not only that, you can do almost everything in the functional component that you can do in a class component.
The different types of lifecycle methods are replaced by a single method ( useEffect ). You can extract and reuse logic from one component to another without changing the hierarchy. There is also no “this” required in any of your code. You can handle states without worrying if you have binded “this” in the constructor or not.
And on top of that, you will have clean code.
Conclusion
So, are hooks better than classes?
Can it replace the class component?
If hooks can do everything better, why do we need class components?
Yes, hooks are better than class components and no, it will not replace class components any time soon. There are millions of lines of code that are written in class components. So unless React decides to discontinue or remove class components, there is no hurry to change all class components to functions. There might be times when you need class components more. Some npm packages might be tricky to use with hooks. But things are changing and more packages are supporting hooks these days.
So, if you are someone who is starting to learn react and is puzzled whether to learn hooks or not, I would suggest learning.
Or if you are someone who has a good understanding of class components and found nothing impressive about hooks, it’s completely fine. Hooks are just an alternative to class components.
Still, confused?
Here is a pro vs con table of using react:
╔═════════════════════════════╦════════════════════════════════╗
║ Pros ║ Cons ║
╠═════════════════════════════╬════════════════════════════════╣
║ 1. Simpler and lighter code ║ 1. Has certain restrictions ║
║ ║ ( cannot be called inside ║
║ ║ loops, conditions or nested ║ ║ ║ functions ) ║ ║ 2. No method binding ║ 2. Need some practice ║
║ ║ before using it properly ║
║ 3. Easy reusable components ║ ║
║ 4. Simpler Lifecycle Method ║ ║
║ (useEffect) ║ ║ ╚═════════════════════════════╩════════════════════════════════╝