1
00:00:00,000 --> 00:00:02,980
React feels slow.

2
00:00:02,980 --> 00:00:05,160
What should I measure first?

3
00:00:05,160 --> 00:00:07,360
I memoized the button.

4
00:00:07,360 --> 00:00:10,360
The server remains deeply unimpressed.

5
00:00:10,540 --> 00:00:13,400
Record the exact interaction in Chrome Performance.

6
00:00:13,400 --> 00:00:14,850
Check Network for waiting, and

7
00:00:14,850 --> 00:00:17,000
React Profiler for component rendering.

8
00:00:17,000 --> 00:00:20,100
A slow response is not automatically a slow render.

9
00:00:20,280 --> 00:00:22,900
Suppose the recording shows these independent

10
00:00:22,900 --> 00:00:24,920
requests running one after another.

11
00:00:24,920 --> 00:00:27,450
The second starts only when the first finishes.

12
00:00:27,450 --> 00:00:30,480
Memoizing a component cannot remove that wait.

13
00:00:30,660 --> 00:00:34,080
Promise dot all lets both start before awaiting the results.

14
00:00:34,080 --> 00:00:36,920
Use this only when neither request needs the other's output.

15
00:00:36,920 --> 00:00:39,740
Handle failure; it does not cancel the other request.

16
00:00:39,920 --> 00:00:42,280
Repeat the recording with the same conditions.

17
00:00:42,280 --> 00:00:45,640
If rendering dominates instead, investigate that subtree.

18
00:00:45,640 --> 00:00:47,200
Choose the fix from the evidence,

19
00:00:47,200 --> 00:00:48,520
not from your favorite hook.

20
00:00:48,700 --> 00:00:51,920
The button is now extremely efficient

21
00:00:51,920 --> 00:00:53,620
at waiting for the backend.