设置相同State值后React组件重渲染异常原因咨询

先看对应的组件代码：

import { useState } from "react";

export default function App() {
  const [buttonClicked, setButtonClicked] = useState(false);

  console.log('Render');

  return (
    <div className="App">
      <button onClick={() => setButtonClicked(true)}>Click me</button>
      {buttonClicked && <div>Button was clicked</div>}
    </div>
  );
}

你观察到的现象是：非StrictMode下，初始渲染打印1次Render；第一次点击按钮（将state设为true）触发重渲染，打印第2次；第二次点击按钮（仍设为true）居然也触发重渲染，打印第3次；第三次及之后点击则不再触发。

原因解释 #

React确实会通过对比新老state值来决定是否跳过重渲染，但这个判断逻辑并非在所有场景下都会立刻生效：

• 第一次点击按钮时，state从false变为true，值发生明确变化，必然触发重渲染。
• 第二次点击时，你传入的新值和当前state值相同，但此时React会先启动一次渲染流程，在渲染过程中才会确认state没有变化。这次渲染结束后，React会记住这个状态的"稳定"值，后续再调用相同值的setState时，就会直接跳过重渲染——这就是第三次及之后点击不再触发的原因。
• 这种"额外"的渲染是React内部优化机制的过渡阶段，目的是确保状态处理的一致性，避免过早跳过渲染导致潜在问题。

简单来说：React对于相同值的state更新，不会在第一次重复调用时就直接跳过，而是会先执行一次渲染确认，之后才会应用跳过逻辑。

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