title: What are the differences when re-rendering after state was set with Hooks compared to the class-based approach?
body: <p><strong>Class Components</strong></p>
  
  <p>In React class components, we are told that <code>setState</code> <strong>always</strong> causes a re-render, regardless of whether or not the state actually changed to a new value. In effect, a component <strong>will</strong> re-render, when state updates to the <strong>same</strong> value it was before.</p>
  
  <p><a href="https://reactjs.org/docs/react-component.html#setstate" rel="noreferrer">Docs (setState API Reference)</a>:</p>
  
  <blockquote>
    <p>setState() will always lead to a re-render unless
    shouldComponentUpdate() returns false.</p>
  </blockquote>
  
  <hr>
  
  <p><strong>Hooks (Function Components)</strong></p>
  
  <p>With hooks however, the docs specify that updating state to a value identical to the previous state, will <strong>not</strong> cause a re-render (of child components):</p>
  
  <p><a href="https://reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update" rel="noreferrer">Docs (useState API Reference)</a>:</p>
  
  <blockquote>
    <p><strong>Bailing out of a state update</strong></p>
    
    <p>If you update a State Hook to the same value as the current state,
    React will bail out without rendering the children or firing effects.
    (React uses the Object.is comparison algorithm.)</p>
  </blockquote>
  
  <hr>
  
  <p><strong>Closely Related Questions</strong></p>
  
  <ol>
  <li>Is it correct that <code>this.setState</code> in class components always cause a re-render, even when the new <code>state</code> value is identical to the previous?</li>
  <li>Is it correct that in <em>function components</em> with hooks, <code>setState</code> from <code>useState</code> only causes a re-render if the <code>state</code> value is different from the previous value?</li>
  <li>Is setting <code>state</code> with <code>this.setState</code> inside the <code>render</code> method of a <em>class component</em>, the same as setting <code>state</code> inside the function body of a <em>function component with hooks</em>?</li>
  <li>Is the following correct?
  
  <ul>
  <li>In a <em>class component</em>, if we set <code>state</code> in the <code>render</code> method an infinite loop will occur. This is because the <em>class component</em> does not care that the new <code>state</code> is the same as the previous <code>state</code>. It just keeps re-rendering on every <code>this.setState</code>.</li>
  <li>In a <em>function component with hooks</em> however, setting <code>state</code> inside the function body (which runs at re-render similarly to the <code>render</code> method in <em>class components</em>) would <strong>not</strong> be an issue, because the <em>function component</em> just bails out of re-renders when it sees that the <code>state</code> is identical to the previous <code>state</code>.</li>
  </ul></li>
  </ol>