title: Why is my component rendering when useState is called with the same state?
body: <p>I have a simple functional component with a boolean state. And buttons to change the state.</p>
  
  <p>It is initially set to <code>true</code> so when I press the true-button, it does NOT render.</p>
  
  <p>But if I press the false-button, it re-renders AND if I press false-button AGAIN, it will re-render even though the state is already set to <code>false</code>.. </p>
  
  <p>Could someone explain why the component re-renders when the state changes to the exact same state? How to prevent it from re-rendering?</p>
  
  <pre><code>import React, {useState} from 'react';
  
  const TestHooks = () =&gt; {
      const [state, setState] = useState(true);
      console.log("rendering..", state);
      return(
          &lt;div&gt;
              &lt;h1&gt;{state.toString()}&lt;/h1&gt;
  
              &lt;button onClick={() =&gt; setState(true)}&gt;true&lt;/button&gt;
  
              &lt;button onClick={() =&gt; setState(false)}&gt;false&lt;/button&gt;
          &lt;/div&gt;
      )
  }
  
  export default TestHooks;
  </code></pre>