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.
