1 00:00:01,110 --> 00:00:02,220 ‫Let's now look 2 00:00:02,220 --> 00:00:05,400 ‫at the super important useState hook again 3 00:00:05,400 --> 00:00:07,740 ‫and review some important details 4 00:00:07,740 --> 00:00:10,983 ‫that we have already talked about as well. 5 00:00:12,270 --> 00:00:15,390 ‫So we have been using the useState hook 6 00:00:15,390 --> 00:00:17,850 ‫since almost the beginning of the course 7 00:00:17,850 --> 00:00:22,850 ‫because this is in fact the most important hook in React. 8 00:00:22,920 --> 00:00:25,590 ‫So we have used it in many different ways 9 00:00:25,590 --> 00:00:29,430 ‫and we know pretty much how it works at this point. 10 00:00:29,430 --> 00:00:34,020 ‫However, I want to again, review some important parts of it 11 00:00:34,020 --> 00:00:36,060 ‫and I want to draw your attention 12 00:00:36,060 --> 00:00:39,990 ‫to one very important detail, which is the fact 13 00:00:39,990 --> 00:00:44,170 ‫that these initial values that we pass into useState 14 00:00:45,090 --> 00:00:47,733 ‫only really matter on the initial render. 15 00:00:48,840 --> 00:00:52,050 ‫So let's see an example of that and let's say, 16 00:00:52,050 --> 00:00:56,760 ‫that we actually wanted something like this here to work. 17 00:00:56,760 --> 00:00:59,670 ‫So we wanted a piece of state called isTop 18 00:00:59,670 --> 00:01:04,650 ‫which is true if the imdbRating is greater than eight. 19 00:01:04,650 --> 00:01:08,130 ‫Now, we cannot do this as we already learned 20 00:01:08,130 --> 00:01:13,130 ‫in the previous lecture, but we might think that this works. 21 00:01:15,390 --> 00:01:20,390 ‫So basically doing this, so imdp greater than eight. 22 00:01:25,950 --> 00:01:29,520 ‫So let's see if that works actually. 23 00:01:29,520 --> 00:01:34,083 ‫And let's then log this state to the console. 24 00:01:35,640 --> 00:01:36,543 ‫Okay. 25 00:01:40,770 --> 00:01:42,933 ‫Let's search for a movie, as always, 26 00:01:43,920 --> 00:01:46,740 ‫and then let's wait for it. 27 00:01:46,740 --> 00:01:51,740 ‫And we see that this log here coming from line 266 28 00:01:52,170 --> 00:01:55,380 ‫which is this one here, is indeed false 29 00:01:55,380 --> 00:01:59,433 ‫even though the rating here is actually greater than eight. 30 00:02:00,330 --> 00:02:04,080 ‫And if we take a look at our list of hooks 31 00:02:04,080 --> 00:02:08,190 ‫then we also see that this one is set to false. 32 00:02:08,190 --> 00:02:10,200 ‫So why is that? 33 00:02:10,200 --> 00:02:12,240 ‫Well, it is because of the reason 34 00:02:12,240 --> 00:02:14,310 ‫that I just mentioned before 35 00:02:14,310 --> 00:02:19,080 ‫which is the fact that whatever we pass into useState 36 00:02:19,080 --> 00:02:20,820 ‫is the initial state. 37 00:02:20,820 --> 00:02:24,630 ‫And React will only look at this initial state 38 00:02:24,630 --> 00:02:26,580 ‫on the initial render. 39 00:02:26,580 --> 00:02:29,580 ‫So when the component first mounts. 40 00:02:29,580 --> 00:02:32,610 ‫However, when the component first mounts here 41 00:02:32,610 --> 00:02:35,640 ‫the IMDB rating will still be undefined. 42 00:02:35,640 --> 00:02:37,920 ‫And so this year is then false. 43 00:02:37,920 --> 00:02:40,530 ‫And so it will stay false forever 44 00:02:40,530 --> 00:02:43,560 ‫because nowhere we update the state 45 00:02:43,560 --> 00:02:45,720 ‫and on the second render, 46 00:02:45,720 --> 00:02:49,080 ‫so when we then finally get the movie data, 47 00:02:49,080 --> 00:02:52,080 ‫this will not be executed again. 48 00:02:52,080 --> 00:02:55,683 ‫And so therefore, again, it will stay false forever. 49 00:02:56,610 --> 00:03:01,113 ‫Now, one way of fixing this would be to use a useEffect. 50 00:03:02,760 --> 00:03:07,760 ‫So if we did useEffect passing in a function 51 00:03:10,230 --> 00:03:12,150 ‫and then we wanted to run this effect 52 00:03:12,150 --> 00:03:16,050 ‫each time that the IMDB rating updates. 53 00:03:16,050 --> 00:03:18,810 ‫And so each time that does happen 54 00:03:18,810 --> 00:03:22,770 ‫then we want to call setIsTop 55 00:03:22,770 --> 00:03:27,770 ‫and then we can do imdbRating greater than eight. 56 00:03:27,930 --> 00:03:31,143 ‫And so in this case, this should then work. 57 00:03:32,340 --> 00:03:36,270 ‫And let's see. And indeed now it is true. 58 00:03:36,270 --> 00:03:39,200 ‫And if we take a look again here at our... 59 00:03:41,640 --> 00:03:44,940 ‫Yeah, at our different hooks, 60 00:03:44,940 --> 00:03:49,260 ‫we see that now indeed isTop is true. 61 00:03:49,260 --> 00:03:51,810 ‫So our fourth hook here. 62 00:03:51,810 --> 00:03:55,203 ‫And so that is simply because of this useEffect. 63 00:03:56,370 --> 00:03:58,680 ‫Now of course, in this situation 64 00:03:58,680 --> 00:04:03,030 ‫we shouldn't even use a piece of state in the first place. 65 00:04:03,030 --> 00:04:07,110 ‫So if this here was the functionality that we really wanted 66 00:04:07,110 --> 00:04:10,800 ‫then what we should do is derived state. 67 00:04:10,800 --> 00:04:15,210 ‫So we shouldn't create a real state with the useState hook 68 00:04:15,210 --> 00:04:19,170 ‫but instead we should just do const isTop 69 00:04:23,141 --> 00:04:26,607 ‫and then simply imdbRating greater than eight. 70 00:04:27,900 --> 00:04:32,520 ‫So let's comment all of this here out, give it a save. 71 00:04:32,520 --> 00:04:34,870 ‫And if we then log that again to the console 72 00:04:36,870 --> 00:04:41,553 ‫you see that this simple code works seamlessly. 73 00:04:44,250 --> 00:04:46,203 ‫So let's wait for a here. 74 00:04:49,200 --> 00:04:53,520 ‫Cleaning our console. And so it is true. 75 00:04:53,520 --> 00:04:55,770 ‫And so that's because this variable here 76 00:04:55,770 --> 00:04:57,660 ‫is of course, regenerated 77 00:04:57,660 --> 00:05:00,480 ‫each time that the function here is executed. 78 00:05:00,480 --> 00:05:02,310 ‫So after each render. 79 00:05:02,310 --> 00:05:03,870 ‫And so this is the power 80 00:05:03,870 --> 00:05:07,320 ‫and one of the great advantages of derived state, 81 00:05:07,320 --> 00:05:09,300 ‫which is that it updates 82 00:05:09,300 --> 00:05:12,720 ‫basically as the component gets re-rendered. 83 00:05:12,720 --> 00:05:16,563 ‫And this is really as simple as it can get, right? 84 00:05:18,060 --> 00:05:21,060 ‫So this is pretty important to understand 85 00:05:21,060 --> 00:05:24,510 ‫so that the initial state value here 86 00:05:24,510 --> 00:05:28,260 ‫is only been looked at by React in the very beginning. 87 00:05:28,260 --> 00:05:30,603 ‫So only on component mount. 88 00:05:31,710 --> 00:05:33,750 ‫So never forget that. 89 00:05:33,750 --> 00:05:37,680 ‫And now I want to come back to this function right here 90 00:05:37,680 --> 00:05:39,750 ‫to give you yet another example 91 00:05:39,750 --> 00:05:44,730 ‫or another proof that updating state really is asynchronous 92 00:05:44,730 --> 00:05:48,480 ‫and that we need to use a colic function to update state 93 00:05:48,480 --> 00:05:50,760 ‫in certain situations. 94 00:05:50,760 --> 00:05:53,940 ‫So let's say that when we add a new movie 95 00:05:53,940 --> 00:05:56,520 ‫to our watch list right here 96 00:05:56,520 --> 00:06:01,520 ‫we want it to display the average of the rating that we gave 97 00:06:02,340 --> 00:06:05,553 ‫and the rating that is coming from IMDB. 98 00:06:06,690 --> 00:06:09,690 ‫So we want that to be displayed right here 99 00:06:09,690 --> 00:06:12,990 ‫instead of closing the movie immediately. 100 00:06:12,990 --> 00:06:16,620 ‫So let's first of all here remove this part 101 00:06:16,620 --> 00:06:19,050 ‫and then let's create a new piece of state. 102 00:06:19,050 --> 00:06:22,710 ‫Because if we want to display something on the screen, 103 00:06:22,710 --> 00:06:25,500 ‫well, then we need a new piece of state. 104 00:06:25,500 --> 00:06:29,793 ‫So let's call this avgRating and setAvgRating. 105 00:06:34,164 --> 00:06:37,831 ‫And useState, and let's just set it to zero. 106 00:06:40,530 --> 00:06:43,773 ‫And then we want to render that here. 107 00:06:44,760 --> 00:06:46,590 ‫Really somewhere, it doesn't really matter 108 00:06:46,590 --> 00:06:50,523 ‫because we will remove this here in a minute anyway. 109 00:06:51,690 --> 00:06:54,960 ‫So this is just to give you another demonstration 110 00:06:54,960 --> 00:06:57,483 ‫of updating state asynchronously. 111 00:06:58,350 --> 00:07:02,493 ‫So where is that function? Here it is. 112 00:07:04,350 --> 00:07:07,710 ‫Okay, and so now here we should see the zero. 113 00:07:07,710 --> 00:07:10,110 ‫And I used the value of zero here 114 00:07:10,110 --> 00:07:13,800 ‫and not the current IMDB rating because again, 115 00:07:13,800 --> 00:07:16,320 ‫this will just be undefined in the beginning. 116 00:07:16,320 --> 00:07:21,030 ‫And so there's no need to place that there. All right? 117 00:07:21,030 --> 00:07:24,340 ‫But then as we click on this button here 118 00:07:25,320 --> 00:07:28,080 ‫then this function here is executed. 119 00:07:28,080 --> 00:07:31,470 ‫And so let's then actually set that state. 120 00:07:31,470 --> 00:07:34,980 ‫So setAvgRating, and let's say 121 00:07:34,980 --> 00:07:37,050 ‫that first we wanted to set it 122 00:07:37,050 --> 00:07:42,050 ‫to the actual current IMDB rating, which is a string. 123 00:07:42,390 --> 00:07:46,833 ‫So let's convert that to a number. So IMDB rating. 124 00:07:49,290 --> 00:07:52,950 ‫And now watch what happens if we log this to the console 125 00:07:52,950 --> 00:07:55,233 ‫or maybe even if we alert this. 126 00:07:56,250 --> 00:07:58,680 ‫So then it becomes really visible. 127 00:07:58,680 --> 00:08:01,743 ‫So avgRating. 128 00:08:03,240 --> 00:08:04,323 ‫So let's see. 129 00:08:06,480 --> 00:08:10,920 ‫And so the avgRating should now be 8.6 130 00:08:10,920 --> 00:08:14,570 ‫because we set it to IMDB rating, which is 8.6. 131 00:08:16,080 --> 00:08:20,220 ‫So watch what happens. Well, it is still zero. 132 00:08:20,220 --> 00:08:21,540 ‫And so that's again, 133 00:08:21,540 --> 00:08:25,350 ‫because the state is set asynchronously here. 134 00:08:25,350 --> 00:08:29,610 ‫Or in other words, we do not get access to the updated state 135 00:08:29,610 --> 00:08:32,070 ‫right after doing that. 136 00:08:32,070 --> 00:08:36,870 ‫So right after we call the state updating function. 137 00:08:36,870 --> 00:08:40,860 ‫So only once React is done processing this event handler 138 00:08:40,860 --> 00:08:44,733 ‫it will then update all the state and re-render the UI. 139 00:08:47,220 --> 00:08:51,420 ‫All right. But anyway, let's now do another one. 140 00:08:51,420 --> 00:08:52,923 ‫So setAvgRating. 141 00:08:54,030 --> 00:08:58,020 ‫And so let's now attempt to calculate the average. 142 00:08:58,020 --> 00:09:01,140 ‫So taking imdbRating. 143 00:09:01,140 --> 00:09:04,077 ‫Or actually we want the avgRating. 144 00:09:05,430 --> 00:09:10,430 ‫So avgRating plus the userRating and then divided by two. 145 00:09:13,590 --> 00:09:17,193 ‫So let's see, let's delete this here. 146 00:09:20,460 --> 00:09:22,863 ‫And let's use 10 this time. 147 00:09:23,730 --> 00:09:27,300 ‫And then we get a wrong average here. 148 00:09:27,300 --> 00:09:31,380 ‫So our average is not correctly being calculated. 149 00:09:31,380 --> 00:09:36,240 ‫So this five here is really just 10 divided by two. 150 00:09:36,240 --> 00:09:38,550 ‫So the reason for that is that here 151 00:09:38,550 --> 00:09:41,460 ‫the avgRating is still at zero. 152 00:09:41,460 --> 00:09:45,873 ‫And so then zero plus 10 divided by two is indeed the five. 153 00:09:46,980 --> 00:09:51,030 ‫But why is the avgRating still at zero here 154 00:09:51,030 --> 00:09:53,790 ‫even though we have updated it before? 155 00:09:53,790 --> 00:09:56,820 ‫And by now you already know the answer. 156 00:09:56,820 --> 00:09:59,850 ‫So it's asynchronous state setting, 157 00:09:59,850 --> 00:10:02,130 ‫which means that at this point here 158 00:10:02,130 --> 00:10:04,950 ‫the avgRating has not been set yet. 159 00:10:04,950 --> 00:10:06,390 ‫So it's still at zero, 160 00:10:06,390 --> 00:10:09,480 ‫which is the initial value right here. 161 00:10:09,480 --> 00:10:11,040 ‫And so because of that, 162 00:10:11,040 --> 00:10:16,040 ‫we say that the avgRating state is stale at this point. 163 00:10:16,260 --> 00:10:19,740 ‫So we have stale state right here. 164 00:10:19,740 --> 00:10:23,610 ‫But luckily for us, we already know how to solve this, 165 00:10:23,610 --> 00:10:27,030 ‫which is by passing in a callback function. 166 00:10:27,030 --> 00:10:30,933 ‫And so that callback will get access to the current value. 167 00:10:32,190 --> 00:10:35,250 ‫And so let's again call that avgRating, 168 00:10:35,250 --> 00:10:37,953 ‫but of course, it could be called anything. 169 00:10:40,050 --> 00:10:42,753 ‫So let's try one more time. 170 00:10:44,850 --> 00:10:48,840 ‫Again 10. And beautiful. 171 00:10:48,840 --> 00:10:53,460 ‫So now we get the correct average. Nice. 172 00:10:53,460 --> 00:10:54,990 ‫So this time what happened 173 00:10:54,990 --> 00:10:59,990 ‫was that the average was again set to the imdbRating, 174 00:11:00,300 --> 00:11:03,660 ‫so the 8.6, but then in the next line here 175 00:11:03,660 --> 00:11:06,870 ‫we already got access to that new value. 176 00:11:06,870 --> 00:11:09,900 ‫And then here the 8.6 plus the 10 177 00:11:09,900 --> 00:11:12,390 ‫gave us the correct, the average. 178 00:11:12,390 --> 00:11:15,550 ‫And again here, this could be really called anything 179 00:11:16,410 --> 00:11:19,563 ‫and it would always work in the exact same way. 180 00:11:20,610 --> 00:11:25,610 ‫So if we do that again, then yeah, we will still get 9.3. 181 00:11:26,130 --> 00:11:29,220 ‫And so that's because this is simply the name 182 00:11:29,220 --> 00:11:32,010 ‫of the argument of the callback function 183 00:11:32,010 --> 00:11:35,190 ‫that React will pass into the function. 184 00:11:35,190 --> 00:11:37,830 ‫So it will simply pass the current state value 185 00:11:37,830 --> 00:11:39,120 ‫into the function. 186 00:11:39,120 --> 00:11:42,840 ‫But we can then of course give it any name that we want. 187 00:11:42,840 --> 00:11:44,670 ‫But let's put it back. 188 00:11:44,670 --> 00:11:48,030 ‫And indeed, let's actually remove all of this 189 00:11:48,030 --> 00:11:49,500 ‫that we just wrote. 190 00:11:49,500 --> 00:11:52,390 ‫So this was just yet another experiment 191 00:11:53,490 --> 00:11:56,823 ‫but I hope that it was a helpful one. 192 00:11:57,690 --> 00:11:59,040 ‫So here... 193 00:11:59,040 --> 00:12:01,863 ‫Actually no, I thought I saw some error there. 194 00:12:03,210 --> 00:12:04,500 ‫So let's put it back. 195 00:12:04,500 --> 00:12:07,833 ‫And so now the application should work just like before. 196 00:12:08,910 --> 00:12:13,230 ‫All right, and now there's just one final thing to learn 197 00:12:13,230 --> 00:12:14,940 ‫about the useState hook, 198 00:12:14,940 --> 00:12:19,740 ‫which is that besides using a callback like this 199 00:12:19,740 --> 00:12:22,680 ‫to update state, we can also use a callback 200 00:12:22,680 --> 00:12:24,360 ‫to initialize state. 201 00:12:24,360 --> 00:12:27,633 ‫And so let's learn how to do that in the next lecture.