title: Will React children update DOM when its parent rerender
body: <p>i'm a bit confused with how React re-render.</p>
  <pre><code>const Parent = () =&gt; {
    const [ value, setValue ] = useState(0);
  
    return (
  
  &lt;div&gt;
   &lt;Child&gt;&lt;/Child&gt;
   &lt;button onClick={() =&gt;setValue(value =&gt; value + 1)}&gt;Set Value &lt;/button&gt;
  &lt;/div&gt;
  
  }
  
  const Child = () =&gt; { 
     console.log('child rerender');
  return (&lt;div&gt;Children&lt;/div&gt;); 
  }
  </code></pre>
  <p>so basically, when i click the button in Parent, the Parent re-render which lead to the rerender of Child component, and the console log <code>chid rerender</code>.</p>
  <p>So my question is will <code>the rerender of Child Component</code> only means re-run the JS part (<code>console.log('child rerender')</code>), and the DOM of Child will stay the same ( without any DOM repaint and reflow) ? Or it actually unmount the Child and mount it again to DOM tree, even though its DOM content stay the same.</p>
  <p>Thanks</p>