Render only new elements when adding them to an array?

Question

React

When implementing infinity scroll, new products are loaded from the server, and the question is how to cancel the re-render of those components that were already in the array, and render only the newly added elements.
The fact is that if simple components are drawn from the array, then this is not difficult and quickly, but if product cards of which there are already 300 pieces are drawn and when new 20 are added to the array, the old 300 are also redrawn.
Sandbox for example https://codesandbox.io/s/sad-khayyam-lskxj?file=/s...

Answer 1

Have you heard about shouldComponentUpdate ?) Just add it to your item-components
Or React.memo for functional components
But in general, if you have components in a loop, and not just div-blocks, then there will be no rerender with the same props. It's just that it's not necessary to check it in the map in the console, but inside the item-component itself. map must iterate over all elements anyway

Answer 2

key={elem * Math.random()}

when adding new 20 to the array, the old 300 are also redrawn

no words