title: How does updating state with useState hook in React work
body: <p>I understand how updating state using the <strong>useState</strong> hook in React works as follows.</p>
  
  <ol>
  <li>Compare the state value to be changed with the current state value.</li>
  <li>If the two state values are the same, do not re-render without changing the state value. </li>
  <li>If the two state values are different, change the state value and perform re-rendering.</li>
  </ol>
  
  <p><a href="https://codesandbox.io/s/nostalgic-fog-riyg4" rel="nofollow noreferrer">https://codesandbox.io/s/nostalgic-fog-riyg4</a></p>
  
  <p>But in this example, it seems to work differently.</p>
  
  <ul>
  <li>First rendering execute when App component is mounted.</li>
  <li>State value changes when button is clicked and a second rendering is executed. (Because the current state value and the state value to be changed are different.)</li>
  <li>When you click the button again, the state value does not change but rendering occurs. <strong><em>-> Why is this happening? I didn't expect rendering because the two state values were the same.</em></strong></li>
  <li>When you click the button a third time, the state value does not change again, but this time the component does not re-render. This is the behavior I expected to happen after the second click.</li>
  </ul>