1
00:00:01,200 --> 00:00:02,310
‫In this lecture,

2
00:00:02,310 --> 00:00:04,830
‫we're going to create a new custom hook

3
00:00:04,830 --> 00:00:06,230
‫called useLocalStorageState.

4
00:00:07,830 --> 00:00:09,750
‫Which, basically, will behave

5
00:00:09,750 --> 00:00:12,090
‫exactly like the useState hook,

6
00:00:12,090 --> 00:00:16,173
‫but where the state actually gets stored in local storage.

7
00:00:17,430 --> 00:00:18,780
‫And so with that hook,

8
00:00:18,780 --> 00:00:22,890
‫we will then be able to replace this code right here.

9
00:00:22,890 --> 00:00:24,240
‫So this state,

10
00:00:24,240 --> 00:00:28,290
‫which gets the initial value from useState

11
00:00:28,290 --> 00:00:30,780
‫or from local storage actually,

12
00:00:30,780 --> 00:00:32,760
‫plus this part right here

13
00:00:32,760 --> 00:00:37,263
‫which is responsible for storing the state in local storage.

14
00:00:38,550 --> 00:00:39,383
‫Okay.

15
00:00:39,383 --> 00:00:42,030
‫So, right in our source folder

16
00:00:42,030 --> 00:00:45,600
‫let's create a new file for use

17
00:00:45,600 --> 00:00:46,433
‫Local

18
00:00:47,520 --> 00:00:48,660
‫Storage

19
00:00:48,660 --> 00:00:49,493
‫State.

20
00:00:51,600 --> 00:00:54,721
‫Now okay, so export, and then again

21
00:00:54,721 --> 00:00:55,870
‫useLocal

22
00:00:58,290 --> 00:00:59,280
‫Storage

23
00:00:59,280 --> 00:01:00,870
‫State.

24
00:01:00,870 --> 00:01:02,820
‫Now, some people would probably

25
00:01:02,820 --> 00:01:04,983
‫just call this useLocalStorage,

26
00:01:06,150 --> 00:01:07,890
‫but I want to make it really clear

27
00:01:07,890 --> 00:01:09,720
‫that the idea of this hook

28
00:01:09,720 --> 00:01:11,790
‫is to work in the exact same way

29
00:01:11,790 --> 00:01:13,323
‫as the useState hook.

30
00:01:14,340 --> 00:01:17,090
‫So, of course, here we're missing the function keyword.

31
00:01:19,800 --> 00:01:22,200
‫But now let's come back here,

32
00:01:22,200 --> 00:01:24,630
‫and in order for us to know

33
00:01:24,630 --> 00:01:27,300
‫how we should design our hook,

34
00:01:27,300 --> 00:01:28,653
‫let's first call it.

35
00:01:31,260 --> 00:01:32,730
‫So, as I mentioned,

36
00:01:32,730 --> 00:01:34,740
‫I want this hook to work basically

37
00:01:34,740 --> 00:01:36,930
‫the same way as the useState hook.

38
00:01:36,930 --> 00:01:40,740
‫And so it should also return an array of the state.

39
00:01:40,740 --> 00:01:43,170
‫So let's call it watched again,

40
00:01:43,170 --> 00:01:45,180
‫and off a setter function,

41
00:01:45,180 --> 00:01:46,460
‫so setWatched.

42
00:01:49,228 --> 00:01:50,061
‫And then,

43
00:01:51,090 --> 00:01:54,840
‫we'll use localStorageState.

44
00:01:54,840 --> 00:01:57,990
‫and, again, make sure that it is correctly imported.

45
00:01:57,990 --> 00:02:00,930
‫And then, we want to pass in the initial state,

46
00:02:00,930 --> 00:02:04,680
‫which, remember, for the watched array was simply

47
00:02:04,680 --> 00:02:06,063
‫this empty array.

48
00:02:07,350 --> 00:02:08,460
‫Right.

49
00:02:08,460 --> 00:02:11,373
‫And so let's now comment out this,

50
00:02:13,500 --> 00:02:16,350
‫and actually before I will copy it

51
00:02:16,350 --> 00:02:17,913
‫and then comment it out.

52
00:02:19,260 --> 00:02:20,103
‫All right.

53
00:02:21,210 --> 00:02:24,600
‫So let's then come back here to our hook.

54
00:02:24,600 --> 00:02:28,770
‫And so first of all, we can specify the parameter.

55
00:02:28,770 --> 00:02:32,993
‫So the parameter here is basically the initial state.

56
00:02:36,030 --> 00:02:36,900
‫Okay.

57
00:02:36,900 --> 00:02:40,020
‫And now, I will paste in what we just had there before,

58
00:02:40,020 --> 00:02:42,063
‫which is this state.

59
00:02:43,020 --> 00:02:45,633
‫So, let's import useState here.

60
00:02:46,950 --> 00:02:47,783
‫Import

61
00:02:48,780 --> 00:02:50,310
‫useState

62
00:02:50,310 --> 00:02:51,900
‫from React.

63
00:02:51,900 --> 00:02:55,440
‫And now, here I want to give these variables here

64
00:02:55,440 --> 00:02:57,210
‫some more generic names

65
00:02:57,210 --> 00:03:00,300
‫because remember that the idea of this hook here

66
00:03:00,300 --> 00:03:04,080
‫is to easily reuse it in other projects.

67
00:03:04,080 --> 00:03:06,580
‫So let's just call this value here and then

68
00:03:07,745 --> 00:03:08,823
‫setValue.

69
00:03:10,110 --> 00:03:11,640
‫All right.

70
00:03:11,640 --> 00:03:14,460
‫Now, right now we simply have a custom hook,

71
00:03:14,460 --> 00:03:16,320
‫which sets some state

72
00:03:16,320 --> 00:03:18,990
‫and reads the state from local storage.

73
00:03:18,990 --> 00:03:21,120
‫But that's not super helpful yet

74
00:03:21,120 --> 00:03:24,420
‫because, of course, we also need to update the state

75
00:03:24,420 --> 00:03:26,580
‫in local storage.

76
00:03:26,580 --> 00:03:31,230
‫So, we also need to get this useEffect right here.

77
00:03:31,230 --> 00:03:33,033
‫So, let's cut that from here,

78
00:03:34,380 --> 00:03:37,923
‫and let's actually delete all of this as well.

79
00:03:39,390 --> 00:03:41,820
‫And then let's paste this here.

80
00:03:41,820 --> 00:03:45,810
‫And, of course, we will have to rename then these things.

81
00:03:45,810 --> 00:03:48,030
‫So, this is now no longer watched

82
00:03:48,030 --> 00:03:51,840
‫but just our generic value,

83
00:03:51,840 --> 00:03:52,673
‫right?

84
00:03:52,673 --> 00:03:57,090
‫And then here, we need to also import useEffect.

85
00:03:57,090 --> 00:03:59,340
‫Now, there's still one big problem here,

86
00:03:59,340 --> 00:04:03,270
‫which is that we have this key here, hard coded.

87
00:04:03,270 --> 00:04:04,560
‫So of course, again,

88
00:04:04,560 --> 00:04:07,440
‫this needs to be reusable and generic.

89
00:04:07,440 --> 00:04:08,280
‫and so therefore,

90
00:04:08,280 --> 00:04:10,800
‫we need to allow the user to pass in

91
00:04:10,800 --> 00:04:11,973
‫the name of the key.

92
00:04:13,380 --> 00:04:18,240
‫So this is not 100% similar to useState anymore,

93
00:04:18,240 --> 00:04:23,103
‫but this is really necessary, otherwise this cannot work.

94
00:04:24,690 --> 00:04:25,593
‫All right.

95
00:04:27,030 --> 00:04:29,440
‫Then here, we also need to pass in the key

96
00:04:32,100 --> 00:04:36,033
‫because our effect here depends on that variable.

97
00:04:37,290 --> 00:04:38,130
‫Now, okay.

98
00:04:38,130 --> 00:04:39,753
‫And now, to return,

99
00:04:41,250 --> 00:04:43,050
‫we simply return an array,

100
00:04:43,050 --> 00:04:45,100
‫which has the value

101
00:04:46,200 --> 00:04:47,613
‫and setValue.

102
00:04:48,510 --> 00:04:53,010
‫And so then, it works exactly like the useState hook.

103
00:04:53,010 --> 00:04:55,950
‫So here, we already destructured that result.

104
00:04:55,950 --> 00:04:59,520
‫So that array, again, into the state variable and

105
00:04:59,520 --> 00:05:01,113
‫into the state setter.

106
00:05:02,730 --> 00:05:05,163
‫Now here, we just need to pass in that key.

107
00:05:06,480 --> 00:05:08,103
‫So that's watched.

108
00:05:09,420 --> 00:05:11,580
‫And as I save this, actually,

109
00:05:11,580 --> 00:05:15,450
‫immediately our watched list is back,

110
00:05:15,450 --> 00:05:19,503
‫which means that this custom hook is fully working already.

111
00:05:20,610 --> 00:05:23,880
‫But let's just go back and do some fixes here

112
00:05:23,880 --> 00:05:25,500
‫because in the very beginning,

113
00:05:25,500 --> 00:05:28,233
‫if we had no local state at all yet.

114
00:05:29,730 --> 00:05:31,053
‫So let's simulate that.

115
00:05:33,810 --> 00:05:36,213
‫Here in the application tab.

116
00:05:37,170 --> 00:05:38,523
‫So let's remove this.

117
00:05:39,480 --> 00:05:41,640
‫And so now, this doesn't really exist,

118
00:05:41,640 --> 00:05:43,590
‫and so then we should get some problem.

119
00:05:45,240 --> 00:05:46,740
‫So here in the console.

120
00:05:46,740 --> 00:05:49,830
‫Now, of course, we have these problems

121
00:05:49,830 --> 00:05:53,340
‫because now our watch list is basically null.

122
00:05:53,340 --> 00:05:55,320
‫And so then, our app somewhere

123
00:05:55,320 --> 00:05:58,290
‫is trying to call the map method on that.

124
00:05:58,290 --> 00:06:00,360
‫And so, we need to fix this,

125
00:06:00,360 --> 00:06:04,500
‫and we do this by actually using null, the initial state,

126
00:06:04,500 --> 00:06:08,523
‫which, up until this point, we actually have used nowhere.

127
00:06:09,660 --> 00:06:11,040
‫So we passed it in,

128
00:06:11,040 --> 00:06:13,143
‫but we haven't reused it anywhere.

129
00:06:14,190 --> 00:06:16,950
‫So, what we need to do now is to check

130
00:06:16,950 --> 00:06:20,280
‫if this stored value here actually exists

131
00:06:20,280 --> 00:06:22,083
‫because right now it doesn't.

132
00:06:22,920 --> 00:06:24,423
‫So, we can easily check that.

133
00:06:26,100 --> 00:06:28,170
‫So, this will then be this null

134
00:06:28,170 --> 00:06:29,403
‫that we can see here.

135
00:06:30,810 --> 00:06:33,390
‫So, yeah, there it is.

136
00:06:33,390 --> 00:06:36,480
‫And so, we need to say here, basically,

137
00:06:36,480 --> 00:06:40,860
‫if there is a stored value,

138
00:06:40,860 --> 00:06:42,750
‫then return this

139
00:06:42,750 --> 00:06:47,550
‫and otherwise then return the initial state.

140
00:06:47,550 --> 00:06:48,990
‫Which, in this case,

141
00:06:48,990 --> 00:06:51,593
‫is going to be that empty array.

142
00:06:53,880 --> 00:06:55,323
‫So, let's get rid of this.

143
00:06:56,220 --> 00:06:57,720
‫Let's reload.

144
00:06:57,720 --> 00:07:01,260
‫And so then, as we come back here to the application,

145
00:07:01,260 --> 00:07:04,800
‫we will see that, indeed, now we have an empty array.

146
00:07:04,800 --> 00:07:07,290
‫So that's our initial state that was stored

147
00:07:07,290 --> 00:07:12,120
‫into local storage because of this useEffect, right?

148
00:07:12,120 --> 00:07:15,420
‫So, remember that whatever this function here returns

149
00:07:15,420 --> 00:07:17,640
‫will be the initial state value

150
00:07:17,640 --> 00:07:19,440
‫of this useState hook.

151
00:07:19,440 --> 00:07:21,210
‫And so then, at the very beginning

152
00:07:21,210 --> 00:07:24,000
‫value becomes this empty array.

153
00:07:24,000 --> 00:07:26,220
‫And then, as this effect here is executed,

154
00:07:26,220 --> 00:07:27,630
‫after the re-render,

155
00:07:27,630 --> 00:07:30,120
‫that value is already that empty array.

156
00:07:30,120 --> 00:07:32,550
‫And so that's what is then stored

157
00:07:32,550 --> 00:07:35,250
‫here into our local storage.

158
00:07:35,250 --> 00:07:36,210
‫Okay.

159
00:07:36,210 --> 00:07:39,060
‫So, that's again it.

160
00:07:39,060 --> 00:07:40,560
‫So, what we did, again,

161
00:07:40,560 --> 00:07:43,440
‫was to take all the code that belonged together

162
00:07:43,440 --> 00:07:46,590
‫and placed it into yet another hook.

163
00:07:46,590 --> 00:07:48,277
‫And in this case, we made it so

164
00:07:48,277 --> 00:07:51,630
‫that this hook looks as close as possible

165
00:07:51,630 --> 00:07:53,400
‫to the useState hook.

166
00:07:53,400 --> 00:07:57,150
‫So, we also pass in some initial state,

167
00:07:57,150 --> 00:08:01,440
‫and then we get back a state variable

168
00:08:01,440 --> 00:08:03,990
‫and the updated function as always.

169
00:08:03,990 --> 00:08:07,440
‫But thanks to our special custom hook,

170
00:08:07,440 --> 00:08:09,420
‫now these work a bit different.

171
00:08:09,420 --> 00:08:11,730
‫So, this piece of state here can be read

172
00:08:11,730 --> 00:08:15,120
‫from local storage as the component first mounts.

173
00:08:15,120 --> 00:08:16,680
‫While the setter function

174
00:08:16,680 --> 00:08:19,350
‫will not only update the state itself,

175
00:08:19,350 --> 00:08:22,053
‫but it will also update the local storage.

176
00:08:23,220 --> 00:08:27,330
‫And so, we coded all this functionality right here

177
00:08:27,330 --> 00:08:29,730
‫in this reusable custom hook.

178
00:08:29,730 --> 00:08:32,313
‫Let's just test this one more time.

179
00:08:35,460 --> 00:08:38,100
‫So being sure that it works.

180
00:08:38,100 --> 00:08:39,660
‫Yeah. But here it appears.

181
00:08:39,660 --> 00:08:42,043
‫And as we reload, then there it is.

182
00:08:43,350 --> 00:08:44,730
‫So, great.

183
00:08:44,730 --> 00:08:48,210
‫Just to make sure that you understood what happened here.

184
00:08:48,210 --> 00:08:49,050
‫And if you want,

185
00:08:49,050 --> 00:08:51,000
‫it might even be a good exercise

186
00:08:51,000 --> 00:08:52,410
‫to put all the code back,

187
00:08:52,410 --> 00:08:55,020
‫and then do it all again on your own.

188
00:08:55,020 --> 00:08:58,080
‫But, anyway, if you don't feel like doing that

189
00:08:58,080 --> 00:09:00,900
‫then let's just move on to the next lecture where

190
00:09:00,900 --> 00:09:03,663
‫we will create just one more custom hook.