Deja de romper tu app: 5 patrones de useEffect que debes evitar
Aprende a evitar patrones problemáticos en useEffect para mejorar el rendimiento de tu aplicación.
Al usar useEffect, a veces sin querer creamos bucles infinitos que afectan el rendimiento.
El truco
Código ANTES (mal):
useEffect(() => {
fetchData();
}, [user]);
function fetchData() {
// Llamada a la API que depende de `user`
}
Código DESPUÉS (bien):
useEffect(() => {
if (user) {
fetchData();
}
}, [user]);
function fetchData() {
// Llamada a la API que depende de `user`
}
Si user es null o undefined en alguna ejecución, se evita una llamada innecesaria a la API que podría provocar un bucle si fetchData actualiza el estado de user. Comprobar el estado antes de realizar operaciones costosas garantiza que solo se ejecuten cuando realmente tienen sentido.
Conclusión: Comprobar tus dependencias dentro de useEffect antes de ejecutar lógica pesada ahorra recursos y previene bugs.