0

enter image description here

  • Above is the basic structure of the react page that i'am working on. There will be a api call to fetch the data once someone picked a date from datepicker.
  • Initially the data is empty since there is no date selected.
  • Once somebody select a date, data will be fetched and rendered the parent and child components, This rendering is happening bit fast, I think that's because of the initial data is empty.
  • At this point, (parent component and around 3000 child components already rendered) If somebody change the date from the date picker, there will be a api call to fetch the data, and then the rendering is extremely slow (It took around 3-4 secs to render).

It looks like once the new dataset comes, parent component will get updated and react will unmount the old child-components in my case it's around 3000. I think unmounting the children cost this.

This time lag is hit on the application performance so bad, And i'am looking for a solution to improve the performance.

1
  • 3
    Any code? Examples? Why would a single parent cause so many children to render? Maybe your design is lacking, with such a broad question the only thing one can suggest is to read the docs: reactjs.org/docs/optimizing-performance.html Aug 24, 2019 at 19:16

1 Answer 1

1

The easiest way is to make the children instances of PureComponent so they won't update unless their attributes change, or implementing shouldComponentUpdate() if you need custom behavior. See https://reactjs.org/docs/optimizing-performance.html#avoid-reconciliation for more tips.

Not the answer you're looking for? Browse other questions tagged or ask your own question.