How to handle the render of a large list of items in react?

Question

I have a large list of items to render and list data get updated in realtime with socket-io. How to handle performance issues? it gets updated heavily and table of items rendered so many times.

Answer 1

There are a couple of things to consider:

1. render cost of a large list
2. updating an item

For #1 you can try using a windowing library such as react-virtualized, this will make the burden on the DOM much lighter, instead of rendering thousands of items, you will actually be rendering only a few tens.

For #2 make sure that when an item updates, only that items updates and not the list. You can use memo to ensure your list items are only renders again when their props change.