1

I am using react+redux. I have 100000(example) ImageComponent inside a parent component let's say, ImageGrid. Functionality on every ImageComponent is, user can like, delete and select.

The problem is, when I like, delete or select any single ImageComponent, I update it's state in redux and upon every single state change, it renders the whole 100000 ImageComponent.

How to avoid this unnecessary re-rendering of those ImageComponent which has not changed?

Akash Anand
  • 23
  • 3

2 Answers2

1

You can add shouldComponentUpdate to the ImageComponent to prevent it from re-rendering if its props/state has not changed.

If your props are shallow, you can declare it as React.PureComponent. If ImageComponent is connected to Redux, then this is automatically done (no re-rendering if mapStateToProps return the same props).

You probably shouldn't be rendering 10000 components at once though. Try react-virtualized.

Also you should provide a unique and stable key for each component.

Roy Wang
  • 11,112
  • 2
  • 21
  • 42
0

shouldComponentUpdate() can be used to prevent the default rendering problem

Official doc: https://reactjs.org/docs/react-component.html#shouldcomponentupdate

Here is a post about this similar problem

Bhavya Bharti
  • 121
  • 5