¿Cuál es el segundo argumento que se puede pasar opcionalmente a setState y cuál es su propósito?

El segundo argumento que se puede pasar opcionalmente a setState es una función de devolución de llamada que se llama inmediatamente después de que se completa setState y los componentes se vuelven a representar. 

Si desea que su programa actualice el valor de un estado usando setState y luego realice ciertas acciones en el valor actualizado del estado, debe especificar esas acciones en una función que debería ser el segundo argumento de setState. Si no lo hiciéramos, esas acciones se realizarán en el valor anterior de estado debido a la naturaleza asíncrona de setState.

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app setState_example

Paso 2: después de crear la carpeta de su proyecto, es decir, setState_example, acceda a ella con el siguiente comando:

cd setState_example

Estructura del proyecto: Tendrá el siguiente aspecto.

App.js : ahora escriba el siguiente código en el archivo App.js.

1. Sin pasar el segundo argumento a setState:

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;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Producción

Explicación: al cambiar el valor del campo de entrada de «GFG» a «GeeskForGeeks», la ventana de la consola primero imprime el valor anterior al valor actual del campo de entrada. Pero el valor actual no es igual al valor que hemos escrito en el campo de entrada (es decir, GeeksForGeeks), esto sucede porque no hemos declarado la función console.log («Nombre actual: «+this.state.name) dentro de setState debido a qué función de console.log se llama en el valor anterior del campo de entrada. Muestra la naturaleza asíncrona de setState. 

2. Pasar un segundo parámetro a setState. 

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;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

producción

Explicación: al cambiar el valor del campo de entrada de «GFG» a «GeeskForGeeks», la ventana de la consola primero imprime el valor anterior al valor actual del campo de entrada. El valor actual coincide con el valor dentro del campo de entrada. Esto sucede porque hemos declarado la función console.log(“Nombre actual: “+this.state.name) dentro de setState debido a que la función console.log obtiene el valor actualizado del campo de entrada.