useState le da a un componente funcional una porción de estado local y reactivo. Devuelve un par: el valor actual y una función setter. Llamar al setter programa un re-render con el nuevo valor.
jsx
[count, setCount] = ();
(count + );
( c + );
useState le da a un componente funcional una porción de estado local y reactivo. Devuelve un par: el valor actual y una función setter. Llamar al setter programa un re-render con el nuevo valor.
[count, setCount] = ();
(count + );
( c + );
1. Las actualizaciones son asíncronas / agrupadas (batched). count no cambia en la línea siguiente a setCount; tiene el nuevo valor en el siguiente render. Por eso esto solo incrementa una vez:
setCount(count + 1);
setCount(count + 1); // both read the SAME stale `count` → +1 total
Usa el actualizador funcional cuando el siguiente valor depende del anterior, porque React le pasa el valor más reciente:
setCount(c => c + 1);
setCount(c => c + 1); // +2 total — each gets the up-to-date value
2. El valor inicial se usa solo en el primer render. Para un valor por defecto costoso, pasa una función para que se ejecute una sola vez (inicialización perezosa):
const [data] = useState(() => expensiveInit()); // runs once, not every render
El estado es lo que hace interactivo a un componente: React vuelve a ejecutar la función y re-renderiza la UI cada vez que el estado cambia.
Trata el estado como inmutable: crea un nuevo array/objeto en lugar de mutar, p. ej. setItems([...items, x]); de lo contrario React podría no detectar el cambio.