Organizando el estado

Multiples useState

function Formulario() {
  const [nombre, setNombre] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  // Cada estado es independiente
  // Util cuando no estan relacionados
}

Estado agrupado

function Formulario() {
  // Agrupa estados relacionados
  const [form, setForm] = useState({
    nombre: '',
    email: '',
    password: ''
  });

  const [ui, setUi] = useState({
    isSubmitting: false,
    errors: {}
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setForm(prev => ({ ...prev, [name]: value }));
  };
}

Cuando separar vs agrupar?

• Separar: Estados que cambian independientemente
• Agrupar: Estados que siempre cambian juntos

Ejemplo practico: Filtros

function ProductList() {
  // Estados de filtro (relacionados)
  const [filters, setFilters] = useState({
    categoria: 'all',
    precioMin: 0,
    precioMax: 1000,
    ordenar: 'nombre'
  });

  // Estado de datos (independiente)
  const [productos, setProductos] = useState([]);

  // Estado de UI (independiente)
  const [isLoading, setIsLoading] = useState(false);

  const updateFilter = (key, value) => {
    setFilters(prev => ({ ...prev, [key]: value }));
  };

  return (
    <div>
      <select
        value={filters.categoria}
        onChange={(e) => updateFilter('categoria', e.target.value)}
      >
        <option value="all">Todas</option>
        <option value="tech">Tecnologia</option>
      </select>

      <input
        type="range"
        value={filters.precioMax}
        onChange={(e) => updateFilter('precioMax', e.target.value)}
      />
    </div>
  );
}

Levantando el estado (Lifting State)

// Cuando dos componentes necesitan compartir estado,
// muevelo al componente padre mas cercano

function App() {
  const [temperatura, setTemperatura] = useState(20);

  return (
    <div>
      <TermometroA temp={temperatura} onCambiar={setTemperatura} />
      <TermometroB temp={temperatura} onCambiar={setTemperatura} />
    </div>
  );
}