Custom react hooks can be complicated when you plan some headless frontend development, but most cases are simple pieces of code that make your life easier.
When I first heard of React hooks, I was in the middle of another successful frontend project. Seeing that new API proposal then, back in December 2018, was for me like seeing the woman in red for Neo in The Matrix. Or maybe like having a cold beer after a long week.
I considered hooks the real game-changer. Now, after eight months since their publication, with all responsibility, I can write, that I was absolutely right! You can quickly learn how to use built-in hooks from the docs. In this article, I would like to show you how (and why) you should build your hooks.
Let’s consider this simple example: we want to handle window size updates in ReactJS. There are multiple ways of doing that, starting from standard, class component through HOCs up to using hooks.
In class component, there are few steps we need to take into consideration:
The easiest way to achieve a reaction for
window size change is to store values of width and height in the component state, add an event listener in
componendDidMount method, and clean up in
componentWillUnmount method. Here is a sample code:
To write a similar component using React hooks, we will have to use these main, built-in hooks:
useEffect. The later returns a
cleanup method, which can be fairly useful. Sample code will look like this:
As you can see, we keep all the original functionality using less code. Impressive, isn’t it?
But what if we need to react to windows size update in multiple components? Should we write HOC to do that? Well, we can, of course, but we don’t have to! In a rather simple example of reusing logic, we have found a perfect place for writing own ReactJS hook. Let’s call it
What happened here? Did we just move most of the functional component
WindowSize logic inside another function? I will not fool you, that’s exactly what we have done. But in this version, we can share this logic and reuse it anywhere we want!
From now on, we can use our custom hook in multiple components across our application.
From the case study above we can comfortably infer, that custom hooks can be written to reuse some logic between components. There are thousands of ready-made hooks that you can use in your applications and thousands more that you can think of.
One more example for you! Consider using
immer library for managing state inside components. We can replace
useState hook with our custom
useImmerState hook just to allow using mutating operations on the state!
You can find many great hooks in multiple sources:
I hope we can agree that React hooks are great. But the real fun begins when you start writing your ones! Custom react hooks can be vast and complicated, especially when you are planning to do some headless frontend development. On the other hand, most cases are simple pieces of code that can make your life easier, components cleaner and… And that’s all folks!