1 00:00:01,140 --> 00:00:02,370 ‫In this lecture 2 00:00:02,370 --> 00:00:06,630 ‫we're finally going to build a brand new feature for our app 3 00:00:06,630 --> 00:00:10,953 ‫which is to persist the watch list in local storage. 4 00:00:12,540 --> 00:00:16,980 ‫So right now, if we have some movies here in our watch list 5 00:00:16,980 --> 00:00:20,190 ‫and if we then reload the page, then you see 6 00:00:20,190 --> 00:00:23,490 ‫that of course our movies are going to be gone. 7 00:00:23,490 --> 00:00:27,750 ‫So they're not persisted, so they're not stored anywhere. 8 00:00:27,750 --> 00:00:29,580 ‫And so that's why in this lecture 9 00:00:29,580 --> 00:00:32,520 ‫we will now use local storage to store 10 00:00:32,520 --> 00:00:36,480 ‫this watched data information in the browser. 11 00:00:36,480 --> 00:00:39,180 ‫So we're going to do this in two parts. 12 00:00:39,180 --> 00:00:43,770 ‫First, each time that the watch list state is updated 13 00:00:43,770 --> 00:00:45,930 ‫we will update the local storage. 14 00:00:45,930 --> 00:00:49,560 ‫So we will store that data into local storage 15 00:00:49,560 --> 00:00:52,680 ‫and then each time that the application loads 16 00:00:52,680 --> 00:00:55,530 ‫so when the app component first mounts 17 00:00:55,530 --> 00:00:58,320 ‫we will read that data from local storage 18 00:00:58,320 --> 00:01:01,350 ‫and store it into the watched state. 19 00:01:01,350 --> 00:01:04,470 ‫So let's do that starting with the first part 20 00:01:04,470 --> 00:01:07,710 ‫which is to store the watched movies here 21 00:01:07,710 --> 00:01:11,460 ‫into local storage each time that they are updated. 22 00:01:11,460 --> 00:01:14,880 ‫And we can actually do that in two different ways 23 00:01:14,880 --> 00:01:17,070 ‫or in two different places. 24 00:01:17,070 --> 00:01:20,430 ‫So the first option is to store that data 25 00:01:20,430 --> 00:01:22,710 ‫into local storage each time 26 00:01:22,710 --> 00:01:25,560 ‫that a new movie is actually added. 27 00:01:25,560 --> 00:01:28,920 ‫So basically right here in this event handler function 28 00:01:28,920 --> 00:01:33,920 ‫that is responsible for adding new movies to the watch list. 29 00:01:34,140 --> 00:01:35,700 ‫So each time that happens 30 00:01:35,700 --> 00:01:40,700 ‫we can then store the new watch list into local storage. 31 00:01:41,220 --> 00:01:42,750 ‫So that's the first option. 32 00:01:42,750 --> 00:01:46,560 ‫And the second option is to simply do it in an effect. 33 00:01:46,560 --> 00:01:49,140 ‫And so let's actually do both of them 34 00:01:49,140 --> 00:01:52,770 ‫starting here in this event handler function. 35 00:01:52,770 --> 00:01:56,520 ‫Now by the way, if you're not familiar with local storage 36 00:01:56,520 --> 00:02:00,960 ‫it's basically just a very simple key value pair storage 37 00:02:00,960 --> 00:02:03,060 ‫that is available in the browser 38 00:02:03,060 --> 00:02:06,930 ‫and where we can store some data for each domain. 39 00:02:06,930 --> 00:02:09,660 ‫So basically the data that we store 40 00:02:09,660 --> 00:02:12,630 ‫in local storage now will only be available 41 00:02:12,630 --> 00:02:15,360 ‫through exactly this URL right here, 42 00:02:15,360 --> 00:02:17,703 ‫not for example in this other one. 43 00:02:19,110 --> 00:02:22,350 ‫Alright? And the way we use local storage 44 00:02:22,350 --> 00:02:25,020 ‫is simply calling local storage 45 00:02:25,020 --> 00:02:28,410 ‫which is a function available in all browsers. 46 00:02:28,410 --> 00:02:30,633 ‫And then we set item, 47 00:02:31,470 --> 00:02:34,650 ‫then we pass in the name of the key 48 00:02:34,650 --> 00:02:39,650 ‫so basically the name of the data that we want to store 49 00:02:39,660 --> 00:02:41,853 ‫and then second, the actual data. 50 00:02:43,050 --> 00:02:45,840 ‫Now here, we cannot simply use the watched array 51 00:02:45,840 --> 00:02:49,530 ‫like this because it has just been updated here. 52 00:02:49,530 --> 00:02:51,330 ‫And so as we already know 53 00:02:51,330 --> 00:02:54,600 ‫this updating happens in an asynchronous way. 54 00:02:54,600 --> 00:02:59,040 ‫And so therefore right here, this is still stale state. 55 00:02:59,040 --> 00:03:01,450 ‫So it's basically still the old version 56 00:03:02,433 --> 00:03:04,230 ‫before a new movie has been added. 57 00:03:04,230 --> 00:03:08,520 ‫And so we need to basically do the same thing as here. 58 00:03:08,520 --> 00:03:13,440 ‫So we need to build a new array based on the watched 59 00:03:13,440 --> 00:03:17,850 ‫so the current state plus the new movie. 60 00:03:17,850 --> 00:03:20,790 ‫And then finally, we need to convert all of this 61 00:03:20,790 --> 00:03:23,700 ‫into a string because in local storage, 62 00:03:23,700 --> 00:03:26,700 ‫we can only store key value pairs 63 00:03:26,700 --> 00:03:29,430 ‫where the value is a string. 64 00:03:29,430 --> 00:03:33,567 ‫And so let's use the built-in JSON.stringify. 65 00:03:35,670 --> 00:03:38,823 ‫Now alright? And this should now actually work. 66 00:03:39,750 --> 00:03:42,303 ‫Let's try some different movies now here. 67 00:03:45,060 --> 00:03:47,010 ‫So let's try this one 68 00:03:47,010 --> 00:03:50,163 ‫which is actually one of my all time favorite movies. 69 00:03:51,240 --> 00:03:53,610 ‫So let's add that to the list 70 00:03:53,610 --> 00:03:58,560 ‫and maybe another one now, right? 71 00:03:58,560 --> 00:04:01,440 ‫And so now we have our two movies in the list, 72 00:04:01,440 --> 00:04:03,427 ‫but of course if we reload the page now 73 00:04:03,427 --> 00:04:07,470 ‫they will not magically appear back in the UI, 74 00:04:07,470 --> 00:04:10,620 ‫but we can still check if they have been stored 75 00:04:10,620 --> 00:04:12,450 ‫into local storage. 76 00:04:12,450 --> 00:04:13,980 ‫So in the DevTools again 77 00:04:13,980 --> 00:04:16,650 ‫we just come here to application. 78 00:04:16,650 --> 00:04:18,300 ‫And then here on the left side 79 00:04:18,300 --> 00:04:21,090 ‫you should have this local storage thing. 80 00:04:21,090 --> 00:04:24,930 ‫And so indeed here we see that our array 81 00:04:24,930 --> 00:04:29,433 ‫of watched movies has indeed been stored into local storage. 82 00:04:30,360 --> 00:04:33,090 ‫Great. So that's working. 83 00:04:33,090 --> 00:04:34,620 ‫But as I was saying 84 00:04:34,620 --> 00:04:37,800 ‫we can also do it right inside in effect. 85 00:04:37,800 --> 00:04:41,670 ‫So instead of doing it here in the event handler function, 86 00:04:41,670 --> 00:04:44,340 ‫and we will actually do it in an effect 87 00:04:44,340 --> 00:04:47,310 ‫instead of here in this event handler function 88 00:04:47,310 --> 00:04:50,250 ‫because later in the section we will want to make 89 00:04:50,250 --> 00:04:53,913 ‫this storing data into local storage, reusable. 90 00:04:55,170 --> 00:04:57,090 ‫So let's just comment this out 91 00:04:57,090 --> 00:05:01,080 ‫and then let's come down here and create a new effect. 92 00:05:01,080 --> 00:05:04,290 ‫So you see that I like to have always the states 93 00:05:04,290 --> 00:05:06,180 ‫here in the beginning of the components. 94 00:05:06,180 --> 00:05:08,010 ‫Then the event handler functions 95 00:05:08,010 --> 00:05:10,290 ‫which update some of the state. 96 00:05:10,290 --> 00:05:12,033 ‫And then in the end, the effects. 97 00:05:15,330 --> 00:05:19,800 ‫So let's create a new effect with the function, 98 00:05:19,800 --> 00:05:22,770 ‫and then as we were just saying, we want this effect 99 00:05:22,770 --> 00:05:27,720 ‫to run each time Dev to watched movies are updated. 100 00:05:27,720 --> 00:05:32,190 ‫And so then here we can very easily, let's just 101 00:05:32,190 --> 00:05:36,063 ‫grab this first part here, or actually all of it. 102 00:05:38,190 --> 00:05:40,110 ‫So let's paste that here. 103 00:05:40,110 --> 00:05:43,260 ‫And now we don't have to create any new array 104 00:05:43,260 --> 00:05:47,220 ‫because this effect here will only run after the movies 105 00:05:47,220 --> 00:05:48,990 ‫have already been updated. 106 00:05:48,990 --> 00:05:52,740 ‫So after watched is already the new state. 107 00:05:52,740 --> 00:05:55,233 ‫And so we can then simply use that here. 108 00:05:56,910 --> 00:05:59,520 ‫All right, let's reload. 109 00:05:59,520 --> 00:06:03,780 ‫And we see that our local storage has already been updated 110 00:06:03,780 --> 00:06:06,120 ‫and that's because this effect here 111 00:06:06,120 --> 00:06:09,000 ‫run when the component was first mounted. 112 00:06:09,000 --> 00:06:12,120 ‫And so at this point the watched state is by default 113 00:06:12,120 --> 00:06:13,680 ‫still this empty array. 114 00:06:13,680 --> 00:06:17,103 ‫And so then React set that here to the empty array. 115 00:06:19,230 --> 00:06:22,923 ‫So let's just try, oh, that's not correct. 116 00:06:24,300 --> 00:06:25,470 ‫And for some reason here 117 00:06:25,470 --> 00:06:28,110 ‫the loading state is no longer working 118 00:06:28,110 --> 00:06:29,910 ‫but let's take a look at that later. 119 00:06:30,780 --> 00:06:33,900 ‫So as we add new movies to the list now 120 00:06:33,900 --> 00:06:38,040 ‫we should see our local storage being updated. 121 00:06:38,040 --> 00:06:40,560 ‫Nice, so that part is working 122 00:06:40,560 --> 00:06:43,560 ‫and so now we need to take care of the second part 123 00:06:43,560 --> 00:06:45,960 ‫which is to read this data back 124 00:06:45,960 --> 00:06:50,220 ‫into the application as soon as the app component mounts. 125 00:06:50,220 --> 00:06:53,790 ‫So the component that owns this watched state. 126 00:06:53,790 --> 00:06:56,160 ‫Now how can we do that? 127 00:06:56,160 --> 00:07:00,030 ‫Well, we might think that we should use another effect 128 00:07:00,030 --> 00:07:03,120 ‫in order to get the data from local storage 129 00:07:03,120 --> 00:07:04,620 ‫on the initial render 130 00:07:04,620 --> 00:07:08,730 ‫and then store that data in the watched state. 131 00:07:08,730 --> 00:07:11,940 ‫However, there is actually a better way. 132 00:07:11,940 --> 00:07:13,863 ‫And so let me show that to you. 133 00:07:15,600 --> 00:07:19,210 ‫So let's deactivate this watched state here 134 00:07:20,820 --> 00:07:25,820 ‫and maybe let's move it down here and then duplicate it 135 00:07:26,160 --> 00:07:30,063 ‫because we still need this state of course. 136 00:07:30,930 --> 00:07:33,270 ‫So what we're going to do now is to, 137 00:07:33,270 --> 00:07:36,000 ‫instead of just passing in a value 138 00:07:36,000 --> 00:07:38,700 ‫is to pass in a callback function. 139 00:07:38,700 --> 00:07:41,010 ‫And so that's because the useState hook 140 00:07:41,010 --> 00:07:43,800 ‫also accepts a callback function instead 141 00:07:43,800 --> 00:07:45,510 ‫of just a single value. 142 00:07:45,510 --> 00:07:48,480 ‫And so we can then initialize the state 143 00:07:48,480 --> 00:07:52,320 ‫with whatever value this callback function will return. 144 00:07:52,320 --> 00:07:53,823 ‫And so let's try that out. 145 00:07:54,810 --> 00:07:57,270 ‫So let's pass in a function here. 146 00:07:57,270 --> 00:07:59,880 ‫So creating a brand new function. 147 00:07:59,880 --> 00:08:02,380 ‫And so then let's create a new variable 148 00:08:03,750 --> 00:08:07,260 ‫let's say storage, value, 149 00:08:07,260 --> 00:08:11,340 ‫and then we can just read from local storage 150 00:08:11,340 --> 00:08:14,223 ‫with the get item method. 151 00:08:16,261 --> 00:08:18,210 ‫So get item and then the key that we used before 152 00:08:18,210 --> 00:08:21,150 ‫to store the data in local storage. 153 00:08:21,150 --> 00:08:23,820 ‫So that's this key right here. 154 00:08:23,820 --> 00:08:27,273 ‫And so then we just need to return this value. 155 00:08:28,620 --> 00:08:32,070 ‫And so again, React will then call this function here 156 00:08:32,070 --> 00:08:34,440 ‫on the initial render and we'll use 157 00:08:34,440 --> 00:08:37,410 ‫whatever value is returned from this function 158 00:08:37,410 --> 00:08:40,350 ‫as the initial value of the state. 159 00:08:40,350 --> 00:08:44,490 ‫And this function here actually needs to be a pure function 160 00:08:44,490 --> 00:08:47,550 ‫and it cannot receive any arguments. 161 00:08:47,550 --> 00:08:50,970 ‫So passing arguments here is not going to work. 162 00:08:50,970 --> 00:08:55,260 ‫So just a very simple pure function that returns something 163 00:08:55,260 --> 00:08:57,990 ‫and that something will be used by React 164 00:08:57,990 --> 00:08:59,253 ‫as the initial state. 165 00:09:00,120 --> 00:09:03,840 ‫And also just like the values that we pass in, 166 00:09:03,840 --> 00:09:06,870 ‫React will only consider this function here 167 00:09:06,870 --> 00:09:08,640 ‫on the initial render. 168 00:09:08,640 --> 00:09:13,230 ‫So this function is only executed once on the initial render 169 00:09:13,230 --> 00:09:17,670 ‫and is simply ignored on subsequent re-renders. 170 00:09:17,670 --> 00:09:20,190 ‫Now, apparently there is some problem here 171 00:09:20,190 --> 00:09:21,783 ‫so let's check that out. 172 00:09:22,830 --> 00:09:25,260 ‫So watched map is not a function 173 00:09:25,260 --> 00:09:28,020 ‫and I actually saw that coming because 174 00:09:28,020 --> 00:09:31,920 ‫right now the local storage here is a string. 175 00:09:31,920 --> 00:09:34,860 ‫So remember that we stored the data 176 00:09:34,860 --> 00:09:38,250 ‫as a string by doing JSON.stringify 177 00:09:38,250 --> 00:09:40,590 ‫and then when we get the data back 178 00:09:40,590 --> 00:09:45,113 ‫we need to convert it back by doing JSON.parse. 179 00:09:48,450 --> 00:09:52,680 ‫Alright and beautiful. 180 00:09:52,680 --> 00:09:56,820 ‫So here, the movie that we added to our watch list before 181 00:09:56,820 --> 00:10:00,000 ‫is now indeed back in our watch list 182 00:10:00,000 --> 00:10:03,000 ‫after reloading the page. 183 00:10:03,000 --> 00:10:04,830 ‫So we successfully stored the data 184 00:10:04,830 --> 00:10:09,063 ‫in local storage and retrieved it as the application loads. 185 00:10:10,200 --> 00:10:13,830 ‫So our callback function here is doing its job. 186 00:10:13,830 --> 00:10:17,373 ‫And so this creates a much better experience for the user. 187 00:10:18,360 --> 00:10:22,200 ‫So whenever the initial value of the use data 188 00:10:22,200 --> 00:10:25,050 ‫depends on some sort of computation 189 00:10:25,050 --> 00:10:28,560 ‫we should always pass in a function like this. 190 00:10:28,560 --> 00:10:32,880 ‫So function that React can execute on its initial render. 191 00:10:32,880 --> 00:10:36,723 ‫So we should not call a function inside useState. 192 00:10:39,059 --> 00:10:42,803 ‫So we should not do this, okay? 193 00:10:45,780 --> 00:10:47,100 ‫So this is very different. 194 00:10:47,100 --> 00:10:51,180 ‫Here we are calling a function, not passing a function in. 195 00:10:51,180 --> 00:10:53,130 ‫And so this we should not do 196 00:10:53,130 --> 00:10:58,130 ‫because even though React would ignore the value of this 197 00:10:58,350 --> 00:11:01,260 ‫it would still call this function on every render 198 00:11:01,260 --> 00:11:03,210 ‫which is not good. 199 00:11:03,210 --> 00:11:07,110 ‫So never do this and instead pass in a function 200 00:11:07,110 --> 00:11:09,123 ‫that React can then call later. 201 00:11:10,260 --> 00:11:14,430 ‫Now okay, now let's again go back to our application 202 00:11:14,430 --> 00:11:17,460 ‫tap here, because now we want to see what happens 203 00:11:17,460 --> 00:11:19,593 ‫when we delete a movie from here, 204 00:11:20,700 --> 00:11:24,630 ‫and you see that it actually automatically got removed 205 00:11:24,630 --> 00:11:27,063 ‫here from the local storage as well. 206 00:11:27,930 --> 00:11:30,000 ‫So why is that? 207 00:11:30,000 --> 00:11:33,750 ‫Well, it's because thanks to our effect here 208 00:11:33,750 --> 00:11:37,290 ‫we have effectively synchronized the watched state 209 00:11:37,290 --> 00:11:39,420 ‫with our local storage. 210 00:11:39,420 --> 00:11:41,790 ‫So when the watched state changes, 211 00:11:41,790 --> 00:11:44,610 ‫our local storage changes as well. 212 00:11:44,610 --> 00:11:47,040 ‫And so this is a great advantage 213 00:11:47,040 --> 00:11:49,800 ‫of having used the useEffect hook 214 00:11:49,800 --> 00:11:52,590 ‫instead of setting local stage right here 215 00:11:52,590 --> 00:11:56,040 ‫in the event handler, because if we had done it 216 00:11:56,040 --> 00:11:59,790 ‫like this here, then we would also have to manually 217 00:11:59,790 --> 00:12:04,080 ‫set the local storage here as we deleted a movie. 218 00:12:04,080 --> 00:12:08,460 ‫So here we would then also have to do the exact same thing 219 00:12:08,460 --> 00:12:12,720 ‫and use all this here as the new local storage. 220 00:12:12,720 --> 00:12:15,840 ‫But so now since we have basically synchronized 221 00:12:15,840 --> 00:12:18,963 ‫the two of them, we no longer need to do that. 222 00:12:20,430 --> 00:12:22,950 ‫Alright, now let's just see what happens 223 00:12:22,950 --> 00:12:27,630 ‫when we reload the page and everything's working fine. 224 00:12:27,630 --> 00:12:29,283 ‫Let's just do one more test, 225 00:12:34,440 --> 00:12:36,783 ‫add a few more movies to our list. 226 00:12:38,160 --> 00:12:41,343 ‫Of course, this is a 10, not some other value. 227 00:12:45,060 --> 00:12:48,240 ‫Now, okay, now I see we are getting some errors here 228 00:12:48,240 --> 00:12:49,890 ‫but maybe that was ah, 229 00:12:49,890 --> 00:12:52,410 ‫that's because of the image not loading. 230 00:12:52,410 --> 00:12:55,620 ‫And now when I reload, ah, beautiful! 231 00:12:55,620 --> 00:12:58,443 ‫Both our movies are still in the list. 232 00:12:58,443 --> 00:13:02,070 ‫So we learned here yet another way of using 233 00:13:02,070 --> 00:13:03,720 ‫the useState hook. 234 00:13:03,720 --> 00:13:08,610 ‫So now we know that besides passing in a single value 235 00:13:08,610 --> 00:13:11,970 ‫we can also pass in a callback function. 236 00:13:11,970 --> 00:13:14,460 ‫So this all can be a little bit confusing 237 00:13:14,460 --> 00:13:16,800 ‫with all these different options that we have. 238 00:13:16,800 --> 00:13:19,290 ‫And so in the next lecture, we will basically 239 00:13:19,290 --> 00:13:23,160 ‫summarize everything that we know about the useState hook 240 00:13:23,160 --> 00:13:27,093 ‫since that is such an important talk in React development.