title: Why is my component being rendered again if I pass the previous state value in the setState method?
body: <p>I am trying to understand the <code>useState</code> hook in React. When the below component renders for the first time, it prints <code>0</code>. When I click <code>Button2</code>, it prints <code>1</code>. Now, when I click <code>button1</code>, after pressing <code>button2</code>, why is the <code>App</code> component being rendered again even though I am passing the same value? However when I click the <code>button2</code> again, the component is not re-rendered again.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/babel" defer&gt;
  const {useState} = React;
  
  function App() {
    const [val, setVal] = useState(0);
    console.log(val);
    const clickHandler1 = () =&gt; {
      setVal((prevState) =&gt; prevState);
    }
    const clickHandler2 = () =&gt; {
      setVal((prevState) =&gt; prevState + 1);
    }
    return (
      &lt;div className="App"&gt;
        &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
        &lt;h2&gt;Edit to see some magic happen!&lt;/h2&gt;
        &lt;button onClick={clickHandler1}&gt;Button 1&lt;/button&gt;
        &lt;button onClick={clickHandler2}&gt;Button 2&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  
  ReactDOM.render(&lt;App /&gt;, document.body);
  
  &lt;/script&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>