useState - Estado Local

useState es el hook más fundamental de React. Permite que un componente recuerde datos entre renders. Si solo usaras variables normales, se resetearían con cada render. useState devuelve el valor actual y una función para actualizarlo. Cuando llamas la función de actualización, React re-renderiza el componente con el nuevo valor.

Una regla crítica: nunca mutes el estado directamente. En lugar de array.push(item), haz setArray([...array, item]). En lugar de objeto.propiedad = valor, haz setObjeto({...objeto, propiedad: valor}). La inmutabilidad permite a React detectar cambios eficientemente y garantizar comportamiento predecible.

import { useState } from "react";

function Contador() {
  // [valor actual, función para actualizar]
  const [contador, setContador] = useState(0);
  
  return (
    <div>
      <p>Conteo: {contador}</p>
      <button onClick={() => setContador(contador + 1)}>+</button>
      <button onClick={() => setContador(contador - 1)}>-</button>
      <button onClick={() => setContador(0)}>Reset</button>
    </div>
  );
}

// Estado con objetos
function Formulario() {
  const [form, setForm] = useState({
    nombre: "",
    email: "",
  });
  
  const handleChange = (e) => {
    setForm(prev => ({
      ...prev, // Preserva otros campos
      [e.target.name]: e.target.value
    }));
  };
  
  return (
    <form>
      <input
        name="nombre"
        value={form.nombre}
        onChange={handleChange}
        placeholder="Nombre"
      />
      <input
        name="email"
        value={form.email}
        onChange={handleChange}
        placeholder="Email"
      />
      <p>Nombre: {form.nombre}</p>
    </form>
  );
}