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

May 12, 2021 - Bali Dani, Gábor Paholics

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.

Pardon the interruption, we have an important message!

We are looking to expand our team with talented developers. Check out our open positions and apply.

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 🙂