React JS中旧State的内存垃圾回收机制是怎样的？

核心原理 #

React本身并不负责内存回收，旧State的内存释放完全由**JavaScript垃圾回收器（GC）**处理：

• 当你调用setMyState([])更新状态后，只要旧的数组不再被任何代码（包括React内部）持有引用，GC就会自动将其标记为可回收对象，在合适的时机释放内存。
• React仅在更新流程的必要阶段（比如并发更新中的中断回滚场景）暂时保留旧State的引用，一旦更新完成并完成渲染，这些内部引用会被清除，旧State就会变成无引用状态，等待GC回收。

针对你的代码示例分析 #

在你提供的代码里：

export default function App() {
  const arr = Array.from({ length: 5 }, () => Math.floor(Math.random() * 5));
  const [myState, setMyState] = useState(arr);
  const handleClick = () => {
    setMyState([]);
    // 旧数组的内存会被自动回收吗？
  };

  return (
    <div className="App">
      <button onClick={() => handleClick()}>Clear Array</button>
    </div>
  );
}

点击按钮设置新的空数组后，React在完成组件重新渲染后，就会不再持有旧数组的引用。此时这个旧数组没有任何其他引用链，GC会自动回收它占用的内存，不需要你手动做任何操作。

常见误区纠正 #

• 不需要手动释放普通数据（数组、对象、基本类型）的内存，JavaScript的自动GC已经足够处理这类场景，手动干预反而可能引发内存泄漏或其他问题。
• 只有当State中包含需要手动销毁的资源（比如DOM元素、WebSocket连接、定时器、Canvas上下文等）时，才需要在组件的useEffect清理函数或状态更新时手动销毁这些资源，避免内存泄漏。

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