title: React memo components and re-render when passing function as props
body: <p>Suppose I have these React components:</p>
  
  <pre><code>const Compo1 = ({theName}) =&gt; {
    return (
      &lt;Nested foo={() =&gt; console.log('Dr. ' + theName)}/&gt;
    );
  };
  
  const Compo2 = ({theName}) =&gt; {
    function theFoo() {
      console.log('Dr. ' + theName);
    }
    return (
      &lt;Nested foo={theFoo}/&gt;
    );
  };
  </code></pre>
  
  <p>And the nested component, wrapped in <a href="https://reactjs.org/docs/react-api.html#reactmemo" rel="noreferrer"><code>memo</code></a>:</p>
  
  <pre><code>const Nested = React.memo(({foo}) =&gt; {
    return (
      &lt;Button onClick={foo}&gt;Click me&lt;/Button&gt;
    );
  });
  </code></pre>
  
  <p>Function passed in <code>foo</code> is <a href="https://stackoverflow.com/q/10204420">always recreated</a> in <code>Compo1</code> and also <code>Compo2</code>, correct?</p>
  
  <p>If so, since <code>foo</code> receives a new function every time, does it mean <code>memo</code> will be useless, thus <code>Nested</code> will always be re-rendered?</p>