Eventos y estado con useState

Cuando el usuario hace clic, escribe o selecciona algo, React responde con eventos.

function Counter() {
  function handleClick() {
    console.log('hiciste clic');
  }

  return <button onClick={handleClick}>Sumar</button>;
}

Aquí todavía no cambia la UI. Para eso necesitas estado.

useState

useState guarda datos que cambian entre renders.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicks: {count}
    </button>
  );
}

count es el valor actual.
setCount programa una actualización.

Cómo pensar el estado

Pon en estado solo aquello que:

• cambia con el tiempo
• afecta a lo que se pinta
• no puede derivarse fácilmente de otros datos

Mal ejemplo:

const [fullName, setFullName] = useState(firstName + ' ' + lastName);

Si fullName se puede calcular, mejor no guardarlo:

const fullName = `${firstName} ${lastName}`;

Actualización basada en valor previo

Cuando la siguiente actualización depende de la anterior, usa la forma funcional:

setCount((prev) => prev + 1);

Eso evita errores cuando hay varias actualizaciones seguidas.

Reglas prácticas

• No modifiques el estado directamente
• Cada cambio de estado provoca un nuevo render
• Si el dato no afecta a la UI, probablemente no debe ser estado

En la siguiente lección veremos cómo pintar listas y contenido condicional sin tropezar con keys ni con lógica desordenada.