Si tenemos una función que obtiene datos de usuario como tales:
const fetchUserData = () => { /* code here */ }Y luego tenemos un useEffect con una matriz vacía, por lo que se ejecuta una vez que el componente se ha renderizado:
useEffect(() => { fetchUserData(); }, []); Entonces eslint/tslint arroja esta advertencia: React Hook useEffect has a missing dependency: 'fetchUserData'. Either include it or remove the dependency array. Entiendo que esta es una buena práctica si dice que nuestra variable de función era let o var , pero ¿cómo cambiaría la variable fetchUserData si se declara con una palabra clave const ?
¿Es esto un error en el linter y deberíamos ignorarlo o hay algo que me estoy perdiendo?
Si la "variable"¹ que hace referencia a la función es let , var o const es irrelevante. Recuerde que cada vez que su componente necesita ser renderizado, su función de componente es llamada nuevamente, lo que crea un contexto de ejecución completamente nuevo con su propia const (o let o var ) "variable" con una nueva función fetchUserData asignada. useEffect solo llamará al primero de los que se crean (porque tiene una matriz de dependencia [] ). Para esta situación específica puede ser inofensivo, pero en el caso general corre el riesgo de tener cierres sobre datos obsoletos, de ahí la advertencia de linter.
Si no usa ningún estado o accesorio en fetchUserData , puede reubicarlo dentro de la devolución de llamada useEffect , que elimina el error y evita recrear una función en cada procesamiento que no va a usar. (Si usa state o props en fetchUserData , probablemente no solo debería llamarse una vez cuando el componente está montado, sino cada vez que cambia el state/props que usa).
¹ Más generalmente, enlace (un enlace de un nombre a una ranura de almacenamiento que contiene un valor en el objeto de entorno léxico para el contexto de ejecución de la llamada de función).