useEffect依赖数组含多个state时最新值获取问题及解决方案

核心结论 #

只要你将effect中用到的所有state都正确加入依赖数组，仅更新其中一个state时，useEffect回调内一定可以访问到另一个state的最新值。
很多人会在这里产生误解，是把「state值没有发生变化」和「state值不是最新的」搞混了：当你只更新state1时，state2本身没有被修改，它的最新值就和上一次渲染时的值完全一致，你在effect里拿到的这个值就是它的最新值，不存在“拿不到”的问题。

底层逻辑说明 #

React的每一次组件渲染都会生成独立的闭包快照，单次渲染内的所有state、props、effect回调、事件处理函数都是固定的，和其他渲染周期完全隔离：

• 任意一个依赖项变化触发重渲染时，React会重新执行组件函数，计算所有state的当前值：被更新的state返回新设置的值，未被更新的state保留当前存储的最新值，不会出现未更新state值滞后的情况
• 渲染完成后，新的useEffect回调会捕获本次渲染周期内所有state的快照值，哪怕本次effect的触发原因只是其中一个state更新，回调里用到的其他state也都是本次渲染对应的最新值

你可以用下面的示例验证：

function Component() {
  const [state1, setState1] = useState('init1');
  const [state2, setState2] = useState('init2');

  useEffect(() => {
    console.log('effect执行结果：', state1, state2);
  }, [state1, state2]);

  return (
    <div>
      <button onClick={() => setState1('update1')}>仅更新state1</button>
      <button onClick={() => setState2('update2')}>仅更新state2</button>
    </div>
  )
}

点击「仅更新state1」按钮时，控制台会输出effect执行结果： update1 init2，这里的init2就是state2此刻的最新值，完全符合预期。

真正会拿不到最新值的场景 #

只有两种常见情况会出现你担心的访问不到最新值的问题：

• 依赖数组漏写了effect中用到的state：比如依赖数组只写了[state1]，state2更新时不会触发effect重新执行，回调里留存的永远是上一次effect执行时捕获的state2旧闭包值
• useEffect回调内存在异步逻辑（比如接口请求、setTimeout、事件订阅回调）：当异步逻辑实际执行时，组件可能已经完成了新一轮重渲染，此时异步回调里捕获的还是effect触发那次渲染的state快照，和当前最新值可能存在差异

对应最佳实现方案 #

根据不同的问题场景选择对应方案即可：

• 基础场景：严格遵守依赖数组规则
  不要为了减少effect执行次数故意漏写依赖，把effect回调中用到的所有state、props、组件内自定义函数都完整加入依赖数组。开启ESLint规则react-hooks/exhaustive-deps可以自动检查漏写的依赖项，从根源上避免闭包陈旧问题。
• 异步场景：用useRef同步最新值
  如果effect中存在异步逻辑需要读取最新state，可以用useRef保存一份state的实时引用，每次渲染都将最新state同步到ref上，异步回调中读取ref.current即可拿到任意时刻的最新值：

  function Component() {
    const [state1, setState1] = useState('');
    const [state2, setState2] = useState('');
    // 定义ref存储最新state
    const latestStateRef = useRef({ state1, state2 });
    // 每次渲染同步最新值到ref，这行逻辑不要放在effect里
    latestStateRef.current = { state1, state2 };
  
    useEffect(() => {
      const timer = setTimeout(() => {
        // 异步逻辑中从ref读取值，永远是最新的
        console.log(latestStateRef.current.state1, latestStateRef.current.state2);
      }, 1000);
      return () => clearTimeout(timer);
    }, [state1, state2]);
    
    return <>...</>
  }
  

• 逻辑抽离场景：用useEffectEvent固化最新逻辑
  如果你需要将state相关的操作逻辑抽离复用，React 18提供了官方的useEffectEventhook（低版本可以通过useRef手动实现），可以保证拿到的函数永远绑定最新的state闭包，同时不会触发effect重新执行。

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