score:3

Accepted answer

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.

score:0

I was in the same boat and solved my problem a different way, by implementing the shouldComponentUpdate lifecycle method in my component:

shouldComponentUpdate(nextProps) {
  // Note: lodash's "isEqual" method is useful for performing a deep comparison
  // of the given objects, which is more than JavaScript can do natively:
  return !_.isEqual(this.props.listItems, nextProps.listItems);
}

This is perhaps a better overall solution, because:

  • it's easier to implement (i.e.: don't have to wrap your existing component in a React.memo() HOC
  • it's supported even on older versions of React that don't have "memo" (i.e.: versions older than 16.6.0, which was released in 2018)

Related Query

More Query from same tag