解决React useEffect依赖缺失警告与添加依赖触发无限循环的问题

方案1：函数式状态更新（React官方推荐） #

核心是利用状态setter内置的旧状态回调参数，替代对外部allHistoricalData的直接引用，从根源上消除该变量的依赖需求。
修改后的代码示例：

const CombineRemainderData = (props) => {
    const {remainderData, setAllHistoricalData, devices} = props
    useEffect(() => {
        // 原有newState生成逻辑保持不变
        setAllHistoricalData(prevState => ({
            ...prevState,
            newState: newState,
            keys: devices
        }))
    }, [remainderData, setAllHistoricalData, devices])
}

该方案优势： #

• 完全符合react-hooks/exhaustive-deps规则要求，不会触发ESLint警告：useEffect内部没有直接引用外部作用域的allHistoricalData，无需将其加入依赖数组
• 无无限循环风险：仅当依赖项remainderData、setAllHistoricalData、devices的引用发生变化时才会执行effect
• 如果setAllHistoricalData是useState原生返回的setter，其引用天然稳定，无需额外处理

方案2：useRef存储最新状态（兼容非原生setter场景） #

如果setAllHistoricalData是从useReducer、全局状态库或自定义hook派生的，不支持函数式入参，可以通过useRef同步最新状态，避免直接依赖allHistoricalData：
修改后的代码示例：

const CombineRemainderData = (props) => {
    const {remainderData, setAllHistoricalData, allHistoricalData, devices} = props
    // 初始化ref存储最新状态
    const allHistoricalDataRef = useRef(allHistoricalData)
    // 渲染周期同步最新状态到ref，无需放入useEffect
    allHistoricalDataRef.current = allHistoricalData

    useEffect(() => {
        setAllHistoricalData({
            ...allHistoricalDataRef.current,
            newState: newState,
            keys: devices
        })
    }, [remainderData, setAllHistoricalData, devices])
}

该方案说明： #

• ref的current属性始终持有最新的allHistoricalData值，不会因为状态引用变化触发effect重执行
• useEffect内部没有直接引用allHistoricalData变量，不会触发ESLint依赖警告
• 仅当明确指定的依赖项变化时才会触发状态更新，无循环风险

额外校验点 #

要避免隐式无限循环，需要保证依赖数组内的非状态变量引用稳定：

• 如果devices是父组件内通过字面量、数组操作生成的临时变量，需要用useMemo包裹固化引用，否则每次父组件渲染都会触发当前effect执行
• 如果setAllHistoricalData是自定义hook返回的方法，需要用useCallback包裹固化引用，避免不必要的触发

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