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.
Join our workshops in 2022
Sign up and get notified about upcoming workshops. Build exciting apps and learn about technologies like React Native, JS, Flutter etc. from experienced engineers.
Join the community and invite your peers as well! For updates regarding the upcoming event, visit the workshop page:
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 micro-frontends architecture to build more scalable applications
Important points to know before moving from monolithic frontends to micro-frontends.
Static caching based on cloud services
Walkthrough of the most popular Content Delivery Networks: AWS CloudFront, Google Cloud CDN Azure CDN and Cloudfflare CDN.
React Native Workshop: Connect Native Modules to build an awesome Music Creator
Join our free, online React Native workshop on August 5.
Comparing Reactotron & React Native debugger
How can we efficiently get rid of bugs using the debugger applications for React Native?
Reducing the size of the final bundles is important, but can be tricky. Let's see how we do it.
Let bene : studio enhance
your digital product!