1
00:00:00,000 --> 00:00:03,560
Why does React Profiler look fast

2
00:00:03,560 --> 00:00:06,320
while the page feels slow?

3
00:00:06,320 --> 00:00:08,680
The chart says everything is fine.

4
00:00:08,680 --> 00:00:10,280
The mouse disagrees.

5
00:00:10,460 --> 00:00:13,480
React Profiler measures component rendering.

6
00:00:13,480 --> 00:00:15,250
Chrome Performance shows main-thread

7
00:00:15,250 --> 00:00:17,253
tasks, layout and paint too.

8
00:00:17,253 --> 00:00:19,240
Time spent in a click handler

9
00:00:19,240 --> 00:00:20,500
is not the same as render time.

10
00:00:20,680 --> 00:00:23,560
Wrap the relevant subtree in Profiler.

11
00:00:23,560 --> 00:00:26,310
Its callback gives actualDuration: time rendering

12
00:00:26,310 --> 00:00:28,040
that subtree for this update.

13
00:00:28,040 --> 00:00:29,560
It is not the total time

14
00:00:29,560 --> 00:00:31,320
from click to visible result.

15
00:00:31,500 --> 00:00:33,840
Mark around the expensive calculation and

16
00:00:33,840 --> 00:00:35,560
record the same click in Chrome.

17
00:00:35,560 --> 00:00:38,520
This measure covers the calculation, not the later paint.

18
00:00:38,520 --> 00:00:40,300
Now you can locate the missing time.

19
00:00:40,480 --> 00:00:44,240
If the handler dominates, optimize or move that calculation.

20
00:00:44,240 --> 00:00:45,790
If React rendering dominates,

21
00:00:45,790 --> 00:00:47,560
investigate the component tree.

22
00:00:47,560 --> 00:00:49,650
Compare equivalent runs; development

23
00:00:49,650 --> 00:00:50,680
profiling adds overhead.

24
00:00:50,860 --> 00:00:53,060
The chart cleared React.

25
00:00:53,060 --> 00:00:58,220
The expensive function has requested legal representation.