title: Problem with re-renders in React with useCallback and useMemo
body: <p>I've got a fairly simple example of a component (Hello.js) that renders three components, each with a different id (Speaker.js).  I have a <code>clickFunction</code> that I pass back from the Speaker.js.  I would think that using React.memo and React.useCallback would stop all three from re-rendering when only one changes, but sadly, you can see from the console.log in Speaker.js, clicking any of the three buttons causes all three to render.</p>
  <p>Here is the problem example on stackblitz:</p>
  <p><a href="https://stackblitz.com/edit/react-dmclqm" rel="nofollow noreferrer">https://stackblitz.com/edit/react-dmclqm</a></p>
  <p><strong>Hello.js</strong></p>
  <pre><code>import React, { useCallback, useState } from &quot;react&quot;;
  
  import Speaker from &quot;./Speaker&quot;;
  
  export default () =&gt; {
    const speakersArray = [
      { name: &quot;Crockford&quot;, id: 101, favorite: true },
      { name: &quot;Gupta&quot;, id: 102, favorite: false },
      { name: &quot;Ailes&quot;, id: 103, favorite: true },
    ];
  
    const [speakers, setSpeakers] = useState(speakersArray);
  
    const clickFunction = useCallback((speakerIdClicked) =&gt; {
      var speakersArrayUpdated = speakers.map((rec) =&gt; {
        if (rec.id === speakerIdClicked) {
          rec.favorite = !rec.favorite;
        }
        return rec;
      });
      setSpeakers(speakersArrayUpdated);
    },[speakers]);
  
    return (
      &lt;div&gt;
        {speakers.map((rec) =&gt; {
          return (
            &lt;Speaker
              speaker={rec}
              key={rec.id}
              clickFunction={clickFunction}
            &gt;&lt;/Speaker&gt;
          );
        })}
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p><strong>Speaker.js</strong></p>
  <pre><code>import React from &quot;react&quot;;
  
  export default React.memo(({ speaker, clickFunction }) =&gt; {
    console.log(`speaker ${speaker.id} ${speaker.name} ${speaker.favorite}`);
    return (
      &lt;button
        onClick={() =&gt; {
          clickFunction(speaker.id);
        }}
      &gt;
        {speaker.name} {speaker.id} {speaker.favorite === true ? &quot;true&quot; : &quot;false&quot;}
      &lt;/button&gt;
    );
  });
  </code></pre>