Estado con useState

Estado

Las props vienen de fuera y no cambian. El estado es información que el componente gestiona y puede cambiar con el tiempo (un contador, un texto que se escribe...). Cuando el estado cambia, React vuelve a renderizar el componente.

El estado se declara con el hook useState:

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

  return (
    <div>
      <p>Has pulsado {cuenta} veces</p>
      <button onClick={() => setCuenta(cuenta + 1)}>Sumar</button>
    </div>
  );
}

• useState(0) crea un estado con valor inicial 0.
• Devuelve un array: el valor actual (cuenta) y una función para cambiarlo (setCuenta).
• Nunca modifiques el estado directamente (cuenta++). Usa siempre la función (setCuenta(...)): es lo que avisa a React de que debe repintar.

En los ejercicios, useState (y otros hooks) ya están disponibles: puedes usarlos directamente, sin importarlos.