title: React: How to prevent re-rendering child components in `map`?
body: <p>I tried to boil down the problem into an example as simple as possible:</p>
  
  <p>We have a list of child components, each called <code>NumChoice</code>, each representing a number. <code>NumChoice</code> is wrapped in <code>React.memo</code>. In the parent component, we have an array of booleans, <code>choices</code>, each corresponding to one of the child components <code>NumChoice</code>. At first, all the elements of <code>choices</code> are <code>false</code>. To render the child components, we iterate through <code>choices</code>, and for each choice, generate the corresponding child component <code>NumChoice</code>. We define a function <code>chooseDivisibles</code> in the parent component, using <code>useCallback</code> that is called from each child component <code>NumChoice</code>. <code>chooseDivisibles</code> takes the index of the <code>NumChoice</code> who called it and changes the corresponding element of <code>choices</code> to <code>true</code>. Each <code>NumChoice</code> has a "red" background color if its corresponding element in <code>choices</code> is <code>true</code>, otherwise, its background color is "white".</p>
  
  <p>The complete code is available at:
  <a href="https://codesandbox.io/s/react-rerender-l4e3c?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="noreferrer">https://codesandbox.io/s/react-rerender-l4e3c?fontsize=14&amp;hidenavigation=1&amp;theme=dark</a></p>
  
  <p>Wrapping <code>NumChoice</code> in <code>React.memo</code> and <code>chooseDivisibles</code> in <code>useCallback</code>, we expected to only rerender <code>NumChoice</code> components whose corresponding element of <code>choices</code> changes but React re-renders them all. <code>chooseDivisibles</code> is wrapped in <code>useCallback</code>, which lists no dependency other than <code>setChoices</code>. Also, <code>NumChoice</code> is wrapped in <code>React.memo</code> and it should only rerender if the specified props change, but they do not, and changing <code>choices</code> should not have any effect on rerendering <code>NumChoice</code>. If we exclude checking the equality of <code>chooseDivisibles</code> in previous and next props, it works as expected, but I argue that the comparison of previous and next <code>chooseDivisibles</code> should not affect rerendering <code>NumChoice</code> because it is wrapped in <code>useCallback</code>and does not depend on <code>choices</code>. How can we prevent re-rendering the <code>NumChoice</code> components whose <code>props</code> are not changed?</p>