1
00:00:00,000 --> 00:00:03,750
Should I use Context or useReducer?

2
00:00:03,750 --> 00:00:06,210
My counter has two buttons and

3
00:00:06,210 --> 00:00:08,600
already wants an architecture diagram.

4
00:00:08,780 --> 00:00:10,660
They solve different problems.

5
00:00:10,660 --> 00:00:12,840
A reducer calculates the next state

6
00:00:12,840 --> 00:00:14,880
from the current state and an action.

7
00:00:14,880 --> 00:00:17,940
Context makes a value available to descendants.

8
00:00:18,120 --> 00:00:20,880
This reducer adds one for an add action.

9
00:00:20,880 --> 00:00:23,560
Dispatching that action changes zero to one.

10
00:00:23,560 --> 00:00:26,840
The reducer belongs to useReducer, not to Context.

11
00:00:27,020 --> 00:00:28,960
The provider passes the count down.

12
00:00:28,960 --> 00:00:31,340
A descendant reads it with useContext.

13
00:00:31,340 --> 00:00:33,820
Dispatch can travel through another context,

14
00:00:33,820 --> 00:00:35,420
or just through a button prop.

15
00:00:35,600 --> 00:00:38,300
For a simple counter, useState is enough.

16
00:00:38,300 --> 00:00:41,540
A reducer helps organize richer transitions.

17
00:00:41,540 --> 00:00:43,060
Add Context only when

18
00:00:43,060 --> 00:00:46,240
passing values down becomes inconvenient.

19
00:00:46,420 --> 00:00:50,180
The counter now has a transport department.

20
00:00:50,180 --> 00:00:53,260
Still cannot count past the budget.