Solución: setState durante render — actualizar estado mientras se renderiza

¿Por qué ocurre?

Llamas a una función de `setState` durante el renderizado (directamente en el cuerpo del componente, no dentro de un handler o useEffect). React prohíbe esto porque causaría un bucle infinito: el render provoca un setState, que provoca otro render, y así indefinidamente.

Solución paso a paso

El patrón problemático más común:

// ❌ setState llamado durante el render
function Padre() {
  const [valor, setValor] = useState(null);
  function Hijo({ datos }) {
    setValor(datos); // ← se ejecuta durante el render del Padre
    return 
{datos};
  }  return ;
}

Solución A — Mover el setState a un useEffect:

// ✅ useEffect se ejecuta DESPUÉS del render, no durante
function Componente({ datos }) {
  const [valor, setValor] = useState(null);
  useEffect(() => {
    setValor(datos);
  }, [datos]); // se ejecuta cuando 'datos' cambia
  return 
{valor};
}

Solución B — Elevar el estado al componente correcto:

// ✅ El estado vive donde se necesita, no en un hijo
function Padre() {
  const [valor, setValor] = useState(null);
  const handleDatos = (datos) => {
    setValor(datos); // ← aquí sí es correcto, en un handler
  };
  return (
    <>
      
      
Valor: {valor}
    
  );
}

Solución C — Derivar el valor sin useState:

// Si el valor es una transformación de las props, no necesitas estado
// ❌ Innecesario
function Componente({ items }) {
  const [filtrados, setFiltrados] = useState([]);
  setFiltrados(items.filter(i => i.activo)); // error
  return {filtrados.map(...)};
}
// ✅ Calcula directamente en el render
function Componente({ items }) {
  const filtrados = items.filter(i => i.activo); // sin estado
  return 
{filtrados.map(...)};
}

Caso — actualizar estado de otro componente desde un hijo:

// ✅ Pasa la función de actualización como prop (callback)
function Padre() {
  const [total, setTotal] = useState(0);
  return  setTotal(t => t + n)} />;
}function Hijo({ onSumar }) {
  return ;
}

Cómo evitarlo en el futuro

El cuerpo de un componente React es una función pura — solo debe calcular JSX, sin efectos secundarios. Mueve cualquier lógica que modifique estado a useEffect, useReducer o handlers de eventos.