title: React.memo isn't working - what am I missing?
body: <p>I'm in the process of refactoring some of our components so I'm trying to incorporate memoization as some components <strong>may</strong> re-render with the same values (for example, hotlinked image URLs unless they are the same).</p>
  
  <p>I have a simple component:</p>
  
  <pre><code>const CardHeader = props =&gt; {
      // img is a stringand showAvatar is a boolean but it's always true
      const { ..., showAvatar, img } = props;
  
      return (
          &lt;CardHeader&gt;
              &lt;ListItem&gt;
                  // AvatarImage shouldn't re-render if img is the same as previous
                  {showAvatar &amp;&amp; &lt;AvatarImage img={img} /&gt;
              &lt;/ListItem&gt;
          &lt;/CardHeader&gt;
      );
  }
  </code></pre>
  
  <p>And then the <strong>AvatarImage</strong>:</p>
  
  <pre><code>const AvatarImage = React.memo(props =&gt; {
     console.log("why is this still re-rendering when the img value hasn't changed?");
     const { img } = props;
  
     return (
          &lt;ListItemAvatar&gt;
              {img ?
                  &lt;Avatar src={img} /&gt;    
                  :
                  &lt;Avatar&gt;
                      Some initials
                  &lt;/Avatar&gt;
              }
          &lt;/ListItemAvatar&gt;
      );
  });
  </code></pre>
  
  <p>I have also tried passing in second argument of memo:</p>
  
  <pre><code>(prevProps, nextProps) =&gt; {
      return true; // Don't re-render!
  }
  </code></pre>
  
  <p>But the console.log still shows every time. I'm obviously missing something here or don't quite understand how this works. This component is a few levels down, but it passes in the img if it's available every time so I'd expect it to know that if the img was passed in the previous render and it's the same it knows not to re-render it again but for some reason it does?</p>
  
  <p>Thanks all. It's much appreciated.</p>