Open In App

What is the second argument that can optionally be passed to setState and what is its purpose ?

Improve
Improve
Like Article
Like
Save
Share
Report

The second argument that can optionally be passed to setState is a callback function which gets called immediately after the setState is completed and the components get re-rendered. 

If you want your program to update the value of a state using setState and then perform certain actions on the updated value of the state then you must specify those actions in a function which should be the second argument of the setState. If we do not do so then those actions will be performed on the previous value of state because of the asynchronous nature of setState.

Prerequisites

Steps to create the React Application:

Step 1: Create a React application using the following command:

npx create-react-app setState_example

Step 2: After creating your project folder i.e. setState_example , move to it using the following command:

cd setState_example

Project Structure:

Example 1: This example calls setState without the second argument, so the component does not get updated.

Javascript




// Filename - App.js
 
import React, { Component } from "react";
 
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "GFG",
        };
    }
 
    updateName = (value) => {
        console.log("Previous name: " + this.state.name);
        this.setState({ name: value });
        console.log("Current name: " + this.state.name);
    };
 
    render() {
        const { name } = this.state;
        return (
            <div>
                <p>Welcome To GFG</p>
 
                <input
                    type="text"
                    value={name}
                    onChange={(e) =>
                        this.updateName(e.target.value)
                    }
                />
            </div>
        );
    }
}
 
export default App;


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Output

Example 2: This example calls The callback function immediately after the value in the state is updated and hence the new value is displayed.

Javascript




// Filename - App.js
 
import React, { Component } from "react";
 
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "GFG",
        };
    }
 
    updateName = (value) => {
        console.log("Previous name: " + this.state.name);
        this.setState({ name: value }, () => {
            // Passing it as a second parameter to setState
            console.log("Current name: " + this.state.name);
        });
    };
 
    render() {
        const { name } = this.state;
        return (
            <div>
                <p>Welcome To GFG</p>
 
                <input
                    type="text"
                    value={name}
                    onChange={(e) =>
                        this.updateName(e.target.value)
                    }
                />
            </div>
        );
    }
}
 
export default App;


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

output



Last Updated : 02 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads