Por qué varios setCount(count + 1) no acumulan

El estado que lees es una instantánea del render actual. Pedir un cambio no modifica esa instantánea. Además, React agrupa actualizaciones para procesarlas juntas cuando termina el manejador.

El problema #

Si count vale 0, este código solicita tres veces el mismo valor:

1setCount(count + 1); // Solicita 1.
2setCount(count + 1); // También solicita 1.
3setCount(count + 1); // También solicita 1.

Las tres expresiones leen el mismo count. El resultado es 1, no 3. Con solo dos llamadas, el resultado también sería 1, no 2.

La solución: una función actualizadora #

1import { useState } from 'react';
2
3interface Props {
4  initialValue?: number;
5}
6
7function Counter({ initialValue = 0 }: Props) {
8  const [count, setCount] = useState(initialValue);
9
10  function handleClick() {
11    setCount((prev) => prev + 1);
12    setCount((prev) => prev + 1);
13    setCount((prev) => prev + 1);
14  }
15
16  return <button onClick={handleClick}>{count}</button>;
17}
18
19export default function Ejem_12() {
20  return <Counter />;
21}

Ahora pasamos instrucciones de actualización. React entrega a cada función el estado pendiente tras la actualización anterior:

prev es un nombre de parámetro; podrías llamarlo anterior. No significa que React cambie la variable count del manejador.

Cuándo utilizar cada forma #

Si el nuevo valor depende del anterior, la forma funcional expresa esa relación: setCount((prev) => prev + 1). Si quieres fijar un valor concreto, usa setCount(0).

Las funciones actualizadoras deben ser puras: reciben un valor y devuelven el siguiente. No envíes peticiones ni modifiques objetos externos dentro de ellas, ya que React puede repetirlas en desarrollo para comprobar su pureza.

Prueba tú #

Empieza en 10. Tres asignaciones setCount(count + 1) deben terminar en 11; tres actualizadores funcionales deben terminar en 13. Comprueba ambos casos.

Puedes ampliar la explicación en la documentación oficial sobre la cola de actualizaciones.

Cuestionario del tema #

Abre el cuestionario en las actividades de este tema para comprobar lo aprendido. Cada respuesta incluye una explicación.