title: How to avoid unnecessary re-render of a component in React?
body: <p>I have this case:</p>
  <pre><code>const Parent = () =&gt; {
    
    const [value, setValue] = useState('');
    
    return &lt;&gt;
      &lt;Child1 value={value} /&gt;
      &lt;Child2 setValue={setValue} /&gt;
      &lt;/&gt;
    
  }
  </code></pre>
  <p>but every time <code>setValue</code> of <code>Child2</code> is getting called, <code>Child2</code> re-renders although its props have not been changed (Child1 re-renders also, but this is the expected behavior since prop <code>value</code> changed).</p>
  <p>How to fix this ?</p>