useState: la memoria de un componente

Teoría22 min20 XP

Todo lo del módulo 1 era estático: la UI describía datos fijos. useState lo cambia todo. Es el hook que le da MEMORIA a un componente —un valor que persiste entre renders y que, al cambiar, hace que React vuelva a pintar—. Es el corazón reactivo de React: cambias el estado, la UI se actualiza sola. Hoy entiendes la pieza que hace vivas a las apps.

El marcador que recuerda y repinta

Declarar estado

useState devuelve una TUPLA (¿recuerdas las tuplas de TypeScript?): el valor actual y una función para cambiarlo. La desestructuras con nombres a tu elección:

const [cuenta, setCuenta] = useState(0) declara un estado que arranca en 0. cuenta es el valor actual (lo lees en el JSX); setCuenta es la función que lo cambia. Cuando haces clic y llamas setCuenta(cuenta + 1), pasan dos cosas: React guarda el nuevo valor Y vuelve a ejecutar el componente para pintar la UI con ese valor. Ese ciclo —cambiar estado → re-render— es el latido de React.

Por qué no una variable normal

Estado vs variable: la diferencia crucial

¿Por qué no basta con let cuenta = 0? Porque una variable normal no cumple las dos cosas que el estado sí:

No persiste: cada render vuelve a ejecutar la función del componente desde cero, así que let cuenta = 0 se reinicia a 0 en cada render. El estado, en cambio, React lo guarda entre renders.
No dispara re-render: aunque cambiaras la variable (cuenta++), React no se entera y la pantalla no se actualiza. Solo llamar a la función setX le AVISA a React que debe repintar.

Regla mental: usa useState para cualquier dato que (a) debe RECORDARSE entre renders y (b) al cambiar debe ACTUALIZAR la pantalla. Para valores temporales que no afectan la UI, una variable normal está bien. Pero todo lo que el usuario ve cambiar —un contador, un texto de input, una lista— es estado.

Nunca modifiques el estado directamente

Un error clásico: cambiar el valor del estado a mano en vez de usar la función set:

nunca-directo.tsx

const [cuenta, setCuenta] = useState(0);

// ❌ MAL: modificar la variable directamente
cuenta = cuenta + 1;   // no compila (cuenta es const) y aunque pudieras, React no se entera

// ✅ BIEN: usar la función 'set', que actualiza Y avisa a React de repintar
setCuenta(cuenta + 1);

Siempre usa la función set (setCuenta) para cambiar el estado. Es lo único que le AVISA a React que debe re-renderizar. Modificar el valor a mano (si pudieras) cambiaría el dato pero dejaría la pantalla congelada —el estado y la UI se desincronizarían, justo lo que React existe para evitar.

En un componente usas let total = 0 y al hacer clic haces total = total + 100. El número en pantalla nunca cambia. ¿Por qué, y cuál es la solución?

Mini-reto

Dale memoria a un componente: 1) crea un estado nombre (string) que arranque vacío y un botón que al pulsarlo lo ponga en "Sara"; 2) muestra "Hola, {nombre}" y "Aún no me conoces" si está vacío (ternario); 3) agrega un segundo estado clics (número) que cuente cuántas veces se pulsó el botón. Observa cómo cada setX repinta la UI al instante.

Qué sigue

Ya cambias el estado. Pero hay una sutileza que confunde a todos: dentro de un mismo manejador, el estado se comporta como una FOTO FIJA de ese render. La próxima lección explica por qué setCuenta(cuenta+1) tres veces seguidas suma solo 1, y cómo arreglarlo con las actualizaciones funcionales. La clave para no tener bugs sutiles de estado.