React子组件更新父组件状态：无限循环与警告问题求解

问题场景 #

子组件通过定时器实时计算业务值，满足条件时调用父组件传递的回调更新父状态。最初用useCallback解决了父组件重新渲染导致回调重复创建引发的无限循环，但当父组件需要更新数组状态时，由于useCallback依赖数组，每次数组更新都会导致回调重新创建，再次触发无限循环。尝试在子组件渲染阶段直接比较useRef值触发更新，又出现「Cannot update a component (Parent) while rendering a different component (Child)」警告。

优雅解决方案 #

方案1：用函数式更新消除父组件回调的依赖 #

父组件更新数组状态时，使用函数式更新获取最新状态，避免将数组加入useCallback的依赖列表，保证回调引用稳定。

const MIDNIGHT = new Date().setHours(0, 0, 0, 0)

const Parent = () => {
  const [state, setState] = useState()
  const [anArray, setAnArray] = useState([])

  // 函数式更新获取最新数组，无需依赖anArray
  const handleChangeState = useCallback((value) => {
    setState(value)
    setAnArray(prevArray => [...prevArray, value])
  }, [])

  return (
    <div>
      <Child onUpdate={handleChangeState} />
      <p>当前状态：{state}</p>
      <p>数组内容：{JSON.stringify(anArray)}</p>
    </div>
  )
}

子组件保持原有逻辑即可，因为handleChangeState引用稳定，不会触发子组件useEffect的不必要执行：

const Child = ({ onUpdate }) => {
  const [now, setNow] = useState(Date.now())

  useEffect(() => {
    const interval = setInterval(() => {
      setNow(Date.now())
    }, 100)
    return () => clearInterval(interval)
  }, [])

  const msElapsed = now - MIDNIGHT
  const someOtherValue = msElapsed * 1
  // ...其他业务计算

  useEffect(() => {
    if (someOtherValue) {
      onUpdate(someOtherValue)
    }
  }, [someOtherValue, onUpdate])

  return <p>计算值：{someOtherValue}</p>
}

原理：函数式更新允许基于前一状态生成新状态，无需在useCallback依赖中包含当前数组，确保回调引用始终稳定，从根源避免子组件useEffect因回调变化重复触发。

方案2：优化子组件逻辑，减少不必要渲染 #

如果子组件的now状态仅用于计算someOtherValue，可以直接在定时器内完成计算，用useRef记录上次值，仅当值变化时调用父组件回调，避免频繁更新子组件状态：

const Child = ({ onUpdate }) => {
  const lastValueRef = useRef(0)

  useEffect(() => {
    const interval = setInterval(() => {
      const now = Date.now()
      const msElapsed = now - MIDNIGHT
      const someOtherValue = msElapsed * 1
      // ...其他业务计算

      if (someOtherValue !== lastValueRef.current) {
        lastValueRef.current = someOtherValue
        onUpdate(someOtherValue)
      }
    }, 100)
    return () => clearInterval(interval)
  }, [onUpdate])

  return <p>计算值：{lastValueRef.current}</p>
}

优势：子组件无需维护now状态，仅在someOtherValue真正变化时触发父组件更新，减少组件渲染次数，提升性能。

总结 #

优先通过方案1解决父组件回调的依赖问题，确保回调引用稳定；再结合方案2优化子组件逻辑，减少不必要的状态更新和渲染，即可优雅解决无限循环与警告问题。

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