调用setState未改变状态时，React组件为何重渲染两次？

我原本认为，当调用setState但实际未改变组件状态时，React的协调阶段会识别到状态无变化，不会触发组件重渲染。但我禁用StrictMode后做了如下测试：

function App() {
  const [isDisplayed, setIsDisplayed] = useState(false);
  console.log("hello");
  return (
    <div>
      <button onClick={() => setIsDisplayed(true)}>Show</button>
      <button onClick={() => setIsDisplayed(false)}>Hide</button>
      {isDisplayed && <TestComponent />}
    </div>
  );
}

function TestComponent() {
  return <div>You can see me!</div>;
}

交互后的控制台输出流程：

• 初始渲染：控制台输出'hello'
• 第一次点击Show按钮：组件重渲染，输出'hello'
• 第二次点击Show按钮：组件再次重渲染，输出'hello'
• 第三次及之后点击Show按钮：控制台无输出

请问为何组件会恰好重渲染两次？

原因解析 #

这是React内部优化策略的表现：

1. 状态更新的队列处理逻辑：当你调用setIsDisplayed(true)时，React会先将这次更新加入更新队列。即使新状态和当前状态浅相等，第一次触发重复更新时，React不会直接跳过更新流程——它会先标记组件需要重新渲染，进入协调阶段后才会对比状态是否变化，这个过程会触发一次渲染。
2. 重复更新的缓存优化：在第二次触发相同的状态更新后，React会记录这次重复操作的特征（相同的状态值、相同的触发场景），后续再收到完全一致的更新请求时，就会直接跳过渲染流程，避免无意义的计算开销。

简单来说，第一次重复点击时，“重复更新跳过”的优化机制还未触发，所以会走一次完整的渲染流程；从第三次点击开始，该优化生效，就不会再触发重渲染了。

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