bene : studio is a global consultancy, helping startups, enterprises and HealthTech companies to have better product

Guide to Access Previous Props or State in React Hooks

react_hooks_final

At bene : studio we love knowledge sharing to help the community of professionals. With 10+ years and over 100 projects behind us, we have a vast amount of experience. This is why we have launched a knowledge base on our blog with regular updates of tutorials, best practices, and open source solutions.

These materials come from our internal workshops with our team of developers and engineers.

Our workshops are restarting!

Join the FREE React Native workshop on October 07, and learn Workshop details TBA

Join the workshop and invite your peers as well! For full details and registration visit the workshop page:

Introduction

In some cases, we need to know a previous value of a prop or state in React component. Think of a simple counter: to increase the counter value, we need to know the previous value. With class components, we can use the componentDidUpdate method which is called with oldProps and oldState as input. But what should we use in functional components? Usually, we can find an equivalent hook to the original lifecycle method, but unfortunately, we don’t have any equivalent to the componentDidUpdate method. 

Similar hook is the useEffect hook where the specified dependencies trigger the useEffect function if the values are changed – but we have no option to reach the previous value of the dependency.

The problem is discussed in detail in the React documentation.

Using a custom hook using useRef

The conclusion is that we need to use a custom hook which is using the useRef hook to store the previous value:

Let’s see how we can implement a simple counter with class components:

And in order to implement the same with the custom usePrevious hook above, the following solution can be used to do the same with hooks:

The custom usePrevious hook above is useful if we need to know the previous state and use it in the render, or to make a more complex calculation rather than knowing whether a value is changed or not.

The difference between a class Component’s componentDidUpdate and custom usePrevious hook is that for usePrevious we have to specify the values we are interested in, instead of receiving the whole props and state object as an argument.

Real-world example

In the following example we examine a saving state stored in Redux, and use a logical assumption based on the previous value of this saving state.

Here we have a redux settings state:

The saving boolean is initially false and changes to true during saving. The error is initially null, and will return a string if an error occurs.

In the useEffect after usePrevious, if we had no error and the saving boolean changed from true to false, then we have a successful saving, so changing success to true.

Using with Typescript

Usually we use typescript in our projects, so it would be nice if the usePrevious hook could maintain the type safety of the value which we are interested in.

Generics are the typescript feature that can be helpful here: with Generics we can work over a variety of types rather than a single one. We can rewrite our custom usePrevious function as follows:

Now we can use the previous value with type safety in our typescript projects. Happy coding 🙂

Related topics and packages:

Package on Github.

Documentation on ReactJS.org.

Did you like this? Join us!

Want to ask some questions? Share them with us via e-mail to partner@benestudio.co and we can set up a talk with our engineers.

Fancy working for the studio where you can work on international projects and write articles like this? Check out our open positions!

Looking for a partner for your next project? Check out our services page to see what we do and let’s set up a free consultation.

react_hooks_final

Let bene : studio enhance
your digital product!