It’s simple to get started using React hooks in your functional components, but understanding them at a deeper level is very important to being able to use them correctly. Their apparent simplicity hides the fact that they can be hard to reason about. Despite these misgivings, I am a big fan of hooks. I have been adopting them for a few months and have enjoyed the simplicity and reusability they can bring to a React codebase.
React hooks can seem like magic at first. Of course, the perception of “magic” is inversely proportional to one’s level of understanding. Dan Abramov makes a good case for hooks actually being less magical than other solutions to the same problems.
Magic or not, if you’re going to adopt React hooks, make sure you get familiar with the pitfalls and caveats. Don’t be fooled by how simple they are on the surface, and spend some time looking under the hood.
If you need an intro to hooks, React’s official documentation is a great place to start: https://reactjs.org/docs/hooks-reference.html
To supplement React’s official rules for using hooks, here are four simple rules to follow when you’re starting to create your own custom hooks with useEffect():
Use them where it make sense
Instead of reaching for useEffect() in every situation right away, you should try to integrate them where it makes the most obvious sense first. That is, places where you have side-effects that need to happen when clearly defined pieces of data change.
Start small
Don’t extract your custom hooks into their own files right away just for the sake of keeping them separate. Including small useEffect() calls within your components wherever you need them will naturally reveal opportunities for reusable, extracted hooks. The rule that I use is to extract a custom hook whenever I find myself writing similar logic for the third time.
Forget about the component lifecycle
Hooks are meant to hide some of the concerns of React’s component lifecycle API from you, in order to make your application logic more clean and reusable. The component lifecycle can be a good metaphor to ease you into understanding hooks, but once you’re past that initial understanding phase you’ll be better off trying to approach hooks on their own merits.
Validate your assumptions
It’s never a wasted effort to write tests for your custom hooks, no matter how small they are. This is just a good development practice, but doubly important when your crucial business logic is going to depend on a fresh new framework API! A hook with subtle errors is the perfect place for unexpected problems to crop up later on, and if it is extracted into its own file and used all over the application, the potential for danger is multiplied. There are libraries out there to make testing hooks a breeze, like this one.
Those are some basic guidelines for making your own custom hooks. Don’t be hampered by the tone of caution, though — experimenting with hooks helps you get familiar with they way they work, and making mistakes is the best way to learn!
Happy coding!
