Olvida useEffect: Los 5 errores que rompen tu app React

El hook useEffect se ejecuta de forma inesperada y causa renders innecesarios.

El truco

// ANTES
useEffect(() => {
  fetchData().then(data => setData(data));
}, [dependency]);

// DESPUÉS
useEffect(() => {
  let isMounted = true;
  fetchData().then(data => {
    if (isMounted) setData(data);
  });
  return () => {
    isMounted = false;
  };
}, [dependency]);

Utilizar una variable booleana para controlar si el componente sigue montado evita actualizar el estado después de un desmontaje. Así, te libras de los errores cuando el componente se desmonta antes de que la promesa se resuelva. Este enfoque es particularmente útil al tratar con tareas asincrónicas en componentes que se montan y desmontan rápidamente.

No dejes que useEffect te cause problemas; controla el ciclo de vida de tus componentes con inteligencia.