React-Virtualized: How can I insert/remove a row without re-rendering the rows beneath it?

Question

I have a virtualized list of expensive Components. Occasionally, the list will mutate but it will force a re-render of the rows that have shifted either up or down one position.

For example, if there are 5 visible rows and I insert a new row at index 3, the component that was in row 3 unmounts and then remounts in row 4.

How can I prevent that unmount and re-render?

Answer 1

As you know, the rowRenderer function gives out a 'key' prop. DO NOT use that key value and use your own key (for example the item ID). This will reduce your re-renders.