react / react/react

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

未关闭
#25,149 4 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

Component: ESLint Rules Status: Unconfirmed Type: Bug
主要语言
JavaScript
星标
251k
派生
51.4k
平均合并
2 天 4 小时
30 天内合并 PR
53

描述

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.

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

从 issue 中的最小 TypeScript 复现开始,并检查 eslint-plugin-react-hooks exhaustive-deps 的实现。验证通用的 useEffect 示例,然后添加或更新覆盖范围,使此情况不再报告缺少 fn 依赖,同时保持现有的依赖警告不变。

由索引模型根据 Issue 内容生成。

评估

技术栈
eslint, javascript, react, typescript
领域
frontend, tooling
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
描述清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。