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
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.
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.
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 email@example.com 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.
Read moreSee all open source
Using Create React App for Generating Custom Boilerplates
Exploring Create React App templates and react-scripts to learn how to build your own boilerplate.
How Can Caching Improve your Health App?
Learn how to properly use cache strategies to improve your application quality.
How to Lazy Load your React Components
In React, lazy() is a function that lets you load components lazily through what is called code splitting without help from any external libraries.
Manage translations online with React
In an earlier article we shared that extracting messages is the best way for internationalization in React. But you shouldn’t stop there.
How to Indicate Content Overflow with React Scrollfade
Learn about a component that dynamically fades out the bottom of an HTML element based on the scrollbar's position.
Let bene : studio enhance
your digital product!