Una dependencia faltante en el array de dependencias de useEffect causa un bug de clausura obsoleta: el efecto captura un valor desactualizado de una variable y continúa usándolo incluso después de que la variable haya cambiado. Este es uno de los bugs más comunes de React y es detectado por la regla ESLint react-hooks/exhaustive-deps.
Por qué ocurre
- •Una prop o variable de estado usada dentro de useEffect se omite del array de dependencias.
- •Una función usada dentro de useEffect se recrea en cada renderizado pero no se incluye en las deps.
- •Usar un array de dependencias vacío ([]) pero leer props o estado dentro del efecto.
Ejemplos
Código que causa el error
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
useEffect(() => {
fetchUser(userId).then(setUser);
}, []); // userId missing from deps arrayError en la terminal
// ESLint warning: React Hook useEffect has a missing dependency: 'userId'. // Bug: profile never refreshes when userId prop changes.
Cómo solucionarlo
Agrega todas las variables referenciadas dentro de useEffect al array de dependencias. Si la regla de lint marca una función, mueve la función dentro del efecto o envuélvela en useCallback. El array vacío ([]) solo es correcto cuando el efecto verdaderamente debe ejecutarse una vez y no usa valores reactivos.
Código corregido
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
useEffect(() => {
fetchUser(userId).then(setUser);
}, [userId]); // re-runs when userId changesErrores relacionados
¿Listo para practicar tu inglés en el trabajo?
Lingua-e tiene ejercicios interactivos basados en conversaciones reales de developers: standups, code reviews, retrospectivas y más. Practica hasta que salga solo.
Prueba Lingua-e gratis