1 00:00:01,290 --> 00:00:03,270 ‫Let's now put some of the things 2 00:00:03,270 --> 00:00:07,230 ‫that we just learned in the previous lecture into practice 3 00:00:07,230 --> 00:00:10,890 ‫and also magically synchronize our search query 4 00:00:10,890 --> 00:00:13,563 ‫with the movie search results. 5 00:00:15,060 --> 00:00:17,160 ‫And I actually want to start this lecture 6 00:00:17,160 --> 00:00:19,500 ‫with a couple of experiments. 7 00:00:19,500 --> 00:00:23,760 ‫And to do that, let's first do a couple of changes here. 8 00:00:23,760 --> 00:00:27,387 ‫First, let's set this back to "Interstellar." 9 00:00:28,680 --> 00:00:33,680 ‫And I also want to rename this variable here to tempQuery. 10 00:00:35,580 --> 00:00:39,690 ‫And that's because now we actually want to get 11 00:00:39,690 --> 00:00:44,520 ‫the query state that right now lives here inside search 12 00:00:44,520 --> 00:00:48,063 ‫into the app, so into its parent component. 13 00:00:49,050 --> 00:00:51,930 ‫So let's cut this from here 14 00:00:51,930 --> 00:00:56,130 ‫and we will then later pass in both of these back in. 15 00:00:56,130 --> 00:00:58,923 ‫So query and setQuery. 16 00:01:00,900 --> 00:01:04,770 ‫Okay, so we're basically lifting this state up 17 00:01:04,770 --> 00:01:08,583 ‫because we will need it here inside the app component. 18 00:01:10,230 --> 00:01:13,330 ‫So now let's pass those props in 19 00:01:15,090 --> 00:01:17,380 ‫so that Query equals Query 20 00:01:18,270 --> 00:01:22,906 ‫and setQuery is of course set. 21 00:01:22,906 --> 00:01:24,153 ‫Well, not error. 22 00:01:25,140 --> 00:01:26,133 ‫setQuery. 23 00:01:27,330 --> 00:01:30,972 ‫Apparently I wrote the name of the movie wrong here. 24 00:01:30,972 --> 00:01:32,877 ‫"Interstellar." 25 00:01:34,410 --> 00:01:39,410 ‫And then also let's get rid of this console dot log here. 26 00:01:41,910 --> 00:01:46,080 ‫Okay, let's reload just to clean this up. 27 00:01:46,080 --> 00:01:50,460 ‫And now let's do those experiments that I was talking about. 28 00:01:50,460 --> 00:01:53,760 ‫So basically I want to write a couple of effects here 29 00:01:53,760 --> 00:01:55,560 ‫and then I want you to guess 30 00:01:55,560 --> 00:01:58,613 ‫in which order they will be executed. 31 00:01:58,613 --> 00:02:01,683 ‫At least that's gonna be your first experiment. 32 00:02:03,000 --> 00:02:05,643 ‫So let's write one effect. 33 00:02:07,324 --> 00:02:11,610 ‫And then as always, we need to specify a function. 34 00:02:11,610 --> 00:02:15,423 ‫And this one will log to the console, the string A. 35 00:02:16,920 --> 00:02:20,940 ‫All right, then let's get another one. 36 00:02:20,940 --> 00:02:23,973 ‫And notice how this one doesn't have a dependency array. 37 00:02:25,080 --> 00:02:27,093 ‫Well, let's actually add it to this one, 38 00:02:28,260 --> 00:02:31,410 ‫but the second one here won't have any. 39 00:02:31,410 --> 00:02:34,950 ‫So this one will just log the string B. 40 00:02:34,950 --> 00:02:36,213 ‫And then finally, 41 00:02:37,410 --> 00:02:42,210 ‫I will simply do a console.log right here in the top level. 42 00:02:42,210 --> 00:02:46,920 ‫Okay, and now without running this code, let's try to guess 43 00:02:46,920 --> 00:02:49,590 ‫in which order these three strings here 44 00:02:49,590 --> 00:02:51,003 ‫will appear in the console. 45 00:02:52,020 --> 00:02:53,940 ‫So have you thought about it? 46 00:02:53,940 --> 00:02:55,470 ‫Well, I will now save 47 00:02:55,470 --> 00:02:57,423 ‫and then we will discuss the results. 48 00:02:58,560 --> 00:03:03,560 ‫Okay, and actually we have a lot of renders here, 49 00:03:04,410 --> 00:03:07,470 ‫a lot of results, but that's because the application 50 00:03:07,470 --> 00:03:10,770 ‫has rendered and re-rendered a couple of times. 51 00:03:10,770 --> 00:03:12,720 ‫And so then we got all these logs. 52 00:03:12,720 --> 00:03:17,430 ‫And also keep in mind that these effects actually run twice. 53 00:03:17,430 --> 00:03:18,450 ‫But what matters here 54 00:03:18,450 --> 00:03:22,263 ‫is that first we got C, then A, and then B. 55 00:03:23,280 --> 00:03:25,029 ‫So why did we get C first 56 00:03:25,029 --> 00:03:29,940 ‫even though it appears later here in the code? 57 00:03:29,940 --> 00:03:33,390 ‫Well, the reason is that as we just discussed before, 58 00:03:33,390 --> 00:03:37,320 ‫effects actually only run after the browser paint 59 00:03:37,320 --> 00:03:40,440 ‫while the render logic itself runs, 60 00:03:40,440 --> 00:03:43,350 ‫well, as the name says, during render. 61 00:03:43,350 --> 00:03:45,720 ‫And so then it makes sense that of course 62 00:03:45,720 --> 00:03:48,750 ‫this console.log here is executed first, 63 00:03:48,750 --> 00:03:51,750 ‫so during the render of this component. 64 00:03:51,750 --> 00:03:53,520 ‫And then we have A and B, 65 00:03:53,520 --> 00:03:55,470 ‫which comes from these two effects. 66 00:03:55,470 --> 00:03:57,930 ‫And so A is rendered first 67 00:03:57,930 --> 00:04:00,903 ‫simply because it appears first in the code. 68 00:04:02,340 --> 00:04:06,510 ‫Okay, now let's actually clear the console. 69 00:04:06,510 --> 00:04:10,350 ‫And now what I'm going to do is to type something here. 70 00:04:10,350 --> 00:04:12,900 ‫And so let's see what happens then. 71 00:04:12,900 --> 00:04:15,990 ‫And we get some more outputs. 72 00:04:15,990 --> 00:04:18,480 ‫So we get C and B. 73 00:04:18,480 --> 00:04:21,120 ‫So is this what you were expecting? 74 00:04:21,120 --> 00:04:23,943 ‫Well, let's again analyze what just happened here. 75 00:04:24,990 --> 00:04:28,980 ‫So we updated this state here, which is the query state 76 00:04:28,980 --> 00:04:32,970 ‫and as a result, the component was re-rendered. 77 00:04:32,970 --> 00:04:36,600 ‫And then just like before, this code here was executed 78 00:04:36,600 --> 00:04:41,040 ‫and so therefore we see the letter C first 79 00:04:41,040 --> 00:04:44,430 ‫and then after that we also have a B log. 80 00:04:44,430 --> 00:04:46,541 ‫And so that is this effect here 81 00:04:46,541 --> 00:04:49,470 ‫which has no dependency array, 82 00:04:49,470 --> 00:04:51,600 ‫which, remember, basically means 83 00:04:51,600 --> 00:04:54,801 ‫that this effect is synchronized with everything 84 00:04:54,801 --> 00:04:58,860 ‫and so therefore it needs to run on every render, 85 00:04:58,860 --> 00:05:00,690 ‫while this other effect here, 86 00:05:00,690 --> 00:05:05,400 ‫this first effect is synchronized with no variables at all, 87 00:05:05,400 --> 00:05:08,280 ‫which is the meaning of this empty array. 88 00:05:08,280 --> 00:05:11,280 ‫And therefore this effect was not executed 89 00:05:11,280 --> 00:05:15,426 ‫as the component was re-rendered with the query state. 90 00:05:15,426 --> 00:05:18,916 ‫Okay, so now we can change here the strings 91 00:05:18,916 --> 00:05:23,916 ‫and we can actually say that this here is during render. 92 00:05:26,130 --> 00:05:30,690 ‫This here is after every render, 93 00:05:30,690 --> 00:05:35,463 ‫and this is after the initial render. 94 00:05:38,670 --> 00:05:39,840 ‫Okay. 95 00:05:39,840 --> 00:05:41,820 ‫And of course, this is only for you to keep 96 00:05:41,820 --> 00:05:44,614 ‫as a reference here just so we are understanding 97 00:05:44,614 --> 00:05:46,383 ‫what's actually happening. 98 00:05:47,580 --> 00:05:50,370 ‫So now let's do another one. 99 00:05:50,370 --> 00:05:52,860 ‫So one final experiment here 100 00:05:52,860 --> 00:05:56,013 ‫which will be yet another effect. 101 00:05:59,880 --> 00:06:01,620 ‫Let's call this one D now. 102 00:06:01,620 --> 00:06:03,570 ‫And here in the dependency array, 103 00:06:03,570 --> 00:06:05,943 ‫we will have the query state. 104 00:06:06,990 --> 00:06:08,850 ‫So give it a save, 105 00:06:08,850 --> 00:06:12,243 ‫and now watch what happens when I type here. 106 00:06:13,680 --> 00:06:15,750 ‫So you see that this one here 107 00:06:15,750 --> 00:06:19,541 ‫during render, of course, always gets executed. 108 00:06:19,541 --> 00:06:22,890 ‫Then this one here, after every render as well, 109 00:06:22,890 --> 00:06:27,480 ‫and still not this one, but we now have this other effect 110 00:06:27,480 --> 00:06:31,170 ‫which is synchronized with the query state variable. 111 00:06:31,170 --> 00:06:33,420 ‫And so this query just changed 112 00:06:33,420 --> 00:06:37,519 ‫and therefore this effect was executed and logged D. 113 00:06:37,519 --> 00:06:39,240 ‫And if we keep doing this 114 00:06:39,240 --> 00:06:42,690 ‫then D keeps getting logged to the console, 115 00:06:42,690 --> 00:06:45,870 ‫while if we changed some of these other states here, 116 00:06:45,870 --> 00:06:48,320 ‫then we would not get D logged here. 117 00:06:48,320 --> 00:06:51,390 ‫So we cannot really simulate that here now 118 00:06:51,390 --> 00:06:54,183 ‫but you can still trust me on that one. 119 00:06:55,410 --> 00:06:58,860 ‫But anyway, let's now use what we just did here 120 00:06:58,860 --> 00:07:02,310 ‫to our actual advantage in the application. 121 00:07:02,310 --> 00:07:03,310 ‫So I will now 122 00:07:05,070 --> 00:07:09,840 ‫just comment these out and reload here. 123 00:07:09,840 --> 00:07:12,480 ‫And so now the time has come 124 00:07:12,480 --> 00:07:15,690 ‫where we actually want to use the query from here 125 00:07:15,690 --> 00:07:20,190 ‫right inside this URL where we fetch the movies. 126 00:07:20,190 --> 00:07:22,290 ‫So basically we want to fetch movies 127 00:07:22,290 --> 00:07:24,963 ‫based on the search query right here. 128 00:07:25,800 --> 00:07:27,870 ‫So instead of the temporary query, 129 00:07:27,870 --> 00:07:32,040 ‫let's now use query here, give it a save. 130 00:07:32,040 --> 00:07:35,790 ‫But of course, like this, it is not going to work. 131 00:07:35,790 --> 00:07:39,030 ‫So as we change this here to something 132 00:07:39,030 --> 00:07:40,991 ‫nothing is going to happen. 133 00:07:40,991 --> 00:07:43,260 ‫And why is that? 134 00:07:43,260 --> 00:07:45,360 ‫Well, it's because this effect 135 00:07:45,360 --> 00:07:48,810 ‫is not yet synchronized with the query state. 136 00:07:48,810 --> 00:07:52,950 ‫So we are using this state variable inside the effect 137 00:07:52,950 --> 00:07:54,510 ‫but the effect doesn't know yet 138 00:07:54,510 --> 00:07:57,060 ‫that it will have to rerun each time 139 00:07:57,060 --> 00:07:58,931 ‫that a query state changes. 140 00:07:58,931 --> 00:08:03,060 ‫And so to fix that, we need to include that query 141 00:08:03,060 --> 00:08:05,077 ‫here in the dependency array. 142 00:08:05,077 --> 00:08:09,210 ‫And actually you see already that React is complaining. 143 00:08:09,210 --> 00:08:10,560 ‫So here as we hover, 144 00:08:10,560 --> 00:08:13,473 ‫we see that this hook has a missing dependency. 145 00:08:14,610 --> 00:08:18,570 ‫So this error or this warning actually is really, 146 00:08:18,570 --> 00:08:21,210 ‫really helpful so that we never forget 147 00:08:21,210 --> 00:08:26,100 ‫to correctly declare the dependencies of this effect. 148 00:08:26,100 --> 00:08:28,590 ‫And so as we give it a save now, 149 00:08:28,590 --> 00:08:32,370 ‫let's again reload, and here now we get this error 150 00:08:32,370 --> 00:08:36,030 ‫that the movie is not found, which is because our query 151 00:08:36,030 --> 00:08:38,910 ‫by default is just this empty string. 152 00:08:38,910 --> 00:08:43,200 ‫But if we try now, let's say test, 153 00:08:43,200 --> 00:08:46,470 ‫then, well, it still doesn't work. 154 00:08:46,470 --> 00:08:49,683 ‫So let's come again to our network tab. 155 00:08:51,210 --> 00:08:52,470 ‫So let's just check out 156 00:08:52,470 --> 00:08:56,973 ‫if actually the HTTP request has been correctly made. 157 00:08:58,560 --> 00:09:00,510 ‫And so by doing this, you're also learning 158 00:09:00,510 --> 00:09:03,003 ‫about these very important developer tools here. 159 00:09:04,539 --> 00:09:09,060 ‫Okay, so here we see some new HTTP requests 160 00:09:09,060 --> 00:09:14,010 ‫and as we click here, we actually do see a response. 161 00:09:14,010 --> 00:09:15,510 ‫So there is something there 162 00:09:15,510 --> 00:09:19,469 ‫but somehow our movies are still not being shown here. 163 00:09:19,469 --> 00:09:23,280 ‫And I think I know the reason for that 164 00:09:23,280 --> 00:09:27,090 ‫which is that we are never resetting the error state. 165 00:09:27,090 --> 00:09:29,790 ‫So at some point we had some error here 166 00:09:29,790 --> 00:09:31,860 ‫but now we no longer have an error, 167 00:09:31,860 --> 00:09:34,200 ‫but at no point in the application 168 00:09:34,200 --> 00:09:36,266 ‫we are actually resetting it. 169 00:09:36,266 --> 00:09:39,330 ‫So we need to also do that here in the finally, 170 00:09:39,330 --> 00:09:42,000 ‫or actually better yet, 171 00:09:42,000 --> 00:09:44,790 ‫we should do it right here at the very beginning. 172 00:09:44,790 --> 00:09:48,450 ‫So basically, always before we start fetching for data, 173 00:09:48,450 --> 00:09:50,163 ‫we reset the error. 174 00:09:51,180 --> 00:09:52,623 ‫So set error, 175 00:09:53,670 --> 00:09:56,250 ‫and then back to the empty string. 176 00:09:56,250 --> 00:10:01,250 ‫Give it a save, and now we get some results for test. 177 00:10:03,720 --> 00:10:06,170 ‫Okay, and then as we delete this 178 00:10:06,170 --> 00:10:08,457 ‫then we are back to "Movie not found." 179 00:10:10,410 --> 00:10:14,889 ‫The same for "inter" for some reason, and then "stellar." 180 00:10:14,889 --> 00:10:19,708 ‫And now we get some movie here, it's not the same as before. 181 00:10:19,708 --> 00:10:23,730 ‫And the reason for that is something called a race condition 182 00:10:23,730 --> 00:10:26,880 ‫but at least something is working here. 183 00:10:26,880 --> 00:10:31,271 ‫So if I write this a bit slower, then it works just fine. 184 00:10:31,271 --> 00:10:35,760 ‫And of course this works with any other movie 185 00:10:35,760 --> 00:10:38,980 ‫as long as for now you type slow enough. 186 00:10:38,980 --> 00:10:41,490 ‫Now I want to fix this problem 187 00:10:41,490 --> 00:10:44,760 ‫that when we have no search query here 188 00:10:44,760 --> 00:10:47,160 ‫then it tells us "Movie not found," 189 00:10:47,160 --> 00:10:49,320 ‫which is not really true. 190 00:10:49,320 --> 00:10:52,800 ‫I mean, it is true because the API actually searched 191 00:10:52,800 --> 00:10:54,960 ‫for a movie with an empty string. 192 00:10:54,960 --> 00:10:57,690 ‫But in a situation where we have no query 193 00:10:57,690 --> 00:11:02,280 ‫we actually don't even want to search, right? 194 00:11:02,280 --> 00:11:05,820 ‫And so let's do that here in our effect. 195 00:11:05,820 --> 00:11:07,350 ‫And actually let's do it 196 00:11:07,350 --> 00:11:10,323 ‫before we even call this function here. 197 00:11:13,590 --> 00:11:18,377 ‫So we can say if there is no query.length, 198 00:11:20,130 --> 00:11:23,223 ‫so it's going to be zero in this situation, 199 00:11:24,540 --> 00:11:29,540 ‫then simply set to Movies back to an empty array. 200 00:11:29,820 --> 00:11:32,340 ‫So basically then removing all the movies 201 00:11:32,340 --> 00:11:34,503 ‫from the user interface, 202 00:11:35,820 --> 00:11:37,630 ‫then let's also reset the error 203 00:11:39,330 --> 00:11:41,373 ‫back to nothing and then return. 204 00:11:42,300 --> 00:11:45,566 ‫And so in this situation then the fetchMovies function 205 00:11:45,566 --> 00:11:48,420 ‫will not even be caught. 206 00:11:48,420 --> 00:11:51,390 ‫And here we can actually go even further. 207 00:11:51,390 --> 00:11:56,390 ‫So we can say, like if the query length is less than three, 208 00:11:56,490 --> 00:11:58,893 ‫then it's not even worth searching as well. 209 00:11:59,880 --> 00:12:02,670 ‫So it doesn't even make sense to have 210 00:12:02,670 --> 00:12:05,163 ‫a query just like this, right? 211 00:12:06,450 --> 00:12:09,303 ‫So there's no movies really called like that. 212 00:12:10,830 --> 00:12:13,353 ‫So going back again to our network tab, 213 00:12:14,610 --> 00:12:16,797 ‫if we just type like this, 214 00:12:16,797 --> 00:12:21,090 ‫you see that no new fetch requests were made. 215 00:12:21,090 --> 00:12:23,280 ‫But now if I keep writing, 216 00:12:23,280 --> 00:12:26,880 ‫so now we have more than three characters, 217 00:12:26,880 --> 00:12:31,350 ‫then we had our first HTTP request to the API, 218 00:12:31,350 --> 00:12:33,916 ‫then we got these results, and if I type again 219 00:12:33,916 --> 00:12:36,780 ‫then you see we got another one. 220 00:12:36,780 --> 00:12:39,060 ‫And now when I delete all this 221 00:12:39,060 --> 00:12:42,270 ‫then it simply goes back to empty. 222 00:12:42,270 --> 00:12:47,100 ‫So we deleted all the movies from our state, basically. 223 00:12:47,100 --> 00:12:48,480 ‫Okay, and so with this, 224 00:12:48,480 --> 00:12:52,530 ‫we have the basic functionality already implemented. 225 00:12:52,530 --> 00:12:55,380 ‫So let's recap what we just did here 226 00:12:55,380 --> 00:12:57,150 ‫and what is going to happen 227 00:12:57,150 --> 00:12:59,613 ‫whenever we type a new query here. 228 00:13:00,810 --> 00:13:05,580 ‫So the query is of course a piece of state, right? 229 00:13:05,580 --> 00:13:07,320 ‫So that is pretty obvious. 230 00:13:07,320 --> 00:13:10,440 ‫And so we are referencing that query variable 231 00:13:10,440 --> 00:13:15,330 ‫a couple of times inside our effect here, right? 232 00:13:15,330 --> 00:13:19,260 ‫And so therefore, we then included this query variable 233 00:13:19,260 --> 00:13:22,410 ‫also in the dependency array of this effect. 234 00:13:22,410 --> 00:13:24,510 ‫And so now our use effect hook 235 00:13:24,510 --> 00:13:26,910 ‫is basically like an event handler 236 00:13:26,910 --> 00:13:29,730 ‫that is listening for the query to change. 237 00:13:29,730 --> 00:13:31,800 ‫And so then when it changes 238 00:13:31,800 --> 00:13:36,030 ‫the entire effect is executed again, which in our case means 239 00:13:36,030 --> 00:13:40,860 ‫that a new request is gonna be made to our movies API. 240 00:13:40,860 --> 00:13:44,130 ‫So again, this effect that we just wrote here 241 00:13:44,130 --> 00:13:48,240 ‫basically reacts to an update to this state variable, 242 00:13:48,240 --> 00:13:52,200 ‫which makes the entire effect basically reactive, 243 00:13:52,200 --> 00:13:54,930 ‫so reactive to that state. 244 00:13:54,930 --> 00:13:58,890 ‫But at the same time, our effect will also be still executed 245 00:13:58,890 --> 00:14:01,290 ‫during the initial render. 246 00:14:01,290 --> 00:14:03,690 ‫Just right now, that is the empty string, 247 00:14:03,690 --> 00:14:07,380 ‫which we just basically told our effect to ignore. 248 00:14:07,380 --> 00:14:10,473 ‫So let's write another amazing movie here. 249 00:14:11,670 --> 00:14:15,390 ‫And so as we save this now, and so as our application 250 00:14:15,390 --> 00:14:20,310 ‫first loads, it will immediately fetch the data right here. 251 00:14:20,310 --> 00:14:24,090 ‫And so indeed, as we just learned in the previous lecture, 252 00:14:24,090 --> 00:14:28,170 ‫this effect basically now runs on the initial render 253 00:14:28,170 --> 00:14:31,260 ‫and whenever the state variable here updates. 254 00:14:31,260 --> 00:14:34,110 ‫So it is synchronized with this variable here. 255 00:14:34,110 --> 00:14:36,928 ‫And as you see, this is really, really powerful 256 00:14:36,928 --> 00:14:40,350 ‫and can be used in all kinds of situations. 257 00:14:40,350 --> 00:14:42,720 ‫So make sure that you really understand 258 00:14:42,720 --> 00:14:44,760 ‫everything that we just did here, 259 00:14:44,760 --> 00:14:48,270 ‫as this was a really, really important lecture. 260 00:14:48,270 --> 00:14:50,880 ‫And then let's move on to the next video 261 00:14:50,880 --> 00:14:53,730 ‫where we will finally have the ability 262 00:14:53,730 --> 00:14:55,740 ‫to select one of these movies 263 00:14:55,740 --> 00:14:58,740 ‫so that we can then load some additional details 264 00:14:58,740 --> 00:15:00,480 ‫here into the right side. 265 00:15:00,480 --> 00:15:02,940 ‫So that's gonna be really, really fun. 266 00:15:02,940 --> 00:15:05,553 ‫And so I hope to see you there soon.