title: How to avoid re-render of children components
body: <p>I have a rendering problem that I can't fix.
  On my application, I have a <code>Posts</code> component that has a state containing an array of posts data.</p>
  <pre><code>[
    { id: &quot;P01&quot;, title: &quot;First post&quot;, likeCount: 0 },
    { id: &quot;P02&quot;, title: &quot;Second post&quot;, likeCount: 0 }
  ]
  </code></pre>
  <p>In this component, I map the <code>posts</code> state to return a <code>Post</code> component for each post inside the posts state.</p>
  <p>Posts component</p>
  <pre><code>export default function Posts() {
    const [posts, setPosts] = useState(null);
  
    const fetchPosts = () =&gt; {
      setPosts([
        { id: &quot;P01&quot;, title: &quot;First post&quot;, likeCount: 0 },
        { id: &quot;P02&quot;, title: &quot;Second post&quot;, likeCount: 0 }
      ]);
    };
  
    const handleLike = (id) =&gt; {
      setPosts(
        posts.map((post) =&gt;
          post.id === id ? { ...post, likeCount: post.likeCount + 1 } : post
        )
      );
    };
  
    return (
      &lt;div&gt;
        &lt;button onClick={fetchPosts}&gt;Fetch posts&lt;/button&gt;
        {posts !== null ? (
          posts.map((post, index) =&gt; {
            return &lt;Post key={index} post={post} handleLike={handleLike} /&gt;;
          })
        ) : (
          &lt;p&gt;No post to dipslay&lt;/p&gt;
        )}
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>Post component</p>
  <pre><code>function Post({ post, handleLike }) {
    console.count(&quot;Renders for: &quot; + post.id);
    return (
      &lt;div&gt;
        &lt;h1&gt;{post.title}&lt;/h1&gt;
        &lt;p&gt;Like count: {post.likeCount}&lt;/p&gt;
        &lt;button onClick={() =&gt; handleLike(post.id)}&gt;Like&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  
  
  export default React.memo(Post);
  </code></pre>
  <p>The problem is that, whenever I like a <code>Post</code>, all the other <code>Post</code> components re-render.
  I added a <code>console.count()</code> on the children component <code>Post</code> to show this in action (see below for the sandbox link).
  Because of that, I have a performance issue because, on my appplication, I have a lot of posts to display with a lot of children components.</p>
  <p>I tried to wrap the <code>Post</code> component using <code>React.memo</code> but it is still re-rendering the component because the <code>handleLike</code> function passed as props to the component also changed when <code>Posts</code> re-rendered.
  Maybe it is possible to avoid this rendering problem using the <code>useMemo / useCallback</code> hooks, but I'm not familiar with those and i can't get them to work as I want to.</p>
  <p>What are my options here?</p>
  <p>You can find a simplified demo code here: <a href="https://codesandbox.io/s/re-render-issue-esm01" rel="nofollow noreferrer">https://codesandbox.io/s/re-render-issue-esm01</a></p>