title: React.useMemo does not work to prevent re-renders
body: <p>I have the following simple component:</p>
  
  <pre><code>const Dashboard = () =&gt; {
    const [{ data, loading, hasError, errors }] = useApiCall(true)
  
    if (hasError) {
      return null
    }
  
    return (
      &lt;Fragment&gt;
        &lt;ActivityFeedTitle&gt;
        &lt;ActivityFeed data={data} isLoading={loading} /&gt;
      &lt;/Fragment&gt;
    )
  }
  
  export default Dashboard
  </code></pre>
  
  <p>I would like to prevent ALL re-renders of the <code>ActivityFeedTitle</code> component, so that it only renders once, on load. My understanding is that I should be able to use the <code>React.useMemo</code> hook with an empty dependencies array to achieve this. I changed by <code>return</code> to be:</p>
  
  <pre><code>return (
      &lt;Fragment&gt;
          {React.useMemo(() =&gt; &lt;ActivityFeedTitle&gt;, [])}
          &lt;ActivityFeed data={data} isLoading={loading} /&gt;
      &lt;/Fragment&gt;
  )
  </code></pre>
  
  <p>As far as I'm concerned, this should prevent all re-renders of that component? However, the <code>ActivityFeedTitle</code> component still re-renders on every render of the <code>Dashboard</code> component.</p>
  
  <p>What am I missing?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Using <code>React.memo</code> still causes the same issue. I tried memoizing my <code>ActivityFeedTitle</code> component as follows:</p>
  
  <pre><code>const Memo = React.memo(() =&gt; (
    &lt;ActivityFeedTitle /&gt;
  ))
  </code></pre>
  
  <p>And then used it like this in my return:</p>
  
  <pre><code>return (
      &lt;Fragment&gt;
          {&lt;Memo /&gt;}
          &lt;ActivityFeed data={data} isLoading={loading} /&gt;
      &lt;/Fragment&gt;
  )
  </code></pre>
  
  <p>Same problem occurs. I also tried passing in <code>() =&gt; false</code> the following as the second argument of <code>React.memo</code>, but that also didn't work.</p>