El estado es una foto fija: updates funcionales

Teoría20 min20 XP

Una sutileza que confunde a TODO principiante de React: dentro de un render, el estado es una FOTO FIJA —no cambia aunque llames a set varias veces—. Por eso setCuenta(cuenta + 1) tres veces seguidas suma solo 1, no 3. Entender esto y su solución (las actualizaciones funcionales) te ahorra una clase entera de bugs sutiles.

La foto del momento

El problema: tres sumas, un resultado

Míralo en vivo. El botón de la izquierda llama setCuenta(cuenta + 1) tres veces… y suma solo 1:

El botón "mal" suma 1 porque las tres llamadas usan cuenta —la foto de este render, digamos 0— y todas calculan 0 + 1 = 1. React no actualiza cuenta a mitad del manejador; el nuevo valor solo aparece en el siguiente render. El botón "bien" suma 3 porque usa la forma FUNCIONAL.

La solución: la forma funcional

set(prev => nuevo): pídele a React el valor más reciente

La función set acepta dos formas:

setCuenta(cuenta + 1) — le das un valor calculado a partir de la FOTO actual. Bien cuando calculas una vez a partir del render actual.
setCuenta(prev => prev + 1) — le das una FUNCIÓN, y React te pasa el valor más reciente en prev. Bien cuando el nuevo valor depende del anterior, sobre todo si actualizas varias veces seguidas o de forma asíncrona.

La regla práctica: si el nuevo estado depende del anterior, usa la forma funcional (prev => ...). Es la versión a prueba de balas: siempre parte del valor real más reciente, no de la foto. Para un contador, un toggle, agregar a una lista basada en la lista actual —usa prev. Cuesta lo mismo escribir y evita el bug de "mi estado se quedó atrás".

Por qué React funciona así: el batching

Este comportamiento no es un capricho —es una optimización llamada batching. React AGRUPA varias actualizaciones de estado que ocurren en el mismo evento y hace UN solo re-render con el resultado final, en vez de repintar tres veces. Por eso el estado se mantiene como una foto estable durante el manejador: React está juntando tus cambios para aplicarlos de una vez. La forma funcional (prev) es cómo le dices "encadena estas actualizaciones", y él las aplica en orden sobre el valor más reciente. El resultado: una UI rápida (menos renders) y actualizaciones predecibles cuando usas prev.

En un manejador escribes setCuenta(cuenta + 1) dos veces seguidas, con cuenta valiendo 5. ¿Cuál es el resultado y cómo sumar 2 de verdad?

Mini-reto

Comprueba el snapshot: 1) crea un contador y un botón "+2" que llame setCuenta(cuenta + 1) dos veces —observa que suma 1—; 2) cámbialo a la forma funcional setCuenta(prev => prev + 1) dos veces y confirma que ahora suma 2; 3) haz un toggle (un booleano abierto) con setAbierto(prev => !prev) y siente por qué prev es la forma segura. Interioriza que el estado es una foto.

Qué sigue

Dominas el estado numérico. El caso más común en apps reales son los FORMULARIOS: inputs cuyo valor vive en el estado. La próxima lección enseña los inputs controlados —el patrón donde el estado es la única fuente de verdad de lo que el usuario escribe—, la base de todo formulario en React.