setState先设为undefined再赋值后渲染内容异常问题

问题场景与复现步骤 #

1. App组件首次渲染时，由于value为undefined，直接调用setValue(1)，此时不渲染AddingUp组件。
2. App组件重新渲染，value更新为1，渲染AddingUp组件，显示11（组件内部useRef初始值10加上传入的props值1）。
3. 点击“clear”按钮，触发setValue(undefined)。
4. App组件重新渲染，value变为undefined，此时再次调用setValue(1)。按预期，这一步中AddingUp组件应该被卸载，其内部的useRef值也会被销毁。
5. 预期行为：App再次渲染后value回到1，重新渲染的AddingUp组件应使用初始的useRef值10，最终显示11。
6. 实际异常：数值会持续累加，核心原因是步骤4中value为undefined时，AddingUp组件并未被真正卸载。

可行解决方案 #

将setValue(1)的调用放入setTimeout延迟执行，代码如下：

setTimeout(() => {
  setValue(1)
}, 0)

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