How To Get Previous State In ReactJS Functional Component?

To get the previous state in ReactJS Functional Component we can use the previous value of the state while using the set state method. State can only be directly accessed in the class component so we will be using the react useState hook to accomplish the task.

Prerequisites

• React JS
• React JS functional components
• React useState Hook

Why Accessing the Previous State is Important in React?

In many real-world applications, accessing the previous state can be necessary to ensure proper behaviour or user experience. For example, you might want to:

• Implement animations based on state changes.
• Keep track of a user’s actions to enable undo or redo functionalities.
• Compare the current state with the previous state to determine if a specific condition is met.

React’s functional components do not have a direct way to access the previous state like class-based components do, but we can achieve this using hooks.

Steps To Get Previous State In ReactJS

Create A React Application using the following command.

npm create-react-app myreactapp
cd myreactapp

Project Structure

Example: This example demonstrate the use of setstate method form usestate to get the previoues state an display in another state variable.

// Filename - App.js

import React, { useState } from "react";

const App = () => {
    const [number, setNumber] = useState(0);
    const [previousValue, setPreviousValue] =
        useState(null);

    return (
        <div
            style={{
                textAlign: "center",
                alignItems: "center",
                margin: "auto",
            }}
        >
            <h1 style={{ color: "green" }}>
                GeeksforGeeks
            </h1>
            <h3>
                React Example to excess previous state in
                Funtional components
            </h3>
            <h4>number: {number}</h4>
            <h4>previous number: {previousValue}</h4>
            <button
                onClick={() =>
                    setNumber((previous) => {
                        setPreviousValue(previous);
                        return previous + 1;
                    })
                }
            >
                increment
            </button>
        </div>
    );
};

export default App;

To start the application run the following command.

npm start

Output: This output will be visible on the http://localhost:3000/ on the browser window.