Estado

Una variable común dentro de una función se olvida en el momento en que la función termina, así que no puede mantener un valor que cambia con el tiempo y se muestra en pantalla. Ese vacío es lo que estado llena: es cómo un componente recuerda algo entre renders. Mientras que props son datos que pasan desde afuera y que un componente nunca cambia, el estado es data que el componente posee y actualiza a sí mismo. El hook useState le da a un componente esa memoria, y te da una forma de actualizar el valor que también le indica a React que redibuque.

Acá está un contador:

import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

useState(0) establece el valor inicial y devuelve un par: el valor actual, count, y una función para cambiarlo, setCount. Los nombres son tuyos; la forma [value, setValue] es la convención. El onClick del botón ejecuta una función cada vez que se hace clic, que el capítulo Events cubre completamente después, así que por ahora acéptalo. Esa función llama a setCount(count + 1), y la llamada hace dos cosas. Guarda el nuevo valor, y redibuja Counter para que la pantalla muestre el número actualizado. Llamar al setter es la señal a React de que algo cambió y el componente debe ejecutarse de nuevo.

Actualizar basándose en el valor anterior

A menudo verás el setter llamado con una función en lugar de un valor simple:

setCount(c => c + 1)

Esta es la forma de actualizador. React llama a tu función con el valor más reciente y usa lo que devuelvas como el próximo estado. Úsala siempre que el nuevo valor se construya a partir del anterior, y especialmente cuando actualizas más de una vez seguidas. Estas dos líneas no hacen lo que parecen:

setCount(count + 1)
setCount(count + 1)

Ambas lecturas de count ven el mismo valor de este render, así que juntas solo mueven el contador en uno. La forma de actualizador lo arregla, porque cada llamada recibe el resultado de la anterior:

setCount(c => c + 1)
setCount(c => c + 1)

Ahora el contador sube en dos. Cambiar un booleano funciona de la misma manera y es donde más encontrarás la forma de actualizador: setIsOpen(open => !open) toma el valor actual y devuelve su opuesto. Cuando tu próximo valor depende del actual, la forma de actualizador es el default seguro.

El estado es por instancia de componente

Cada vez que renderizas un componente, obtiene su propio estado separado. Dos contadores en la misma página cada uno mantiene su propio contador:

function App() {
  return (
    <>
      <Counter />
      <Counter />
    </>
  )
}

Hacer clic en el primer botón no afecta al segundo. Comparten el mismo código de Counter, y cada uno mantiene un valor independiente. El estado pertenece a cada instancia en pantalla, así que una función puede controlar muchas copias separadas.

Reemplaza el estado, no lo mutes

Actualizas el estado dándole a React un nuevo valor, y React compara ese valor con el anterior para decidir qué cambió. Cambiar el valor existente en su lugar omite esa señal, así que la pantalla se vuelve obsoleta. Esto importa especialmente con objetos y arrays. Para añadir a un array, construye uno nuevo en lugar de hacer push en el anterior:

// Omite la actualización: React nunca ve un valor nuevo
todos.push(newTodo)
setTodos(todos)

// Funciona: un array completamente nuevo
setTodos(prev => [...prev, newTodo])

Lo mismo aplica para objetos: expande el anterior en un nuevo objeto con tu cambio aplicado, y devuelve eso desde el actualizador. Trata el valor que obtienes de useState como de solo lectura, y siempre dale al setter algo nuevo.

El anidamiento necesita cuidado. Expandir un objeto copia su nivel superior, así que un objeto anidado dentro de él sigue siendo el mismo objeto, y cambiar ese anidado llega hasta el original:

// Muta el original: el objeto address anidado sigue siendo compartido con el nuevo
user.address.city = 'Ciudad de México'
setUser({ ...user })

// Funciona: un nuevo objeto en cada nivel hasta el cambio
setUser(prev => ({
  ...prev,
  address: { ...prev.address, city: 'Ciudad de México' }
}))

Los paréntesis alrededor del objeto hacen que la función flecha lo devuelva en lugar de leerlo como un bloque de código. Cada nivel hasta el cambio necesita su propio spread, lo que se vuelve incómodo mientras el anidamiento se profundiza. Cuando te encuentras escribiendo una cadena de ellos, eso usualmente es una señal de que el estado quiere aplanarse en piezas más pequeñas.

Cambiar un elemento en una lista

Cambiar un elemento que ya está en un array es donde la gente más a menudo se atasca. La herramienta para esto es map. Recorre el array, devuelve una copia cambiada del elemento que buscas, y devuelve cada otro elemento como está:

function toggleTodo(id) {
  setTodos(prev => prev.map(todo =>
    todo.id === id ? { ...todo, done: !todo.done } : todo
  ))
}

El setter toma la forma de actualizador, ya que el próximo array se construye a partir del actual. El ternario hace la selección: el todo que coincide obtiene una copia con done invertido, y todo lo demás pasa directo. Esos elementos que pasan son los mismos objetos que siempre fueron, lo que está bien. Solo el que cambiaste necesita ser nuevo, junto con el array que los sostiene, y map construye ese array fresco para el setter.

Remover un elemento es filter, y añadir uno es el spread de la sección anterior. Entre los tres, la mayoría de las actualizaciones de listas están cubiertas.

Cuando el valor inicial es costoso

JavaScript evalúa el argumento que pasas a useState en cada render, antes de que useState en sí se ejecute, y React mantiene el resultado solo la primera vez. Para un valor como 0, eso no cuesta nada. Para una llamada de función que hace trabajo real, se ejecuta en cada render y el resultado se descarta después del primero:

// buildBoard() se ejecuta en cada render, y su resultado se descarta después del primero
const [board, setBoard] = useState(buildBoard())

// buildBoard se llama una vez, en el primer render
const [board, setBoard] = useState(buildBoard)

La primera línea llama a la función y le da a React el resultado. La segunda le da a React la función en sí y deja que React la llame una vez. Guarda esto para trabajo que sea genuinamente costoso, como leer del almacenamiento, generar una estructura grande, o una computación pesada. En useState(0) es ruido.

Nota de versión

En componentes de clase, el estado vivía en this.state y lo actualizabas con this.setState. useState es el equivalente de componentes de función, y es la forma estándar de mantener estado en React moderno.

Un par de hábitos prácticos te ahorran problemas aquí. Usa la forma de actualizador (setCount(c => c + 1)) por default siempre que el próximo valor se construya sobre el actual, y mantén la forma simple (setCount(0)) para establecer un valor fresco que ignore el anterior. Esa una regla evita la mayoría de sorpresas de timing antes de que tengas que pensar en ellas.

Mantén el estado mínimo también. Solo almacena lo que no puedas deducir de algo que ya tienes. Si mantienes una lista de elementos en estado, no mantengas también su cantidad en estado; léela con items.length mientras renderizas. Cada pieza extra de estado es otro valor que mantener sincronizado, y el estado duplicado es exactamente donde dos copias se desvían. Cuando varios valores siempre cambian juntos, un objeto único o un hook useReducer a menudo es más estable que un dispersión de llamadas useState separadas.

Ayuda pensar en el estado como una snapshot. Para cualquier render único, count es un valor fijo, decidido cuando ese render comenzó e inalterado mientras se ejecuta. setCount no reasigna esa variable; le pide a React que renderice de nuevo, y el nuevo valor solo aparece en la snapshot del próximo render. Así que leer el estado justo después de establecerlo te da el valor anterior:

function handleClick() {
  setCount(count + 1)
  console.log(count) // aún el valor de este render, no el nuevo
}

Aquí es también donde vienen los closures obsoletos. Cada función que defines durante un render, manejadores de eventos, efectos, timers, cierra sobre los valores de estado de ese render. Si uno de ellos se ejecuta después, un callback de setTimeout por ejemplo, aún ve el count que capturó, aunque el valor haya avanzado desde entonces. La forma de actualizador evita esto, porque setCount(c => c + 1) le pide a React el valor actual en el momento en que se ejecuta en lugar de confiar en el capturado.

Batching es la otra mitad del cuadro. React agrupa las actualizaciones de estado que ocurren dentro de un solo manejador de evento y redibuja una vez, después de que el manejador termina, en lugar de después de cada setCount. Por eso llamar al setter dos veces con count + 1 aún solo mueve el valor en uno: ambas llamadas se encolan contra la misma snapshot antes de que cualquier re-render suceda. Las funciones de actualizador, por el contrario, se encolan y se ejecutan en orden una contra la otra, así que se componen. Desde React 18 este batching se extiende a actualizaciones dentro de promesas, timeouts, y otros callbacks async también, así que las mismas reglas aplican bien más allá de manejadores de evento simples.

JunoEl estado es la memoria de un componente Una variable simple olvida su valor cada vez que la función se ejecuta, y useState lo recuerda. Obtienes el valor y un setter, y llamar a ese setter tanto almacena el nuevo valor como redibuja el componente. Cuando el nuevo valor se construye sobre el anterior, usa setCount(c => c + 1) para que siempre estés trabajando desde el más reciente. Cuando ese valor es un array u objeto, dale al setter uno completamente nuevo con tu cambio aplicado.

JunoEl estado es la memoria de un componenteuseState te da un valor y un setter, y llamar al setter es lo que gatilla un re-render. Usa la forma de actualizador cuando el próximo valor dependa del actual o cuando actualices varias veces seguidas. El estado es por instancia, así que dos del mismo componente mantienen valores separados, y siempre le pasas al setter un valor nuevo en lugar de mutar el viejo array u objeto. Para una lista, eso significa map: una copia nueva del elemento que estás cambiando, todo lo demás sin tocar.

JunoEl estado es la memoria de un componente Trata el estado como una snapshot: fija durante la duración de un render, actualizada solo en el próximo, lo que es por qué leerlo justo después de establecerlo da el valor anterior y por qué los closures capturados se vuelven obsoletos. React agrupa las actualizaciones en un evento y redibuja una vez, así que las llamadas al setter contra la misma snapshot no se apilan, mientras que las funciones de actualizador sí. Cuando la corrección depende del valor anterior, usa la forma de actualizador, y cuando el valor inicial es costoso de construir, dale a useState la función en sí para que React la ejecute una vez.

Siguiente: Events, donde esos manejadores onClick que has estado escribiendo obtienen una mirada adecuada.