Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

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

  • Difficulty Level : Expert
  • Last Updated : 15 Aug, 2021

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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 “GeeskForGeeks” 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 “GeeskForGeeks” 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
Recommended Articles
Page :