React并发/Suspense模式下依赖变更时useEffect未触发问题排查

从代码截图可见，第67行在函数组件主体中打印count变量，第69行在useEffect回调中打印count变量。预期函数组件渲染上下文和effect闭包中的count值始终同步，但实际运行结果不符合预期。

从运行日志可见，当count从3更新为4时，对应的useEffect并未触发。

这个现象既不是React框架Bug，和并发模式、Suspense特性也没有关联，本质是对useEffect的执行触发规则、React组件的闭包机制理解存在偏差。

useEffect的执行逻辑非常明确：只有当依赖数组中传入的所有值，和上一次渲染时的对应值做浅比较结果为不相等时，effect回调才会在当前渲染提交到DOM之后执行，同时回调会捕获当前这次渲染闭包中的所有变量值。
你遇到组件内count已经更新到4，但effect没有打印对应值的情况，基本逃不出以下两类原因：

• 依赖数组配置错误：最常见的情况是漏写count依赖，比如写了空依赖数组[]，这种情况下effect只会在组件首次挂载时执行一次，后续所有count更新都不会触发effect重跑，effect的闭包会永久保留首次渲染时的count值。还有一种情况是违反了Hooks调用规则，把useEffect写在了条件分支、循环或者嵌套函数内部，导致某次渲染时React根本没有注册对应的effect，自然不会执行。
• 对「同步」的理解有偏差：每一次组件渲染都会生成独立的闭包快照，组件主体里的count、effect回调里的count都只是对应快照里的固定值。当count更新触发重渲染时，组件主体会先执行，打印最新的count值；但如果依赖判断不通过，这次渲染对应的effect回调根本不会执行，你自然看不到effect里打印最新值，看起来就像两边不同步。

• 严格遵守Hooks调用规则，把所有useEffect放在组件顶层作用域，不要放在条件判断、循环里。
• 不要关闭eslint-plugin-react-hooks的exhaustive-deps校验规则，按照提示把effect用到的所有外部值都加入依赖数组，比如把effect写成useEffect(() => { console.log(count) }, [count])，之后只要count变化，effect一定会触发，两边打印的值完全一致。
• 不要尝试在effect里读取脱离渲染快照的「最新」可变值，如果确实需要在不重新触发effect的情况下拿到最新的count，可以用useRef存值做中转，不要依赖闭包捕获。

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