1
00:00:01,140 --> 00:00:04,410
‫Okay. And now to finish this section,

2
00:00:04,410 --> 00:00:06,360
‫we're back to another one of these

3
00:00:06,360 --> 00:00:10,470
‫lectures that compares two things. And this time,

4
00:00:10,470 --> 00:00:14,433
‫comparing Redux with React's Context API.

5
00:00:16,170 --> 00:00:19,290
‫So, as I have mentioned in an earlier video,

6
00:00:19,290 --> 00:00:22,620
‫many people started seeing the Context API,

7
00:00:22,620 --> 00:00:25,560
‫especially when coupled with useReducer,

8
00:00:25,560 --> 00:00:29,370
‫as a complete replacement for Redux.

9
00:00:29,370 --> 00:00:32,130
‫And while this can certainly be true in

10
00:00:32,130 --> 00:00:35,280
‫some situations, let's not simply follow

11
00:00:35,280 --> 00:00:39,000
‫these trends, but instead have a more nuanced

12
00:00:39,000 --> 00:00:42,210
‫and fact-based discussion here.

13
00:00:42,210 --> 00:00:44,760
‫So in this video, I want to summarize

14
00:00:44,760 --> 00:00:47,880
‫what we have learned about both these solutions

15
00:00:47,880 --> 00:00:51,240
‫to manage global state by taking a look

16
00:00:51,240 --> 00:00:54,244
‫at their pros and cons, and ultimately

17
00:00:54,244 --> 00:00:57,240
‫giving you recommendations on when to use

18
00:00:57,240 --> 00:01:00,750
‫context, and when to use Redux.

19
00:01:00,750 --> 00:01:04,800
‫So, the first advantage of the Context + useReducer

20
00:01:04,800 --> 00:01:08,250
‫solution is that these features are already

21
00:01:08,250 --> 00:01:12,270
‫built into React. While if you want to use Redux,

22
00:01:12,270 --> 00:01:15,000
‫you need to install additional packages,

23
00:01:15,000 --> 00:01:16,787
‫which is not only more work, but

24
00:01:16,787 --> 00:01:20,640
‫will also increase your bundle size.

25
00:01:20,640 --> 00:01:24,330
‫Now in terms of setup, it's quite straightforward

26
00:01:24,330 --> 00:01:27,900
‫to set up a single context and useReducer.

27
00:01:27,900 --> 00:01:30,660
‫Pass the state value into the context,

28
00:01:30,660 --> 00:01:33,390
‫and then provide it to the app.

29
00:01:33,390 --> 00:01:36,810
‫However, for each additional state slice,

30
00:01:36,810 --> 00:01:39,780
‫you will need to do the same thing again.

31
00:01:39,780 --> 00:01:41,880
‫So, you will need to set up everything

32
00:01:41,880 --> 00:01:44,970
‫from scratch for each new piece of state,

33
00:01:44,970 --> 00:01:48,669
‫or each new slice of state, and this can lead to

34
00:01:48,669 --> 00:01:51,600
‫something that we call "provider hell",

35
00:01:51,600 --> 00:01:53,580
‫where you end up with many, many

36
00:01:53,580 --> 00:01:57,870
‫context providers in your main app component.

37
00:01:57,870 --> 00:02:01,590
‫On the other hand, Redux requires a bit more work

38
00:02:01,590 --> 00:02:05,430
‫to do the initial setup, but once that is done,

39
00:02:05,430 --> 00:02:07,800
‫it's quite straightforward to add

40
00:02:07,800 --> 00:02:10,920
‫additional state slices. All you need to do,

41
00:02:10,920 --> 00:02:14,492
‫is to create a new slice file and add your reducers,

42
00:02:14,492 --> 00:02:17,610
‫but you don't need to create another provider

43
00:02:17,610 --> 00:02:19,263
‫and another custom hook.

44
00:02:20,250 --> 00:02:23,190
‫Now, when it comes to async operations,

45
00:02:23,190 --> 00:02:26,070
‫like fetching data, the context API

46
00:02:26,070 --> 00:02:28,830
‫has no built-in mechanism for that,

47
00:02:28,830 --> 00:02:31,410
‫as we have experienced ourselves,

48
00:02:31,410 --> 00:02:34,320
‫in the worldwide application.

49
00:02:34,320 --> 00:02:37,440
‫Redux, on the other hand, has support for

50
00:02:37,440 --> 00:02:40,050
‫middleware, and while middleware

51
00:02:40,050 --> 00:02:42,370
‫is not necessarily easy to use,

52
00:02:42,370 --> 00:02:45,750
‫it does give us a way to handle asynchronous

53
00:02:45,750 --> 00:02:49,560
‫tasks right inside the state management tool.

54
00:02:49,560 --> 00:02:52,680
‫Just keep in mind that we should probably not

55
00:02:52,680 --> 00:02:56,162
‫use any of these tools for remote state anyway,

56
00:02:56,162 --> 00:03:00,300
‫but sometimes it can still be useful to be able

57
00:03:00,300 --> 00:03:04,440
‫to fetch just some single data point from an API.

58
00:03:04,440 --> 00:03:06,630
‫So, just like we did with the currency

59
00:03:06,630 --> 00:03:09,513
‫conversion in this section, right?

60
00:03:10,440 --> 00:03:14,160
‫Now, moving on, as we saw in the previous section,

61
00:03:14,160 --> 00:03:17,817
‫optimizing the performance of the context API

62
00:03:17,817 --> 00:03:21,570
‫and useReducer solution can require some work,

63
00:03:21,570 --> 00:03:26,310
‫while Redux comes with many optimizations out of the box.

64
00:03:26,310 --> 00:03:30,420
‫So, including minimizing wasted renderers.

65
00:03:30,420 --> 00:03:33,270
‫And now finally, to finish our list

66
00:03:33,270 --> 00:03:36,090
‫of pros and cons, let's consider that

67
00:03:36,090 --> 00:03:39,270
‫Redux has some excellent DevTools.

68
00:03:39,270 --> 00:03:42,780
‫While for the context API, we can only use the

69
00:03:42,780 --> 00:03:45,930
‫simple React developer tools, and this

70
00:03:45,930 --> 00:03:48,540
‫can make a huge difference in applications

71
00:03:48,540 --> 00:03:50,940
‫where the state is truly huge,

72
00:03:50,940 --> 00:03:54,780
‫and complex, and is updated a lot.

73
00:03:54,780 --> 00:03:58,200
‫So, from this list, it appears that Redux

74
00:03:58,200 --> 00:04:01,860
‫has way more pros than the context API,

75
00:04:01,860 --> 00:04:04,650
‫but that's not really the point here.

76
00:04:04,650 --> 00:04:07,770
‫So, we're not counting the pros and cons,

77
00:04:07,770 --> 00:04:10,260
‫I'm just giving you the facts.

78
00:04:10,260 --> 00:04:14,160
‫But now based on these facts, let's move on

79
00:04:14,160 --> 00:04:17,163
‫to some actual usage recommendations.

80
00:04:18,930 --> 00:04:22,020
‫So, the general consensus seems to be

81
00:04:22,020 --> 00:04:25,500
‫use the context API plus React hooks

82
00:04:25,500 --> 00:04:29,580
‫for global state management in small applications

83
00:04:29,580 --> 00:04:33,030
‫and use Redux to manage global state

84
00:04:33,030 --> 00:04:37,440
‫in large apps. But that's not super helpful,

85
00:04:37,440 --> 00:04:39,930
‫and so let's dig a bit deeper.

86
00:04:39,930 --> 00:04:42,930
‫Just know that, in general, there is never

87
00:04:42,930 --> 00:04:45,420
‫a right answer that is gonna fit

88
00:04:45,420 --> 00:04:47,940
‫every single project out there.

89
00:04:47,940 --> 00:04:50,310
‫So, the technical choice between any

90
00:04:50,310 --> 00:04:53,338
‫of these solutions will always depend entirely

91
00:04:53,338 --> 00:04:57,127
‫on the project's needs. But with that being said,

92
00:04:57,127 --> 00:05:00,810
‫when, for example, all you need is to share

93
00:05:00,810 --> 00:05:03,900
‫a value that doesn't change very often,

94
00:05:03,900 --> 00:05:07,770
‫then the context API is perfect for that.

95
00:05:07,770 --> 00:05:11,190
‫And some examples are the app color theme,

96
00:05:11,190 --> 00:05:13,440
‫the user's preferred language,

97
00:05:13,440 --> 00:05:16,560
‫or the currently authenticated user.

98
00:05:16,560 --> 00:05:18,840
‫So these will rarely change,

99
00:05:18,840 --> 00:05:22,350
‫and so you can use a context for those

100
00:05:22,350 --> 00:05:25,110
‫because there will be no need to optimize

101
00:05:25,110 --> 00:05:28,230
‫the context in this situation.

102
00:05:28,230 --> 00:05:31,200
‫Now on the other hand, when you do have lots

103
00:05:31,200 --> 00:05:34,770
‫of UI state that needs frequent updates,

104
00:05:34,770 --> 00:05:38,190
‫like shopping carts, the currently open tabs,

105
00:05:38,190 --> 00:05:41,070
‫or some complex data filters, then

106
00:05:41,070 --> 00:05:44,340
‫Redux might be the way to go. And this is

107
00:05:44,340 --> 00:05:48,030
‫because as we just learned, Redux is already

108
00:05:48,030 --> 00:05:51,870
‫heavily optimized for these frequent updates.

109
00:05:51,870 --> 00:05:54,150
‫As we also already touched on,

110
00:05:54,150 --> 00:05:57,570
‫Redux is perfect when you have complex state

111
00:05:57,570 --> 00:06:00,450
‫with nested objects, because then you can

112
00:06:00,450 --> 00:06:03,330
‫mutate state in Redux Toolkit,

113
00:06:03,330 --> 00:06:06,390
‫which is really, really helpful.

114
00:06:06,390 --> 00:06:08,790
‫So, these are the two situations

115
00:06:08,790 --> 00:06:12,870
‫in which I would personally reach for Redux.

116
00:06:12,870 --> 00:06:15,150
‫Now, they're not that common when it

117
00:06:15,150 --> 00:06:19,110
‫comes to UI state, and so, again,

118
00:06:19,110 --> 00:06:22,680
‫this is why Redux has fallen a bit out of favor

119
00:06:22,680 --> 00:06:27,630
‫recently. Now, going back to the context API,

120
00:06:27,630 --> 00:06:30,630
‫it can be very helpful when we have a simple

121
00:06:30,630 --> 00:06:33,780
‫prop drilling problem that we need to solve,

122
00:06:33,780 --> 00:06:36,620
‫or when we need to manage some state

123
00:06:36,620 --> 00:06:40,710
‫in a local sub-tree of the application.

124
00:06:40,710 --> 00:06:44,250
‫So, in that case, it's not really global state,

125
00:06:44,250 --> 00:06:46,830
‫but state that is global to a smaller

126
00:06:46,830 --> 00:06:50,310
‫sub-part of the app, basically.

127
00:06:50,310 --> 00:06:52,800
‫And one important use case of this,

128
00:06:52,800 --> 00:06:55,170
‫is the advanced compound component

129
00:06:55,170 --> 00:06:57,813
‫pattern that we're gonna study later.

130
00:06:58,800 --> 00:07:02,921
‫Okay. So again, you need to choose what's best

131
00:07:02,921 --> 00:07:06,330
‫for your particular project and not simply

132
00:07:06,330 --> 00:07:10,080
‫follow some trend that you read about online.

133
00:07:10,080 --> 00:07:13,350
‫And that's true for every technological choice

134
00:07:13,350 --> 00:07:16,590
‫that you're gonna make. But this whole context

135
00:07:16,590 --> 00:07:19,090
‫versus Redux thing is a big debate

136
00:07:19,090 --> 00:07:21,810
‫that's been going on for some time

137
00:07:21,810 --> 00:07:25,140
‫in the React community, which is why I felt

138
00:07:25,140 --> 00:07:28,170
‫that I had to make this video about it.

139
00:07:28,170 --> 00:07:31,800
‫But anyway, with this, we have just finished

140
00:07:31,800 --> 00:07:34,950
‫yet another section. So, I hope that you

141
00:07:34,950 --> 00:07:36,966
‫feel confident with Redux now,

142
00:07:36,966 --> 00:07:39,873
‫and to see you back here very soon.