react / react/react

Bug: react-hooks/exhaustive-deps false positive when use function with generic type variable in useEffect

Abierto
#25,149 4 comentarios 1 reacción 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Component: ESLint Rules Status: Unconfirmed Type: Bug
Lenguaje dominante
JavaScript
Estrellas
251k
Forks
51.4k
Merge medio
2 d 4 h
PR fusionados (30 d)
53

Descripción

React version: 18.2.0

Steps To Reproduce

  1. use function with generic type in useEffect

code example:

function useBug<T>(val: T) {
  const ref = useRef<T>(val)

  const fn = () => {
    const temp: T = ref.current // <-- if remove the generic type will be ok
  }

  useEffect(() => {
    fn()
  }, []) // <-- ESLint error: React Hook useEffect has a missing dependency: 'fn'.
}

package version:

npmPackages:
    @typescript-eslint/eslint-plugin: ^5.35.1 => 5.35.1 
    @typescript-eslint/parser: ^5.35.1 => 5.35.1 
    @typescript-eslint/scope-manager:  5.35.1 
    @typescript-eslint/type-utils:  5.35.1 
    @typescript-eslint/types:  5.35.1 
    @typescript-eslint/typescript-estree:  5.35.1 
    @typescript-eslint/utils:  5.35.1 
    @typescript-eslint/visitor-keys:  5.35.1 
    eslint: ^8.23.0 => 8.23.0 
    eslint-plugin-react-hooks: ^4.6.0 => 4.6.0 

relevant: #20395

The current behavior

React Hook useEffect has a missing dependency: 'fn'. Either include it or remove the dependency array.

The expected behavior

No missing dependencies reported.

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza con la reproducción mínima en TypeScript del issue e inspecciona la implementación de eslint-plugin-react-hooks exhaustive-deps. Verifica el ejemplo genérico de useEffect y luego añade o actualiza la cobertura para que este caso ya no informe de una dependencia fn ausente, mientras las advertencias de dependencias existentes permanecen intactas.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
eslint, javascript, react, typescript
Área
frontend, tooling
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bien especificado
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.