1
00:00:00,000 --> 00:00:04,460
Why does my Zustand counter render when the theme changes?

2
00:00:04,460 --> 00:00:07,400
It does not even have an opinion about dark mode.

3
00:00:07,580 --> 00:00:09,420
Calling the hook without a selector

4
00:00:09,420 --> 00:00:11,120
subscribes to the whole state.

5
00:00:11,120 --> 00:00:14,400
Destructuring afterward does not narrow that subscription.

6
00:00:14,400 --> 00:00:17,020
The theme update creates a new state object.

7
00:00:17,200 --> 00:00:19,320
Select count inside the hook.

8
00:00:19,320 --> 00:00:22,000
When only theme changes, count is still the same number,

9
00:00:22,000 --> 00:00:24,920
so that store update does not trigger this component's render.

10
00:00:25,100 --> 00:00:27,970
Use separate selectors, or useShallow for

11
00:00:27,970 --> 00:00:29,750
an object of selected values.

12
00:00:29,750 --> 00:00:31,400
It reuses the previous result when

13
00:00:31,400 --> 00:00:33,540
its top-level values are unchanged.

14
00:00:33,720 --> 00:00:36,960
Shallow comparison is not a deep comparison.

15
00:00:36,960 --> 00:00:38,760
Update state immutably.

16
00:00:38,760 --> 00:00:41,070
Parent renders can still happen, so measure

17
00:00:41,070 --> 00:00:44,000
the actual cause before adding more optimization.

18
00:00:44,180 --> 00:00:47,920
I subscribed to everything.

19
00:00:47,920 --> 00:00:51,820
Apparently the counter is on the all-staff mailing list.