如何不逐行添加禁用注释即可关闭自定义Hook返回setState的exhaustive-deps告警

首先明确告警触发的底层原因：react-hooks/exhaustive-deps 规则内部内置了白名单，会自动识别 useState、useReducer 原生返回的更新函数是稳定引用，不需要加入依赖数组，因此不会触发告警。而自定义Hook默认不在白名单中，ESLint不会深入分析自定义Hook的内部实现逻辑，因此会将自定义Hook返回的setState判定为需要加入依赖的变量。

以下是三种可行的解决方案： #

方案1：直接将setState加入依赖数组（最高优先级推荐） #

你已经确认useCustomState返回的setState引用不会发生变化，直接将其加入useEffect的依赖数组即可。稳定引用的变量加入依赖数组不会触发useEffect额外执行，完全符合ESLint规则要求，不需要修改任何配置，也没有额外风险。
示例代码：

function SomeHooksOne() {
  const [state, setState] = useCustomState();
  
  useEffect(() => {
    setState('SOME_VALUE');
  }, [setState]); // 无告警，effect仅会在组件挂载时执行一次
}

方案2：封装自定义effect批量处理（适合大量复用的场景） #

如果项目中大量使用该自定义Hook，不想每个地方都加依赖，可以封装一个专属的effect Hook，统一处理忽略逻辑：

// 封装专属effect，内部统一处理忽略规则
const useStableEffect = (effect: React.EffectCallback, deps: React.DependencyList) => {
  // eslint-disable-next-line react-hooks/exhaustive-deps
  React.useEffect(effect, deps);
};

// 业务代码中直接使用
function SomeHooksOne() {
  const [state, setState] = useCustomState();
  
  useStableEffect(() => {
    setState('SOME_VALUE');
  }, []); // 不需要加依赖也不会触发告警
}

注意：该方案需要保证你在useStableEffect中使用的所有非原生更新函数的引用都是稳定的，否则可能会出现依赖更新不触发effect执行的问题。 #

方案3：ESLint全局配置扩展 #

如果使用的是eslint-plugin-react-hooks@4.2.0及以上版本，或者安装了eslint-plugin-react-hooks-extra扩展插件，可以在ESLint配置文件中添加对自定义Hook的识别配置，让规则将useCustomState视为和useState同等的稳定返回Hook：

// .eslintrc.json 中添加
{
  "rules": {
    "react-hooks/exhaustive-deps": ["warn", {
      "additionalStableHooks": ["useCustomState"]
    }]
  }
}

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