Comportamiento asíncrono del método setState en React

La creación de aplicaciones dinámicas es imposible, o al menos muy difícil, sin mantener un estado. Afortunadamente, cada componente de la biblioteca React puede tener su propio estado interno.

Los desarrolladores de React sin experiencia a menudo no entienden el intrincado comportamiento de los objetos de estado en React. En este artículo, queremos aclarar algunas de las confusiones.

Comportamiento asíncrono del método setState() en React

Muchos desarrolladores de React no saben que el método setState() es asíncrono. Si su aplicación tiene varias llamadas al método setState(), se agruparán por lotes para mejorar el rendimiento y la velocidad de la aplicación.

El equipo de React hizo que el método setState() fuera asíncrono porque cambiar el estado puede ser un desencadenante para volver a renderizar la aplicación. Esto puede generar errores y falta de respuesta si un componente tiene varias llamadas separadas al método setState().

Pase la función de devolución de llamada como argumento al método setState()

En React, el método setState() se usa para actualizar el objeto de estado. Muchos desarrolladores de React no saben que puede aceptar más de un argumento.

El primer argumento es siempre el objeto que queremos que sea en el nuevo estado. Sin embargo, el segundo argumento puede ser la función de devolución de llamada ejecutada justo después de que se actualice el estado.

Veamos un ejemplo:

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { color: "black" };
  }
  render() {
    return (
      <button
        onClick={() =>
          this.setState({ color: "red" }, () => {
            console.log("callback called");
          })
        }
      >
        Update the color
      </button>
    );
  }
}

El valor del controlador de eventos onClick es una llamada a este método. En este caso, el primer argumento es un objeto que reemplazará el estado existente.

En el segundo argumento, la función de devolución de llamada se ejecutará justo después de actualizar el estado.

Puede ir a esta demostración en vivo de CodeSandbox. Si abre la consola, verá que al hacer clic en el botón se genera una cadena “’llamada de devolución de llamada’” a la consola.

Esta función es útil si desea realizar una acción específica justo después de actualizar el estado. Técnicamente, puede encadenar varias llamadas al método setState() para actualizar varias propiedades del estado del objeto a la vez; sin embargo, hay mejores maneras de hacerlo.

Además, si desea asegurarse de que una propiedad de estado se actualice después de otra, puede hacer lo siguiente:

this.setState({color: 'red'}, () => setState{color: 'red', active: true})

En este caso, React primero reemplazará el objeto de estado actual con el objeto que es el primer argumento ({color: "red"}). Una vez que se complete esta operación, ejecutará la función de devolución de llamada, agregando una propiedad más al estado.

Actualice varias propiedades de estado a la vez

Si necesita actualizar varias propiedades de estado a la vez, puede hacerlo en una llamada al método setState().

Del ejemplo anterior, es más fácil actualizar el valor de la propiedad de estado color y agregar la propiedad de estado activo en una llamada setState():

this.setState({color: 'red', active: true})