La re-renderización infinita por una dependencia mal gestionada en useEffect puede romper tu aplicación rápidamente.

El truco

ANTES:

useEffect(() => {
  // Llamada innecesaria en cada render
  fetchData();
}, [data]);

DESPUÉS:

useEffect(() => {
  // Llamada optimizada
  fetchData();
}, []);

Si fetchData no depende de data, es mejor dejar las dependencias vacías para evitar llamadas infinitas que pueden crear loops de render innecesarios. Ajusta tu lista de dependencias al mínimo necesario.

Evita actualizar el estado directamente dentro de la función useEffect para prevenir loops de render.

El truco

ANTES:

useEffect(() => {
  if (count > 0) {
    setCount(0); // Mala práctica
  }
}, [count]);

DESPUÉS:

useEffect(() => {
  if (count > 0) {
    // Realiza alguna acción sin actualizar el estado aquí
  }
}, [count]);

Actualizar el estado en useEffect sin control puede causar un ciclo de render sin fin. Controla bien las condiciones bajo las cuales actualizas el estado.

Evita gestionar efectos secundarios irrelevantes en el mismo useEffect.

El truco

ANTES:

useEffect(() => {
  fetchData();
  document.title = `Nuevo título`; // No relacionado
}, []);

DESPUÉS:

useEffect(() => {
  fetchData();
}, []);

useEffect(() => {
  document.title = `Nuevo título`;
}, []);

Mantén los efectos secundarios separados si no están relacionados. Mejora la claridad y reduce el riesgo de efectos colaterales no deseados.

Los efectos mal gestionados pueden convertirse en un dolor de cabeza si no prestas atención a las dependencias y a cómo gestionas el estado. Optimiza tus useEffect y mantén tu app funcionando de manera fluida.