1
00:00:01,230 --> 00:00:02,820
‫To finish this section,

2
00:00:02,820 --> 00:00:04,620
‫let's review what we learned

3
00:00:04,620 --> 00:00:08,670
‫about useReducer by comparing it with useState

4
00:00:08,670 --> 00:00:10,920
‫both in terms of how they work

5
00:00:10,920 --> 00:00:13,743
‫and when we should use each of them.

6
00:00:14,660 --> 00:00:17,160
‫So as we already know,

7
00:00:17,160 --> 00:00:20,460
‫useState is ideal for single pieces

8
00:00:20,460 --> 00:00:23,910
‫of state that are independent from each other.

9
00:00:23,910 --> 00:00:26,280
‫So things like numbers, strings

10
00:00:26,280 --> 00:00:30,150
‫and also arrays or simple objects.

11
00:00:30,150 --> 00:00:31,860
‫On the other hand, we reach

12
00:00:31,860 --> 00:00:33,930
‫for useReducer when we have

13
00:00:33,930 --> 00:00:35,790
‫multiple pieces of state

14
00:00:35,790 --> 00:00:39,450
‫that are related and dependent on each other

15
00:00:39,450 --> 00:00:44,040
‫or when we have some really complex state on our hand.

16
00:00:44,040 --> 00:00:46,230
‫Now, when we have a few states

17
00:00:46,230 --> 00:00:48,450
‫with useState the logic

18
00:00:48,450 --> 00:00:50,490
‫to update that state

19
00:00:50,490 --> 00:00:53,550
‫is usually placed right into event handlers

20
00:00:53,550 --> 00:00:54,930
‫or effects.

21
00:00:54,930 --> 00:00:57,180
‫And these might be spread all

22
00:00:57,180 --> 00:00:58,530
‫over the component

23
00:00:58,530 --> 00:01:01,006
‫or even located in child components

24
00:01:01,006 --> 00:01:03,780
‫if we're using lifted state.

25
00:01:03,780 --> 00:01:06,600
‫And that's where one of the big advantages

26
00:01:06,600 --> 00:01:09,300
‫of useReduce comes into play

27
00:01:09,300 --> 00:01:11,130
‫because with useReduce

28
00:01:11,130 --> 00:01:14,160
‫we centralize all state updating logic

29
00:01:14,160 --> 00:01:15,750
‫in one place

30
00:01:15,750 --> 00:01:18,360
‫which is the reducer function.

31
00:01:18,360 --> 00:01:19,530
‫And with this

32
00:01:19,530 --> 00:01:22,290
‫all that logic is nicely decoupled

33
00:01:22,290 --> 00:01:23,785
‫from the components.

34
00:01:23,785 --> 00:01:24,618
‫Then whenever we need

35
00:01:24,618 --> 00:01:25,959
‫to update the state

36
00:01:25,959 --> 00:01:30,510
‫we just dispatch an action to the reducer,

37
00:01:30,510 --> 00:01:31,800
‫which knows exactly

38
00:01:31,800 --> 00:01:33,482
‫how to perform state updates

39
00:01:33,482 --> 00:01:36,030
‫for different actions.

40
00:01:36,030 --> 00:01:37,958
‫So essentially reducers

41
00:01:37,958 --> 00:01:40,631
‫map state transitions to actions

42
00:01:40,631 --> 00:01:42,810
‫with well-defined names,

43
00:01:42,810 --> 00:01:46,050
‫which makes them a lot more declarative.

44
00:01:46,050 --> 00:01:48,210
‫And going back to the game example

45
00:01:48,210 --> 00:01:49,310
‫from the first lecture

46
00:01:49,310 --> 00:01:52,020
‫instead of setting three separate states

47
00:01:52,020 --> 00:01:54,232
‫like these in order to start a game,

48
00:01:54,232 --> 00:01:56,311
‫we can just dispatch the action

49
00:01:56,311 --> 00:01:58,800
‫startGame and the reducer

50
00:01:58,800 --> 00:02:01,200
‫will then take care of the rest.

51
00:02:01,200 --> 00:02:03,766
‫And this really is an amazing pattern.

52
00:02:03,766 --> 00:02:06,116
‫The only downside of this approach

53
00:02:06,116 --> 00:02:07,546
‫is that it can be

54
00:02:07,546 --> 00:02:09,610
‫a bit more difficult to understand

55
00:02:09,610 --> 00:02:11,221
‫and to implement.

56
00:02:11,221 --> 00:02:12,864
‫It can take a bit more time,

57
00:02:12,864 --> 00:02:15,183
‫but that might be worth it.

58
00:02:15,183 --> 00:02:18,413
‫Now just finishing our comparison here,

59
00:02:18,413 --> 00:02:20,407
‫with useState of course

60
00:02:20,407 --> 00:02:23,559
‫we do not dispatch any actions.

61
00:02:23,559 --> 00:02:26,850
‫All we do is direct the updating state

62
00:02:26,850 --> 00:02:29,280
‫by calling the setState function,

63
00:02:29,280 --> 00:02:30,390
‫which leaves us

64
00:02:30,390 --> 00:02:33,648
‫with state updates that feel a lot more imperative

65
00:02:33,648 --> 00:02:37,050
‫when compared to dispatching an action.

66
00:02:37,050 --> 00:02:38,313
‫But on the bright side,

67
00:02:38,313 --> 00:02:40,800
‫this of course is a lot easier

68
00:02:40,800 --> 00:02:42,526
‫to understand and to use

69
00:02:42,526 --> 00:02:44,070
‫because we don't have to

70
00:02:44,070 --> 00:02:46,124
‫write any reducer function.

71
00:02:46,124 --> 00:02:47,602
‫And most of the time

72
00:02:47,602 --> 00:02:49,450
‫this is completely fine.

73
00:02:49,450 --> 00:02:51,148
‫And so then useState

74
00:02:51,148 --> 00:02:52,446
‫is the way to go

75
00:02:52,446 --> 00:02:54,390
‫and that this actually

76
00:02:54,390 --> 00:02:57,505
‫brings us to our next and final slide

77
00:02:57,505 --> 00:03:00,805
‫where I'm now gonna give you a simple framework

78
00:03:00,805 --> 00:03:05,460
‫for deciding between useState and useReducer

79
00:03:05,460 --> 00:03:08,798
‫whenever you need to add state to a component.

80
00:03:08,798 --> 00:03:12,918
‫So the first and most obvious question to ask ourselves

81
00:03:12,918 --> 00:03:17,040
‫is whether we only need one piece of state.

82
00:03:17,040 --> 00:03:17,999
‫If that's the case,

83
00:03:17,999 --> 00:03:20,850
‫then the answer is very simple.

84
00:03:20,850 --> 00:03:24,577
‫We just use one useState hook and call it a day.

85
00:03:24,577 --> 00:03:26,549
‫Now, if we do need more

86
00:03:26,549 --> 00:03:28,526
‫than just one piece of state

87
00:03:28,526 --> 00:03:30,045
‫the next question to ask

88
00:03:30,045 --> 00:03:34,555
‫is do my states frequently need to be updated together?

89
00:03:34,555 --> 00:03:38,073
‫So just like in that game example from earlier.

90
00:03:38,073 --> 00:03:40,755
‫And if the answer is yes

91
00:03:40,755 --> 00:03:42,799
‫then we might have a good use case

92
00:03:42,799 --> 00:03:45,002
‫for a useReducer.

93
00:03:45,002 --> 00:03:47,887
‫However, there's probably one more question

94
00:03:47,887 --> 00:03:49,863
‫that we need to ask first.

95
00:03:49,863 --> 00:03:52,798
‫Are we willing to actually write a slightly

96
00:03:52,798 --> 00:03:55,085
‫more complex useReducer hook

97
00:03:55,085 --> 00:03:56,845
‫with a reducer function?

98
00:03:56,845 --> 00:03:58,971
‫And if we are not

99
00:03:58,971 --> 00:04:00,713
‫then we just keep using

100
00:04:00,713 --> 00:04:02,280
‫the useState hook.

101
00:04:02,280 --> 00:04:04,048
‫But if we are okay with

102
00:04:04,048 --> 00:04:06,451
‫taking the time to write a reducer

103
00:04:06,451 --> 00:04:09,278
‫then this is definitely a good use case

104
00:04:09,278 --> 00:04:12,049
‫for useReducer.

105
00:04:12,049 --> 00:04:15,630
‫Nice. So let's keep going.

106
00:04:15,630 --> 00:04:18,502
‫If our state does not update frequently together

107
00:04:18,502 --> 00:04:20,956
‫then the next step is to figure out

108
00:04:20,956 --> 00:04:24,055
‫whether we need more than three or four pieces

109
00:04:24,055 --> 00:04:26,250
‫of related state

110
00:04:26,250 --> 00:04:29,805
‫and whether that state even includes some objects.

111
00:04:29,805 --> 00:04:31,438
‫So this is what we can call

112
00:04:31,438 --> 00:04:33,600
‫complex state.

113
00:04:33,600 --> 00:04:34,620
‫So in this case

114
00:04:34,620 --> 00:04:38,050
‫and if we're willing to actually write a reducer

115
00:04:38,050 --> 00:04:42,349
‫then useReducer is again the way to go.

116
00:04:42,349 --> 00:04:45,060
‫Finally, our state might actually

117
00:04:45,060 --> 00:04:46,950
‫not be that complex

118
00:04:46,950 --> 00:04:48,930
‫but we still feel like we have

119
00:04:48,930 --> 00:04:50,651
‫way too many event handlers

120
00:04:50,651 --> 00:04:52,184
‫that make the component

121
00:04:52,184 --> 00:04:54,525
‫and also its child components

122
00:04:54,525 --> 00:04:57,450
‫too large and too confusing.

123
00:04:57,450 --> 00:04:58,560
‫In that case

124
00:04:58,560 --> 00:05:02,649
‫you might also consider going with useReducer.

125
00:05:02,649 --> 00:05:05,790
‫Otherwise, if the question is no again,

126
00:05:05,790 --> 00:05:09,773
‫then useState is once again the way to go.

127
00:05:09,773 --> 00:05:13,050
‫So in general, even after learning about useReducer

128
00:05:13,050 --> 00:05:18,050
‫useState should probably still remain your default choice

129
00:05:18,690 --> 00:05:20,970
‫for managing React state.

130
00:05:20,970 --> 00:05:24,270
‫But if useState gives you one of these problems

131
00:05:24,270 --> 00:05:26,070
‫that we have been talking about

132
00:05:26,070 --> 00:05:30,090
‫then it's time to consider a useReducer.

133
00:05:30,090 --> 00:05:32,040
‫And that's actually it.

134
00:05:32,040 --> 00:05:33,926
‫So at this point, you are probably

135
00:05:33,926 --> 00:05:37,424
‫in the top 5% of React developers

136
00:05:37,424 --> 00:05:41,033
‫when it comes to understanding the useReducer hook.

137
00:05:41,033 --> 00:05:45,210
‫So you are making excellent progress, really.

138
00:05:45,210 --> 00:05:47,528
‫And now to finish it's time to practice

139
00:05:47,528 --> 00:05:49,067
‫the useReducer hook

140
00:05:49,067 --> 00:05:50,313
‫on your own.