react-hooks/exhaustive-deps报错原因及仅执行一次副作用的实现方案

报错原因 #

你遇到的是react-hooks/exhaustive-deps ESLint规则的校验错误。该规则的设计目的是静态检测useEffect等Hook回调中引用的响应式变量（props、state、组件内定义的其他变量）是否全部纳入依赖数组，避免回调闭包捕获到过时的变量值导致逻辑bug。
你的代码片段1中，effect回调内引用了props传入的foo，但没有将其加入依赖数组，规则默认你是遗漏了依赖声明，因此触发报错甚至自动修复。

几种绕写方案的本质 #

你给出的代码片段3、4、5，逻辑上和代码片段1完全等价：都是在组件第一次渲染时捕获当时的foo值，后续foo更新不会改变effect执行时用到的值，也不会触发effect重新执行。
这些写法只是通过静态检查无法识别的模式绕开了规则校验，并没有解决规则原本提示的「闭包捕获值可能过时」的问题，反而额外增加了冗余的运行时代码，可读性也更差。

最干净的实现方案 #

如果你的需求明确是仅使用组件首次挂载时的foo初始值，后续foo变更不需要触发该逻辑，也不需要使用更新后的值，最干净的方案就是直接给代码片段1加跳过校验的注释：

const logFooOnlyOnce = (foo: string) => console.log(foo) 

export const MyComponent = ({ foo }: { foo: string }): JSX.Element => {
  React.useEffect(() => {
    logFooOnlyOnce(foo)
    // 明确仅使用初始foo值，不需要响应后续变更
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []) 
  return <div />
}

这种方案没有多余的运行时代码，注释也清晰表明了你的设计意图，其他维护者一眼就能明白你是故意不添加依赖，而非遗漏。

申请添加eslint-ignore的合理理由 #

1. 需求明确：该effect的设计目标就是仅在组件挂载时执行一次，只需要用到首次渲染的foo初始值，不需要响应foo的后续变更
2. 属于规则的合法例外场景：React官方文档明确说明exhaustive-deps是辅助规则，存在合法的例外情况，允许通过注释跳过校验
3. 比绕开规则的写法更易维护：直接加注释的写法没有冗余代码，意图清晰，远胜于为了绕开规则额外创建ref、高阶函数的hack写法，降低后续维护成本

内容的提问来源于stack exchange，提问作者pailhead