Optimiza React eliminando esos pequeños errores que destruyen el rendimiento

A menudo, los re-renders innecesarios son los culpables de un rendimiento pobre en tu app React.

El truco

Antes (mal)

function MyComponent({ count }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData(count).then(response => setData(response));
  }, [count]); // Esto provoca un fetch en cada cambio de `count`

  return <DisplayData data={data} />;
}

Después (bien)

function MyComponent({ count }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    let isMounted = true;
    fetchData(count).then(response => {
      if (isMounted) setData(response);
    });
    return () => { isMounted = false; }; // Cancela el fetch si el componente se desmonta
  }, [count]);

  return <DisplayData data={data} />;
}

Asegúrate de que el componente no intente actualizar el estado después de haberse desmontado. Este patrón evita fugas de memoria y re-renders innecesarios. Utilizar una bandera como isMounted te permite controlar cuándo se deben aplicar los cambios al estado.

Una simple gestión adecuada del ciclo de vida puede marcar la diferencia en el rendimiento de tu aplicación.