Encadenar una serie de actualizaciones de estado

Establecer una variable de estado encolará otro renderizado. Pero a veces es posible que desees realizar múltiples operaciones sobre el valor antes de encolar el siguiente renderizado. Para hacer esto, ayuda comprender cómo React agrupa las actualizaciones de estado.

React agrupa las actualizaciones de estado

Podrías esperar que al hacer clic en el botón “+3” el contador se incremente tres veces porque llama asetNumber(number + 1)tres veces:

Sin embargo, como podrías recordar de la sección anterior,los valores de estado de cada renderizado están fijos, por lo que el valor denumberdentro del controlador de eventos del primer renderizado siempre es0, sin importar cuántas veces llames asetNumber(1):

Pero hay otro factor en juego aquí.React espera hasta quetodoel código en los controladores de eventos se haya ejecutado antes de procesar tus actualizaciones de estado.Por eso el nuevo renderizado solo ocurredespuésde todas estas llamadas asetNumber().

Esto podría recordarte a un camarero tomando un pedido en un restaurante. ¡Un camarero no corre a la cocina al mencionar tu primer plato! En cambio, te deja terminar tu pedido, te permite hacer cambios en él e incluso toma pedidos de otras personas en la mesa.

Ilustrado porRachel Lee Nabors

Esto te permite actualizar múltiples variables de estado, incluso desde múltiples componentes, sin desencadenar demasiadosnuevos renderizados.Pero esto también significa que la interfaz de usuario no se actualizará hastadespuésde que tu controlador de eventos, y cualquier código en él, se complete. Este comportamiento, también conocido comoagrupamiento,hace que tu aplicación de React se ejecute mucho más rápido. También evita lidiar con renderizados "a medias" confusos donde solo algunas de las variables se han actualizado.

React no agrupa entremúltipleseventos intencionales como clics—cada clic se maneja por separado. Ten la seguridad de que React solo realiza agrupamiento cuando generalmente es seguro hacerlo. Esto garantiza que, por ejemplo, si el primer clic del botón desactiva un formulario, el segundo clic no lo enviaría nuevamente.

Actualizar el mismo estado varias veces antes del siguiente renderizado

Es un caso de uso poco común, pero si deseas actualizar la misma variable de estado varias veces antes del siguiente renderizado, en lugar de pasar elsiguiente valor de estadocomosetNumber(number + 1), puedes pasar unafunciónque calcule el siguiente estado basándose en el anterior en la cola, comosetNumber(n => n + 1). Es una forma de decirle a React que "haga algo con el valor de estado" en lugar de solo reemplazarlo.

Intenta incrementar el contador ahora:

Aquí,n => n + 1se llama unafunción de actualización.Cuando la pasas a un establecedor de estado:

1. React encola esta función para que se procese después de que se haya ejecutado todo el otro código en el controlador de eventos.
2. Durante el siguiente renderizado, React recorre la cola y te da el estado final actualizado.

Así es como React procesa estas líneas de código mientras ejecuta el controlador de eventos:

1. setNumber(n => n + 1):n => n + 1es una función. React la añade a una cola.
2. setNumber(n => n + 1):n => n + 1es una función. React la añade a una cola.
3. setNumber(n => n + 1):n => n + 1es una función. React la añade a una cola.

Cuando llamas auseStatedurante el siguiente renderizado, React recorre la cola. El estado anterior denumber era 0, así que eso es lo que React pasa a la primera función de actualización como argumenton. Luego, React toma el valor de retorno de tu función de actualización anterior y lo pasa a la siguiente actualización comon, y así sucesivamente:

React almacena3como resultado final y lo devuelve desdeuseState.

Por eso, al hacer clic en “+3” en el ejemplo anterior, el valor se incrementa correctamente en 3.

¿Qué sucede si actualizas el estado después de reemplazarlo?

¿Qué pasa con este controlador de eventos? ¿Cuál crees que será el valor denumberen el siguiente renderizado?

Esto es lo que este controlador de eventos le indica a React que haga:

1. setNumber(number + 5):numberes0, así quesetNumber(0 + 5). React añade“reemplazar con5”a su cola.
2. setNumber(n => n + 1):n => n + 1es una función de actualización. React añadeesa funcióna su cola.

Durante el siguiente renderizado, React recorre la cola de estado:

React almacena6como resultado final y lo devuelve desdeuseState.

¿Qué sucede si reemplazas el estado después de actualizarlo?

Probemos un ejemplo más. ¿Qué crees que seránumberen el siguiente renderizado?

Así es como React procesa estas líneas de código mientras ejecuta este controlador de eventos:

1. setNumber(number + 5):numberes0, así quesetNumber(0 + 5). React añade“reemplazar con5”a su cola.
2. setNumber(n => n + 1):n => n + 1es una función de actualización. React añadeesa funcióna su cola.
3. setNumber(42): React añade“reemplazar con42”a su cola.

Durante el siguiente renderizado, React recorre la cola de estado:

Luego React almacena42como resultado final y lo devuelve desdeuseState.

En resumen, así es como puedes pensar en lo que pasas al establecedor de estadosetNumber:

• Una función actualizadora(ej.n => n + 1) se añade a la cola.
• Cualquier otro valor(ej. el número5) añade “reemplazar con5” a la cola, ignorando lo que ya está en cola.

Después de que el controlador de eventos se complete, React activará un nuevo renderizado. Durante el nuevo renderizado, React procesará la cola. Las funciones actualizadoras se ejecutan durante el renderizado, por lo quelas funciones actualizadoras deben serpurasy solodevolverel resultado. No intentes establecer estado desde dentro de ellas ni ejecutar otros efectos secundarios. En Modo Estricto, React ejecutará cada función actualizadora dos veces (pero descartará el segundo resultado) para ayudarte a encontrar errores.

Convenciones de nomenclatura

Es común nombrar el argumento de la función actualizadora con las primeras letras de la variable de estado correspondiente:

Si prefieres un código más detallado, otra convención común es repetir el nombre completo de la variable de estado, comosetEnabled(enabled => !enabled), o usar un prefijo comosetEnabled(prevEnabled => !prevEnabled).

Recapitulación

• Establecer estado no cambia la variable en el renderizado existente, sino que solicita un nuevo renderizado.
• React procesa las actualizaciones de estado después de que los controladores de eventos hayan terminado de ejecutarse. Esto se llama agrupación.
• Para actualizar algún estado varias veces en un evento, puedes usar la función actualizadorasetNumber(n => n + 1).