JavaScript

Qué significa useEffect con dependencia faltante y cómo solucionarlo

Referencia del error

useEffect con dependencia faltante

Lenguaje

JavaScript

Severidad

Media

Cuándo ocurre

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.

Posibles soluciones

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.

Errores relacionados

Invalid Hook Call Too many re-renders Rendered Fewer Hooks Than Expected

Más detalles

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.

Posibles soluciones

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.

Ejemplos

JavaScript

Código que causa el error

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, []); // userId missing from deps array

Error en la terminal

// ESLint warning: React Hook useEffect has a missing dependency: 'userId'.
// Bug: profile never refreshes when userId prop changes.

Código corregido

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]); // re-runs when userId changes

Practica en inglés

¿Cómo le explicarías un useEffect Missing Dependency a un compañero dev? Elige la frase correcta:

"I hit an error...

¿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