CodeAventura
React
▸Estado: componentes que recuerdan▸useState: tu primer estado

Misión

●localhost:5173
13 / 21useState: tu primer estado
Anterior

useState: tu primer estado

El problema de las variables normales

Imagina un contador. Con lo que sabes hasta ahora, podrías intentar algo así:

Haz click en el botón. La consola muestra 1, 2, 3... pero la pantalla siempre muestra 0. ¿Por qué?

Porque las variables normales no provocan un re-render. React no sabe que algo cambió, así que no vuelve a pintar el componente.

useState al rescate

Para que React detecte cambios y actualice la interfaz, necesitas importar el hook useState de la librería de react:

Ahora sí: cada click actualiza el número en pantalla.

Anatomía de useState

useState devuelve un array con dos elementos:

  1. El valor actual del estado (count)
  2. Una función para actualizarlo (setCount)

Puedes nombrarlos como quieras, pero la convención es [cosa, setCosa].

¿Qué pasa cuando llamas al setter?

Ciclo: setState → Re-render → UI actualizada

React ejecuta tu componente por primera vez. useState(0) devuelve 0.

const [count, setCount] = useState(0);
// count = 0

Cuando llamas a setCount(1), ocurre esto:

  1. React guarda el nuevo valor (1)
  2. React vuelve a ejecutar la función del componente
  3. Esta vez, useState(0) devuelve 1 en vez de 0
  4. React compara el JSX anterior con el nuevo
  5. Solo actualiza las partes del DOM que cambiaron

Todo esto pasa automáticamente. Tú solo dices "el nuevo valor es 1" y React se encarga del resto.

Múltiples estados

Un componente puede tener tantos useState como necesite:

Cada estado es independiente.

La regla de oro: nunca modifiques el estado directamente

Modificar la variable directamente no funciona porque React no se entera del cambio. La función setter es la que le dice a React: "hey, algo cambió, vuelve a renderizar".

Estado privado por instancia

Si usas el mismo componente dos veces, cada uno tiene su propio estado:

Hacer click en un contador no afecta al otro. Cada instancia tiene su propio "cajón" de estado.

Tu desafío 🚀

Crea un contador con:

  1. Un estado con useState(0)
  2. Un botón para incrementar (+1)
  3. Un botón para decrementar (-1)
  4. Muestra el valor del contador en pantalla

Bonus: añade un botón para resetear a 0.

useState es la piedra angular de React. A partir de ahora, tus componentes ya no son estáticos — reaccionan, recuerdan y cambian. Por eso se llama React.