React中useEffect依赖缺失Lint错误：已用useCallback仍报错

我明白你的困扰——明明已经在父组件用useCallback包裹了传递给子组件的函数，但子组件的useEffect还是被Linter提示缺少这个函数作为依赖。咱们一步步来拆解问题，找到解决方案。

问题根源 #

你在父组件里定义的handleChildrenProgress用了useCallback，但它的依赖数组里包含了children状态。每当子组件更新进度，父组件的children状态就会变化，这会导致handleChildrenProgress重新创建一个新的函数实例。而子组件的useEffect里没有把updateProgress（也就是父组件传过来的handleChildrenProgress）加入依赖数组，Linter就会认为这是一个潜在的bug——因为如果函数引用变化了，useEffect里的逻辑可能会使用旧的函数，导致状态不同步。

最优解决方案 #

我们可以通过函数式更新优化父组件的状态修改逻辑，同时修正子组件的依赖数组，彻底解决这个问题：

1. 父组件：用函数式更新稳定函数引用

修改handleChildrenProgress，使用setChildrenProgress的函数式更新写法，这样就不需要依赖当前的children状态，useCallback的依赖数组可以设为空，保证函数引用在组件生命周期内稳定：

const handleChildrenProgress = useCallback(
  (progress, index) => {
    // 用函数式更新获取最新的prevChildren，不需要依赖外部的children状态
    setChildrenProgress(prevChildren => 
      prevChildren.map((item, currIndex) => index === currIndex ? progress : item)
    )
  },
  [] // 依赖数组为空，函数引用不再随children变化而更新
)

2. 子组件：补全useEffect的依赖数组

把updateProgress加入子组件useEffect的依赖数组里，满足Linter的要求，同时避免潜在的状态不同步问题：

useEffect(() => {
  updateProgress(progress, index)
}, [progress, index, updateProgress]) // 加入updateProgress作为依赖

修改后的完整代码 #

const arr = ['One', 'Two', 'Three']
const SyncingData = () => {
  const [progress, setProgress] = useState(0)
  const [children, setChildrenProgress] = useState(arr.map(item => 0))
  
  const handleChildrenProgress = useCallback(
    (progress, index) => {
      setChildrenProgress(prevChildren => 
        prevChildren.map((item, currIndex) => index === currIndex ? progress : item)
      )
    },
    []
  )

  useEffect(() => {
    setProgress(
      children.reduce((sum, item) => sum + item, 0) / children.length
    )
  }, [children])

  return (
    <div>
      <div>Total Progress: {progress}</div>
      <ul>
        {arr.map((item, index) => (
          <Child key={index} index={index} updateProgress={handleChildrenProgress} name={item} delay={10 * index} />
        ))}
      </ul>
    </div>
  )
}

const Child = ({updateProgress, name, index, delay}) => {
  const [progress, setProgress] = useState(0)

  useEffect(() => {
    updateProgress(progress, index)
  }, [progress, index, updateProgress])

  useInterval(() => {
    if (progress < 100) {
      setProgress(prev => prev + 1) // 这里也可以优化成函数式更新，避免依赖progress
    }
  }, delay)

  return (
    <div>
      {name} {progress}
    </div>
  )
}

（额外小优化：子组件的setProgress也可以改成函数式更新，这样useInterval的回调也不需要依赖progress状态，进一步避免不必要的依赖警告）

为什么这样有效？ #

• 函数式更新让我们不需要直接依赖外部的children状态，而是通过setState的回调获取最新的状态值，所以useCallback的依赖数组可以为空，保证函数引用稳定。
• 子组件的useEffect加入稳定的updateProgress依赖后，只有当progress、index或者函数引用变化时才会触发，而函数引用几乎不会变化，不会产生多余的渲染或逻辑执行。

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