0

I am currently using React Profiler to try and diagnose why the load times on my application are so long. When doing this, I saw that my PivotBody component was taking a long time to load:

Image of Flame Chart

1

The load time says 1580 ms, which is a very long time. In my application this component is a grid that is 100x100 in size, where each cell in the grid is a div with some styling (basic borders, background color, etc...). Each of these divs are rendered in another React component that return just the singular div.

What is strange to me is that according to this flame chart, the PivotBody component has no children that have long render times. If this is the case, why is it taking so long to render? A 100x100 grid is not too unreasonable and should not take this much time.

I guess my question is, what does it mean that this component has no children with long render time but still takes a long time to render?

Thanks!

vimuth
  • 5,064
  • 33
  • 79
  • 116
user19348133
  • 11
  • 2
  • `this component has no children with long render time` --> what is the avg. rendering time for a child component aka div in `PivotBody` component? – Pavindu Aug 12 '22 at 05:26
  • I think the render time for each div is most `< 0.1ms` with some taking longer than others? None of them take longer than `0.1ms` though. – user19348133 Aug 12 '22 at 06:32
  • okay..so you render 100 x 100 divs i.e. 10000 divs with 0.1ms loading time for each. Then the total load time would be 0.1ms x 10000 = 1000ms , which is near to 1580ms and not surprising at all. – Pavindu Aug 12 '22 at 06:35
  • You can try lazy loading the PivotBody, so that only the divs in the screen viewport would be rendering and the rest will be rendered on demand. – Pavindu Aug 12 '22 at 06:36

0 Answers0