Study Case – reaction for `window` size change.

Summary

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.

Introduction

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.

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.

color-orb
color-orb

Custom hooks ideas and examples

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:

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!

color-orb
color-orb

Have a project in mind?

Let’s meet - book a free consultation and we’ll get back to you within 24 hrs.

Other worthy reads