title: React useCallback hook for map rendering
body: <p>When passing callback to component, I should use <code>useCallback</code> hook to return a memoized callback (to prevent unneeded renders):</p>
  
  <pre><code>import doSomething from "./doSomething";
  const FrequentlyRerenders = ({ id }) =&gt; {
    const onEvent = useCallback(() =&gt; doSomething(id), [id]);
    return (
      &lt;ExpensiveComponent onEvent={ onEvent } /&gt;
    );
  };
  </code></pre>
  
  <p>But what if I am using map? for example:</p>
  
  <pre><code>import doSomething from "./doSomething";
  const FrequentlyRerendersMap = ({ ids }) =&gt; {
    return ids.map(id =&gt; {
      const onEvent = useCallback(() =&gt; doSomething(id), [id]);
      return (
        &lt;ExpensiveComponent key={id} onEvent={ onEvent } /&gt;
      );
    });
  };
  </code></pre>
  
  <p>How should I properly use <code>useCallback</code>? Is the above the right way to pass multiple callbacks? Is it really works and know to memioze every callback according to an item of an array?</p>