¿El método setState() es asíncrono?

Si está utilizando ReactJs, definitivamente tiene algunos errores relacionados con el método asincrónico setState. En este artículo, aprenderemos por qué setState es asíncrono y le mostraremos algunos problemas relacionados y cómo corregir este error y hacer que su código funcione como espera.

Creación de la aplicación React:

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

npx create-react-app gfg

• Paso 2: después de crear la carpeta de su proyecto (es decir, gfg), muévase a ella usando el siguiente comando.

cd gfg

• Estructura del proyecto: Se verá así.

¿Por qué setState() es asíncrono?

ReactJs establece su estado de forma asíncrona porque puede resultar en una operación costosa. Si lo hace sincrónico, es posible que el navegador no responda. Las llamadas asincrónicas de setState se procesan por lotes para brindar una mejor experiencia de usuario y rendimiento.

Problema asincrónico con setState(): si está utilizando ReactJs, es probable que esté familiarizado con el método setState. Esta función se usa para actualizar el estado de un componente, pero es importante recordar que setState es asíncrono. Esto puede conducir a problemas complicados de depuración en su código.

Ejemplo 1: vamos a crear un campo de entrada dentro de nuestro archivo App.js. 

import React from 'react';
  
class App extends React.Component {
  constructor() {
    super();
  
    this.state = {
      value: '',
    };
  }
  
  render() {
    return (
      <div>
        <h2>GeeksforGeeks</h2>
        <form>
          <label>
            Input Field:-
            <input
              value={this.state.value}
              onChange={(e) => {
                console.log('Initial value:- ', this.state.value);
                this.setState({ value: e.target.value });
                console.log('Final value:- ', this.state.value);
              }}
            />
          </label>
        </form>
      </div>
    );
  }
}
  
export default App;

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto.

npm start

Salida: Aquí puede ver que el valor inicial y el valor final son iguales. 

Ejemplo 2: La buena noticia es que hay formas de evitar esto. Una opción es usar async/await o una construcción similar. Sin embargo, esto no funcionará con setState. Otra opción es agregar una función de devolución de llamada en setState. A continuación se muestra la implementación.

import React from 'react';
  
class App extends React.Component {
  constructor() {
    super();
  
    this.state = {
      value: '',
    };
  }
  
  render() {
    return (
      <div>
        <h2>GeeksforGeeks</h2>
        <form>
          <label>
            Input Field:-
            <input
              value={this.state.value}
              onChange={(e) => {
                console.log('Initial value:- ', this.state.value);
                this.setState({ value: e.target.value }, () => {
                  console.log('Final value:- ', this.state.value);
                });
              }}
            />
          </label>
        </form>
      </div>
    );
  }
}
  
export default App;

Ejecute la aplicación: use el siguiente código para ejecutar la aplicación

npm start

Producción: