React PrevProps & PrevState in Functional Based Components

Hi folks, React has been developing and becoming more powerful day by day. There was a time were React projects were being built on class based components but now we have functional based components which are faster than class based components.

Before we see how to use prevProps & prevState in functional based components?
let us first look into what exactly prevProps & prevState are?

As the name implies prevProps & prevState is the previous value of your props or state variable. For example you have a prop variable called fullName and a state variable called email

so initially your variables has the value shown as below

{
fullName:“Ronaldo”
email:“ronaldo@portugal.com”

}

now you change value of your variables to

{
fullName:“Messi”
email:“messi@argentina.com”

}

So Messi becomes your current value and Ronaldo becomes the previous value same applies for email.

You can say that the value that was assigned just before the current value is the previous value.

This prevProps & prevState feature was easily accessible in class based components of react where you can declare a componentDidUpdate lifecycle method which gives you two parameters prevProps & prevState

componentDidUpdate(prevProps, prevState) {
if (prevState.data !== this.state.data) {
// Now fetch the new data here.
}
}

Now when you use functional based components we cannot use this lifecycle method we have to use hooks inside our functional based components and there to achieve componentDidUpdate we have a hook called useEffect() which is equavalent to componentDidUpdate lifecycle method but you don’t have prevProps & prevState values in useEffect() so let’s see how can we achieve that.

How to use/get prevProps & prevState in functional based components?

To get the prevProps & prevState we need to make use of the useRef() & useEffect() hook.

We need to create a function called GetPreviousValue or whatever name you like and with the help of useRef() hook we can return the previous value of a prop/state.

const [fullName, setFullName] = useState('Ronaldo')

So the GetPreviousValue function will take a value parameter which is nothing but the prop/state for which you need the previous value. In this function we have declared a useRef() constant & useEffect() react hook where the usage of ref is to send the previous value back and update the current value this whole process is happening inside the useEffect() declared in the function where the ref is set to the currentValue and this useEffect() will be triggered after the return statement so this way first the prevValue will be returned and the the currentValue will get updated.

Now you need to declare a variable and call the function you created to fetch the previous value this way you will have the currentValue in the fullName & prevValue in the prevFullNameValue variable.

Finally, this is how we can make get the prevProps & prevState values in the functional based components of react. I hope you find this helpful.

React - Node - Developer - Freelancer - Blogger. Eat. Sleep. Code. Repeat.