- 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.