React Custom Hooks

Study Case – reaction for `window` size change.

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:

• where to store current values of width and height,
• how to start listening to those values changes,
• how and when to stop listening to ones.

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: useState and 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 useWindowSize!

​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:

• https://usehooks.com/ – simple custom hooks with the code shown, good for learning purposes
• https://github.com/streamich/react-use – repository with “essential React hooks” as it calls itself
• https://github.com/rehooks/awesome-react-hooks – repository with resources on React hooks

Summary

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!