title: How to avoid rerendering of child component
body: <p>I have found similiar problems here on stackoverflow, but none brought me to the solution.</p>
  
  <p>I am using react 16.12.0 with Functional Components.
  I have this app:</p>
  
  <pre><code>const App: React.FC&lt;Props&gt; = (props) =&gt; {
      const [value1, setValue1] = useState&lt;number&gt;(1);
      const [value2, setValue2] = useState&lt;boolean&gt;(true);
  
      function incrementValue1(){
          setValue1(value1+1);
      }
  
      function sendToServer(){
          ...do something...
      }
  
      return (
          &lt;&gt;
              &lt;Row&gt;
                  &lt;Col&gt;
                      &lt;Child value2={value2} sendToServer={sendToServer} /&gt;
                  &lt;/Col&gt;
              &lt;/Row&gt;
              &lt;Row&gt;
                  &lt;Col&gt;
                      &lt;Button variant="outlined"
                              color="primary"
                              size="large"
                              onClick={incrementValue1}&gt;
                          Increment value1
                      &lt;/Button&gt;
                  &lt;/Col&gt;
              &lt;/Row&gt;
          &lt;/&gt;
      );
  };
  
  export default App;
  </code></pre>
  
  <p>Although the parent is changing a value, which is not in the interest of the child component, the child component does rerender every time when the parent component renders.</p>
  
  <p>I read about memo and could incorporate any component into a memo and use the second parameter of memo to tell react when to render. But I'm not sure if that's right. And before I am rewriting a lot of classes I would like to know which way is the correct one.
  For example:</p>
  
  <pre><code>const Child: React.FC&lt;Props&gt; = React.memo(props) =&gt; {
      ...Logic from child component...
  },[props.value2])
  </code></pre>
  
  <p>What is the correct way to go?</p>