Skip to content
Related Articles

Related Articles

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

Improve Article
Save Article
  • Difficulty Level : Expert
  • Last Updated : 30 Nov, 2022
Improve Article
Save Article

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 state then you must specify those actions in a function which should be the second argument of the setState. If we would not do so then those actions will be performed on the previous value of state because of asynchronous nature of setState.

Creating 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: It will look like the following.

App.js: Now write down the following code in the App.js file.

1. Without passing second argument to setState:

Javascript




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

Explanation: On changing the value of the input field from “GFG” to “GeeksForGeeks” the console window first prints the previous value than the current value of the input field. But the current value is not equal to the value we have typed in the input field(i.e. GeeksForGeeks) this happens because we have not declared console.log(“Current name: “+this.state.name) function inside the setState due to which console.log function is getting called on the previous value of input field. It shows the asynchronous nature of setState. 

2. Passing a second parameter to setState. 

Javascript




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

Explanation: On changing the value of the input field from “GFG” to “GeeksForGeeks” the console window first prints the previous value than the current value of the input field. The current value matches with the value inside the input field this happens because we have declared console.log(“Current name: “+this.state.name) function inside setState due to which console.log function gets updated value of input field.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!