如何在useEffect故意保留空依赖数组时消除缺少依赖的警告

你可以根据你的场景选择以下任意一种方式消除警告：

• 直接加ESLint忽略注释
  在空依赖数组的同一行添加// eslint-disable-next-line react-hooks/exhaustive-deps注释，指定ESLint跳过当前useEffect的依赖检查，是最直接的方案，仅对当前hooks生效，不会影响其他代码的规则校验。
  示例代码：

  useEffect(() => {
    // 仅在挂载时执行的逻辑
    getInitConfig()
  }, []) // eslint-disable-next-line react-hooks/exhaustive-deps
  

  注意：使用该方案前请确认逻辑内用到的变量/方法确实不需要响应后续变更，避免闭包陷阱导致读取到旧值。

• 用useRef存储动态依赖
  如果你的逻辑里用到了组件内定义的方法、会更新的state，可以将这些内容存到useRef中，ref对象本身是引用稳定的，不会触发useEffect重新执行，也不会触发依赖警告：

  // 存储需要用到的方法/变量
  const initFnRef = useRef(getInitConfig)
  const initParamsRef = useRef(params)
  
  useEffect(() => {
    initFnRef.current(initParamsRef.current)
  }, [])
  

• 把固定依赖提到组件外部
  如果你逻辑里用到的方法、常量是固定不会跟随组件状态变化的，可以直接把它们定义到组件函数外面，这些内容本身不属于组件的内部状态，不会被纳入依赖检查范围。

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