React useState特定场景内存泄漏现象排查及原理问询

直接存重复大字符串泄漏、包装为对象/调整字符串生成逻辑不泄漏的原因 #

该现象由React的状态更新逻辑和JS运行时的内存回收机制共同导致：

1. 纯大字符串版本泄漏的核心原因：你每次生成的全*字符串内容完全一致，新旧状态通过===比较结果为相等，React会判定无需更新状态、跳过重渲染。但你调用setState时已经生成了大字符串，这个字符串会被临时存入React的更新队列，开发模式下React为了支持调试回溯不会主动清理历史更新队列，导致每次点击生成的100MB字符串都被队列引用，无法被垃圾回收，最终内存溢出。
2. 包装为对象的版本无泄漏的原因：每次提交的状态是全新的对象引用，新旧对象===比较结果为不相等，React会直接用新对象替换旧状态，旧对象在状态替换完成后没有任何引用链，会被垃圾回收器直接清理，对象持有的大字符串也会同步释放，所以不会出现内存累积。
3. 加递增前缀的版本无持续泄漏的原因：每次生成的字符串前缀不同，新旧状态===比较结果为不相等，React会正常更新状态，旧字符串没有额外引用会被正常回收。前11次没有观测到明显内存占用是因为V8的新生代内存区还未达到GC阈值，第12次触发Minor GC后旧内存被清理，后续只会保留最近1-2次状态对应的内存占用。

NonLeaker组件观测不到大内存分配的原因 #

属于JS引擎的正常内存优化：你生成的大字符串仅被当前新创建的对象持有，状态更新完成后如果没有其他代码引用旧对象，会被V8的增量垃圾回收器快速回收。你抓取内存快照时旧的大字符串已经被清理，所以观测不到对应的内存占用。如果需要验证，可以在状态更新后加10秒左右的延迟，延迟期间抓取内存快照就能看到对应的100MB内存占用。

无需阅读React源码的参考方向 #

你可以从两个公开的技术方向找到对应解释：

1. Chrome V8、火狐SpiderMonkey等主流JS引擎公开的内存回收、字符串存储规则说明
2. React官方文档中关于useState状态更新的比较逻辑、开发模式调试特性的相关说明

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