title: Why does calling useState's setter with the same value subsequently trigger a component update even if the old state equals the new state?
body: <p>This problem occurs only if the state value was actually changed due to the previous update.</p>
  <p>In the following example, when the button is clicked for the first time, &quot;setState&quot; is called with a new value (of 12), and a component update occurs, which is understandable.</p>
  <p>When I click the same button for the second time, setting the state to the same value of 12 it causes the component to re-run (re-render), and why exactly that happens is my main question.</p>
  <p>Any subsequent setStates to the same value of 12 will not trigger a component update, which is again, understandable. 12 === 12 so no update is needed.</p>
  <p>So, why is the update happening on the second click of the button?</p>
  <pre><code>export default function App() {
    const [state, setState] = useState(0);
  
    console.log(&quot;Component updated&quot;);
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;h1&gt;Hello CodeSandbox {state}&lt;/h1&gt;
        &lt;button onClick={() =&gt; setState(12)}&gt;Button&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p><a href="https://codesandbox.io/s/ecstatic-fire-1zbhz?file=/src/App.js" rel="nofollow noreferrer">Codesandbox example</a></p>