I have been using React for nearly two years now, and personally I am a big fan. It is easy to start with, we can reuse components and we have the freedom to choose other tools and packages to work with. While using React, I have often found myself in a situation to realize that I will need to manage state of my functional components, or use any life-cycle method, and that I will need to transform the component into a class component. Or to be required to apply the same logic when the component is mounted and for every update after that, so I end up with duplicated code into two life-cycle methods.
Apparently, I wasn’t the only one since those were some of the issues that the React team was trying to solve and finally, in late 2018, we were introduced to the latest feature everyone’s talking about – React Hooks. And that has opened a whole new perspective to React thinking.
So what are Hooks anyway? In a nutshell, Hooks are regular JavaScript functions that allow us to use only functional components. There are few built-in hooks that we can use inside our functional component to manage its state or to achieve the same behavior as we did with lifecycle methods. We are not limited to use only the built-in hooks, we can build our own hooks! We can even combine built-in hooks with our custom hooks, since they are regular JavaScript functions. With Hooks we can share stateful logic between components a lot easier, without using render-props or higher order components. Using hooks allows us to reuse logic without changing the hierarchy of our components; of course, reuse is possible without hooks, but it is much more complex and requires major code changes.
One thing we should remember if we want the magic of Hooks in our app, is that we have to follow certain rules in order to use them. First, we should call hooks from the top level of our React function, and second, call hooks from React functional components or from our own custom hooks. So we should not call hooks from conditions or any other functions. The purpose of these rules is to assure React that the Hooks are called in the same order each time a component renders, and that helps React to preserve the state and update it correctly. If remembering rules is not your strength, don’t feel stressed out- there is a linter plugin available that helps enforce these rules.
It is important to note that the concept of classes will not be rejected and React will continue to support them in the future. Hooks can work in parallel with classes and therefore can be introduced on existing projects gradually and without making huge refactoring at once.
If you are already impatient to jump into hooks, go ahead and try it out! Don’t feel intimidated if you run into obstacles at the beginning; hooks can be a bit confusing in the beginning, at least they were for me. Dan Abramov made a good point on the React Conference 2018 when he introduced Hooks: it takes some time to start thinking in Hooks. But I’m sure once we start doing it, we can take different approaches to solve our problems, and hopefully take advantage of this feature and improve our knowledge – it can only take us step forward in the journey to becoming better developers.
