1 00:00:01,110 --> 00:00:03,870 ‫So let's now load movie details 2 00:00:03,870 --> 00:00:05,823 ‫about individual movies. 3 00:00:07,380 --> 00:00:11,760 ‫So essentially whenever this movie details component here 4 00:00:11,760 --> 00:00:15,210 ‫is going to mount, we will want to fetch the movie 5 00:00:15,210 --> 00:00:18,480 ‫corresponding to the selected ID. 6 00:00:18,480 --> 00:00:21,633 ‫So basically loading the currently selected movie. 7 00:00:23,250 --> 00:00:26,190 ‫So since we want to do that each time 8 00:00:26,190 --> 00:00:27,720 ‫that this component mounts, 9 00:00:27,720 --> 00:00:30,453 ‫that means that we will want a use effect. 10 00:00:35,070 --> 00:00:36,663 ‫So our effect function. 11 00:00:38,280 --> 00:00:39,990 ‫And then as I just said 12 00:00:39,990 --> 00:00:42,930 ‫we want this to happen each time the component renders. 13 00:00:42,930 --> 00:00:46,113 ‫And so that's simply the empty dependency array. 14 00:00:47,940 --> 00:00:50,880 ‫Now, okay, and now we want an async function. 15 00:00:50,880 --> 00:00:54,540 ‫And so well that's actually right async. 16 00:00:54,540 --> 00:00:56,680 ‫So async function 17 00:00:57,690 --> 00:00:58,523 ‫and let's call this one, 18 00:00:58,523 --> 00:01:02,747 ‫"Get movie details", okay? 19 00:01:04,590 --> 00:01:09,590 ‫And now let's actually come here to our API documentation. 20 00:01:10,390 --> 00:01:15,120 ‫And so now here what we want to do is to search by ID. 21 00:01:15,120 --> 00:01:18,490 ‫So here the parameter is now this I 22 00:01:18,490 --> 00:01:22,948 ‫which will receive exactly this type of IMDB ID 23 00:01:22,948 --> 00:01:24,603 ‫that we have been working with. 24 00:01:26,130 --> 00:01:29,570 ‫So let's actually grab the fetch from here 25 00:01:29,570 --> 00:01:31,533 ‫because it's very similar. 26 00:01:33,990 --> 00:01:35,403 ‫So basically just this, 27 00:01:38,310 --> 00:01:41,680 ‫and let's place it right here. 28 00:01:41,680 --> 00:01:45,290 ‫And so now this is why we hatch the key in a separate value 29 00:01:45,290 --> 00:01:48,560 ‫because here we of course need that key again. 30 00:01:48,560 --> 00:01:53,560 ‫Now, here it is I and then it is here, the selected ID. 31 00:01:56,550 --> 00:01:59,670 ‫Now, all right now you see that VS code. 32 00:01:59,670 --> 00:02:02,350 ‫And yes, lin are already complaining here 33 00:02:02,350 --> 00:02:07,350 ‫but we will for now not give them what they want basically. 34 00:02:07,890 --> 00:02:10,833 ‫So we first want to see what's going to happen. 35 00:02:12,840 --> 00:02:17,560 ‫So then let's grab the data here from the response 36 00:02:18,810 --> 00:02:21,770 ‫and of course await this data. 37 00:02:21,770 --> 00:02:26,153 ‫And then for now, let's just log it to the console, okay? 38 00:02:27,650 --> 00:02:30,790 ‫And this should already be working at this point 39 00:02:33,240 --> 00:02:34,443 ‫so let's reload. 40 00:02:36,540 --> 00:02:39,810 ‫And nothing happens, of course. 41 00:02:39,810 --> 00:02:42,439 ‫I mean VS code is even telling me about it by saying 42 00:02:42,439 --> 00:02:46,023 ‫that I didn't call the function there. 43 00:02:46,910 --> 00:02:48,990 ‫So let's try that again. 44 00:02:48,990 --> 00:02:53,310 ‫And immediately, actually it loaded my movie here. 45 00:02:53,310 --> 00:02:56,970 ‫So we see that this time we actually get all this data 46 00:02:56,970 --> 00:02:59,010 ‫about the movie, which again, 47 00:02:59,010 --> 00:03:00,900 ‫we didn't get simply here 48 00:03:00,900 --> 00:03:04,830 ‫when we searched for the movies, okay? 49 00:03:04,830 --> 00:03:07,560 ‫But now we want to get some of this data here 50 00:03:07,560 --> 00:03:10,470 ‫into our visible user interface. 51 00:03:10,470 --> 00:03:12,950 ‫So in a visible part of the component. 52 00:03:12,950 --> 00:03:14,800 ‫And so how do we do that? 53 00:03:14,800 --> 00:03:18,663 ‫Well, as always, we need a new piece of state. 54 00:03:21,540 --> 00:03:25,203 ‫So movie and set movie, 55 00:03:26,940 --> 00:03:29,850 ‫and here the default will now be an empty object 56 00:03:29,850 --> 00:03:31,740 ‫because an object is exactly 57 00:03:31,740 --> 00:03:35,070 ‫what we got back here from this API call. 58 00:03:35,070 --> 00:03:38,130 ‫And so now instead of logging that to the console 59 00:03:38,130 --> 00:03:41,823 ‫let's just do set movie to the data. 60 00:03:43,080 --> 00:03:43,913 ‫All right. 61 00:03:43,913 --> 00:03:46,530 ‫And so now we should be ready to use 62 00:03:46,530 --> 00:03:48,543 ‫that data here in our JSX. 63 00:03:50,640 --> 00:03:54,480 ‫So actually let's destructure now the object 64 00:03:54,480 --> 00:03:57,450 ‫because I really don't like these variable names here 65 00:03:57,450 --> 00:03:58,390 ‫all uppercase. 66 00:03:58,390 --> 00:04:01,353 ‫I have no idea why they did it this way. 67 00:04:02,670 --> 00:04:05,580 ‫So we will basically now the structure data 68 00:04:05,580 --> 00:04:07,773 ‫out of this movie. 69 00:04:10,230 --> 00:04:11,313 ‫So the title. 70 00:04:12,540 --> 00:04:15,750 ‫We will call title in our own code. 71 00:04:15,750 --> 00:04:18,203 ‫Then we will want the year, 72 00:04:18,203 --> 00:04:20,850 ‫which is simply called year. 73 00:04:20,850 --> 00:04:22,533 ‫We will want the poster, 74 00:04:24,900 --> 00:04:27,363 ‫we want the runtime, 75 00:04:33,510 --> 00:04:36,660 ‫we want the IMDB rating as well. 76 00:04:36,660 --> 00:04:38,463 ‫So this one is actually correct. 77 00:04:39,780 --> 00:04:40,953 ‫We want the plot, 78 00:04:44,490 --> 00:04:46,053 ‫the released date, 79 00:04:48,240 --> 00:04:50,550 ‫so released like this. 80 00:04:50,550 --> 00:04:52,113 ‫The actors array, 81 00:04:55,770 --> 00:04:57,063 ‫the director, 82 00:04:58,710 --> 00:05:02,943 ‫and finally also the genre of the movie. 83 00:05:04,800 --> 00:05:06,840 ‫Now, okay, so we have all these variables 84 00:05:06,840 --> 00:05:09,680 ‫which you see we haven't used yet. 85 00:05:09,680 --> 00:05:11,920 ‫Let's just use them here in 86 00:05:13,110 --> 00:05:16,230 ‫our rendering logic just so I can see you. 87 00:05:16,230 --> 00:05:18,170 ‫What's going to happen? 88 00:05:18,170 --> 00:05:20,643 ‫So maybe the title and the year. 89 00:05:21,780 --> 00:05:23,810 ‫And so let's reload. 90 00:05:23,810 --> 00:05:25,467 ‫Let's select this one. 91 00:05:25,467 --> 00:05:28,380 ‫And then you see that first we get undefined, 92 00:05:28,380 --> 00:05:30,990 ‫undefined and then after a second 93 00:05:30,990 --> 00:05:35,220 ‫we get the indeed the title and the year. 94 00:05:35,220 --> 00:05:37,470 ‫So why is that? 95 00:05:37,470 --> 00:05:39,330 ‫Well, here in the very beginning 96 00:05:39,330 --> 00:05:42,700 ‫of course when the component is initially mounted 97 00:05:42,700 --> 00:05:46,010 ‫then the movie is still this empty object here. 98 00:05:46,010 --> 00:05:49,230 ‫And so then title and year read 99 00:05:49,230 --> 00:05:52,083 ‫from that empty object are simply undefined. 100 00:05:53,100 --> 00:05:57,510 ‫So then this effect here starts and it gets the movie 101 00:05:57,510 --> 00:06:00,420 ‫and will then store it into our movie state. 102 00:06:00,420 --> 00:06:02,790 ‫And so then the component is rerendered. 103 00:06:02,790 --> 00:06:05,510 ‫And then of course this object is no longer empty. 104 00:06:05,510 --> 00:06:09,180 ‫And so then the rendering logic here will read all 105 00:06:09,180 --> 00:06:10,790 ‫of this data out of the object. 106 00:06:10,790 --> 00:06:12,970 ‫And so then we successfully log that 107 00:06:12,970 --> 00:06:17,610 ‫to the console over here all but anyway 108 00:06:17,610 --> 00:06:21,843 ‫let's now actually use this right in our JSX here. 109 00:06:25,080 --> 00:06:27,840 ‫So let's start with a header element. 110 00:06:27,840 --> 00:06:31,953 ‫So not a component, but really an element. 111 00:06:34,590 --> 00:06:36,755 ‫And in there we have an image, 112 00:06:36,755 --> 00:06:41,755 ‫which is the poster and then the alt image 113 00:06:42,990 --> 00:06:44,493 ‫or the alt tech actually. 114 00:06:47,760 --> 00:06:51,663 ‫So poster of the movie. 115 00:06:52,500 --> 00:06:54,180 ‫So this is a template literal 116 00:06:54,180 --> 00:06:55,953 ‫so it works a bit differently. 117 00:06:59,579 --> 00:07:02,643 ‫So what's the problem here now? 118 00:07:03,810 --> 00:07:06,813 ‫Ah, of course I didn't close the image. 119 00:07:08,070 --> 00:07:11,700 ‫Next we have a div with the class of details overview. 120 00:07:11,700 --> 00:07:16,050 ‫And so envious code, we can actually just type dot 121 00:07:16,050 --> 00:07:17,640 ‫and then the class name, 122 00:07:17,640 --> 00:07:22,590 ‫then hit tab and well that should actually 123 00:07:22,590 --> 00:07:25,200 ‫then create a div with that class. 124 00:07:25,200 --> 00:07:28,890 ‫So that has always worked for some reason. 125 00:07:28,890 --> 00:07:30,150 ‫Now that's not working. 126 00:07:30,150 --> 00:07:32,523 ‫So let's just do it manually then. 127 00:07:34,170 --> 00:07:37,600 ‫So H two for the title. 128 00:07:37,600 --> 00:07:39,760 ‫And here we are typing a lot of JSX. 129 00:07:39,760 --> 00:07:42,170 ‫And if you don't want to do that 130 00:07:42,170 --> 00:07:45,810 ‫then you can just get the code here 131 00:07:45,810 --> 00:07:48,813 ‫from the final files of this lecture. 132 00:07:51,510 --> 00:07:54,033 ‫So here we want to run time. 133 00:07:56,940 --> 00:07:59,730 ‫All right, released is not defined. 134 00:07:59,730 --> 00:08:03,723 ‫Re oh, well I didn't type that correctly. 135 00:08:06,210 --> 00:08:09,843 ‫Now that's already starting to look like something there. 136 00:08:11,090 --> 00:08:12,693 ‫Yeah, let's keep going here. 137 00:08:16,080 --> 00:08:21,080 ‫Next up we have the genre and then also the rating. 138 00:08:22,150 --> 00:08:25,713 ‫So here we're going to have like a star emoji. 139 00:08:30,770 --> 00:08:34,520 ‫And then here basically just the IMDB rating. 140 00:08:35,700 --> 00:08:40,097 ‫That's actually right, that there IMDB rating. 141 00:08:42,930 --> 00:08:44,910 ‫Yeah, that's looking really nice. 142 00:08:44,910 --> 00:08:46,870 ‫So that's the header part here. 143 00:08:46,870 --> 00:08:51,870 ‫And so now let's do a section element like this. 144 00:08:55,410 --> 00:08:56,243 ‫So a paragraph. 145 00:08:56,243 --> 00:08:59,430 ‫And in there I want some emphasized text, 146 00:08:59,430 --> 00:09:01,923 ‫which is going to be the movie plot. 147 00:09:06,540 --> 00:09:09,843 ‫Then staring the actors. 148 00:09:11,550 --> 00:09:12,940 ‫So this is just a string 149 00:09:14,870 --> 00:09:19,293 ‫And then just directed by the director. 150 00:09:20,490 --> 00:09:23,133 ‫All right, and there we go. 151 00:09:24,150 --> 00:09:27,359 ‫Nice. We still have the selected ID here 152 00:09:27,359 --> 00:09:29,853 ‫which we now no longer need. 153 00:09:31,020 --> 00:09:34,280 ‫All right, and now there's just one thing missing. 154 00:09:34,280 --> 00:09:36,090 ‫So if you come here, 155 00:09:36,090 --> 00:09:39,150 ‫you see that we have this rating component 156 00:09:39,150 --> 00:09:42,300 ‫and does this look familiar to you? 157 00:09:42,300 --> 00:09:45,840 ‫Well, we spent like an hour or more building that 158 00:09:45,840 --> 00:09:49,470 ‫so hopefully this is still familiar to you. 159 00:09:49,470 --> 00:09:51,930 ‫And so let's actually now grab 160 00:09:51,930 --> 00:09:55,503 ‫that star rating component that we built earlier. 161 00:09:56,520 --> 00:09:59,710 ‫So let's write star rating. 162 00:09:59,710 --> 00:10:02,490 ‫And I thought that it would actually get 163 00:10:02,490 --> 00:10:04,330 ‫automatically imported 164 00:10:05,760 --> 00:10:07,590 ‫but let's then do it manually. 165 00:10:07,590 --> 00:10:11,160 ‫So I think it should be right here in the same folder. 166 00:10:11,160 --> 00:10:16,160 ‫Yeah, so import star rating from, and then star rating. 167 00:10:26,730 --> 00:10:30,900 ‫Okay, now here we need the dot for the relative file. 168 00:10:32,280 --> 00:10:33,840 ‫And there it is. 169 00:10:33,840 --> 00:10:36,250 ‫Now it is a bit too big. 170 00:10:36,250 --> 00:10:39,990 ‫And also we want 10 stars, not just five. 171 00:10:39,990 --> 00:10:42,979 ‫So on IMDB, if you know the site. 172 00:10:42,979 --> 00:10:47,090 ‫then you know that their movies are rated from one to 10. 173 00:10:47,090 --> 00:10:49,653 ‫That's also why we have here the 8.8. 174 00:10:51,000 --> 00:10:54,590 ‫So here we can now use that API basically 175 00:10:54,590 --> 00:10:57,453 ‫that we built for this component. 176 00:10:58,440 --> 00:11:02,130 ‫So that's max rating to 10. 177 00:11:02,130 --> 00:11:06,630 ‫And then the size of 24, let's say. 178 00:11:06,630 --> 00:11:09,220 ‫So that's half the size by default I think. 179 00:11:09,220 --> 00:11:11,190 ‫And then let's also place this 180 00:11:11,190 --> 00:11:15,227 ‫into a div vertical class name of rating. 181 00:11:21,060 --> 00:11:22,803 ‫Okay, beautiful. 182 00:11:24,000 --> 00:11:24,930 ‫Now of course for now, 183 00:11:24,930 --> 00:11:29,520 ‫this rating is not being stored anyway or anywhere. 184 00:11:29,520 --> 00:11:33,510 ‫And so if we reload now and then of course it is gone. 185 00:11:33,510 --> 00:11:34,343 ‫But for now, 186 00:11:34,343 --> 00:11:38,310 ‫the component here is working pretty nice, isn't it? 187 00:11:38,310 --> 00:11:39,960 ‫But watch what happens 188 00:11:39,960 --> 00:11:42,810 ‫if I now try to select another movie here. 189 00:11:42,810 --> 00:11:44,253 ‫So let's say this one. 190 00:11:45,510 --> 00:11:49,200 ‫So nothing happened right now. 191 00:11:49,200 --> 00:11:52,540 ‫If I close this and then open up the second one here 192 00:11:52,540 --> 00:11:56,700 ‫for example, then you see that it's working fine. 193 00:11:56,700 --> 00:11:59,400 ‫But again, if I now click on another one, 194 00:11:59,400 --> 00:12:02,190 ‫then we got the same problem our component here 195 00:12:02,190 --> 00:12:04,410 ‫is not updating. 196 00:12:04,410 --> 00:12:06,840 ‫So why do you think that is? 197 00:12:06,840 --> 00:12:08,883 ‫What might be happening here? 198 00:12:10,110 --> 00:12:13,590 ‫Well, we told our effect here to load the movie 199 00:12:13,590 --> 00:12:17,970 ‫data whenever the component first mounts, right? 200 00:12:17,970 --> 00:12:21,630 ‫However, when we click here on one of these other movies 201 00:12:21,630 --> 00:12:25,290 ‫this component is actually not mount again. 202 00:12:25,290 --> 00:12:27,540 ‫So the initial render will not happen again 203 00:12:27,540 --> 00:12:30,530 ‫because the component is already mounted. 204 00:12:30,530 --> 00:12:33,840 ‫And the reason for that is the one that we learned 205 00:12:33,840 --> 00:12:37,710 ‫in the previous section, it is because this component here 206 00:12:37,710 --> 00:12:40,920 ‫so the movie detail component is rendered 207 00:12:40,920 --> 00:12:43,410 ‫in exactly the same place in a component tree. 208 00:12:43,410 --> 00:12:46,330 ‫And so as we click here on another movie 209 00:12:46,330 --> 00:12:49,770 ‫simply another prop will be passed into the component 210 00:12:49,770 --> 00:12:52,920 ‫but the component itself will not be destroyed. 211 00:12:52,920 --> 00:12:55,230 ‫It will stay in the component tree. 212 00:12:55,230 --> 00:12:58,620 ‫And so the only thing that is changing as we click on one 213 00:12:58,620 --> 00:13:03,130 ‫of the other movies is the ID prop that is being passed in. 214 00:13:03,130 --> 00:13:04,890 ‫So the selected ID prop 215 00:13:04,890 --> 00:13:07,090 ‫that's the only thing that is changing. 216 00:13:07,090 --> 00:13:09,540 ‫And so therefore, right now 217 00:13:09,540 --> 00:13:12,850 ‫this effect here will not run again because again, 218 00:13:12,850 --> 00:13:15,930 ‫it is only running when the component mounts 219 00:13:15,930 --> 00:13:18,960 ‫which really only happens once. 220 00:13:18,960 --> 00:13:22,330 ‫Now of course, if I close this and then go to another one 221 00:13:22,330 --> 00:13:24,920 ‫then the component has been unmounted first 222 00:13:24,920 --> 00:13:26,600 ‫and then it is mounting again. 223 00:13:26,600 --> 00:13:30,480 ‫And so therefore then it is going to work. 224 00:13:30,480 --> 00:13:33,030 ‫So how do we solve this? 225 00:13:33,030 --> 00:13:35,310 ‫Well, the answer lies again 226 00:13:35,310 --> 00:13:38,700 ‫right here in the dependency array. 227 00:13:38,700 --> 00:13:41,979 ‫So here, if we now pass in the selected ID 228 00:13:41,979 --> 00:13:44,820 ‫which is the prop that changes, 229 00:13:44,820 --> 00:13:46,743 ‫then let's see what happens. 230 00:13:47,910 --> 00:13:51,130 ‫So you saw that now it did actually work. 231 00:13:51,130 --> 00:13:54,720 ‫And so the reason is that now as the selected ID 232 00:13:54,720 --> 00:13:58,859 ‫prop changes, then the effect will indeed be executed again 233 00:13:58,859 --> 00:14:03,090 ‫because remember, this dependency array is a little bit like 234 00:14:03,090 --> 00:14:05,280 ‫an event listener that is listening 235 00:14:05,280 --> 00:14:08,370 ‫for one of the dependencies to change. 236 00:14:08,370 --> 00:14:11,490 ‫And so now as we click on another movie 237 00:14:11,490 --> 00:14:13,410 ‫this prop here will change. 238 00:14:13,410 --> 00:14:14,970 ‫And so yeah, 239 00:14:14,970 --> 00:14:17,460 ‫our effect is then executed again, 240 00:14:17,460 --> 00:14:20,190 ‫which gives us exactly the functionality 241 00:14:20,190 --> 00:14:22,530 ‫that we were looking for. 242 00:14:22,530 --> 00:14:26,460 ‫So that's really great and really powerful 243 00:14:26,460 --> 00:14:29,340 ‫and it's therefore also really important to 244 00:14:29,340 --> 00:14:33,690 ‫understand how exactly this dependency array works. 245 00:14:33,690 --> 00:14:35,960 ‫And now just one final thing 246 00:14:35,960 --> 00:14:39,210 ‫which is that watch what happens when I click 247 00:14:39,210 --> 00:14:42,250 ‫on one of the other movies actually here 248 00:14:43,570 --> 00:14:46,500 ‫well probably you cannot really see it because 249 00:14:46,500 --> 00:14:48,240 ‫you can't really see when I click, 250 00:14:48,240 --> 00:14:51,510 ‫but there is a visible delay between the click 251 00:14:51,510 --> 00:14:53,400 ‫and something changing here. 252 00:14:53,400 --> 00:14:55,980 ‫And so of course that's because in the background 253 00:14:55,980 --> 00:14:57,753 ‫the movie needs to be fetched. 254 00:14:58,950 --> 00:15:00,270 ‫So just like before, 255 00:15:00,270 --> 00:15:03,300 ‫what we want now is a quick loading indicator 256 00:15:03,300 --> 00:15:06,840 ‫just to let the user know that something is happening. 257 00:15:06,840 --> 00:15:09,633 ‫And so let's do that exactly as before. 258 00:15:12,150 --> 00:15:14,490 ‫So we create a new is loading state 259 00:15:14,490 --> 00:15:19,490 ‫and then set is loading and we start with faults. 260 00:15:22,740 --> 00:15:26,560 ‫And then immediately before we start fetching 261 00:15:27,570 --> 00:15:30,420 ‫we set is loading to true. 262 00:15:30,420 --> 00:15:33,063 ‫And as soon as it is done, 263 00:15:34,140 --> 00:15:35,553 ‫we set it back to faults. 264 00:15:37,303 --> 00:15:39,570 ‫So just as simple as this. 265 00:15:39,570 --> 00:15:41,610 ‫And by the way, in this time here 266 00:15:41,610 --> 00:15:43,620 ‫we are not handling errors 267 00:15:43,620 --> 00:15:47,630 ‫but you could do that just like we did in the beginning. 268 00:15:47,630 --> 00:15:48,600 ‫So if you want, 269 00:15:48,600 --> 00:15:51,030 ‫you can just go ahead and copy that basically. 270 00:15:51,030 --> 00:15:53,700 ‫But here, in order to save some time 271 00:15:53,700 --> 00:15:57,453 ‫I will just ignore the possibility of there being an error. 272 00:15:58,950 --> 00:16:02,490 ‫But anyway, let's now use that loading state. 273 00:16:02,490 --> 00:16:06,960 ‫And so let's do it right here. 274 00:16:06,960 --> 00:16:08,480 ‫So inside the details, 275 00:16:08,480 --> 00:16:11,910 ‫so we always want to return this div here 276 00:16:11,910 --> 00:16:15,420 ‫but if we are still loading, 277 00:16:15,420 --> 00:16:16,920 ‫so it's loading. 278 00:16:16,920 --> 00:16:20,998 ‫Then we want to now use again our loader components. 279 00:16:20,998 --> 00:16:25,998 ‫So a reusable component but if not, 280 00:16:26,070 --> 00:16:29,100 ‫then we want the header and the section. 281 00:16:29,100 --> 00:16:32,070 ‫And immediately you see the problem once again, 282 00:16:32,070 --> 00:16:34,620 ‫which is that this piece of JSX 283 00:16:34,620 --> 00:16:38,373 ‫has two root elements basically. 284 00:16:39,660 --> 00:16:42,780 ‫So it's the header and dissection, 285 00:16:42,780 --> 00:16:44,880 ‫which is not possible. 286 00:16:44,880 --> 00:16:47,150 ‫And so let's close that. 287 00:16:47,150 --> 00:16:50,640 ‫And actually here we need the JavaScript mode. 288 00:16:50,640 --> 00:16:51,663 ‫And yeah, 289 00:16:53,490 --> 00:16:57,060 ‫so you see the loading indicator there is very short 290 00:16:57,060 --> 00:17:02,060 ‫but of course if our network was just a little bit slower 291 00:17:05,220 --> 00:17:06,750 ‫then it makes a lot of sense 292 00:17:06,750 --> 00:17:09,930 ‫to have that loading indicator right there. 293 00:17:09,930 --> 00:17:13,440 ‫Great, so this was another very important part 294 00:17:13,440 --> 00:17:16,350 ‫of our application, and we did it pretty fast 295 00:17:16,350 --> 00:17:19,980 ‫because some parts were just the repetition of before 296 00:17:19,980 --> 00:17:23,670 ‫and we also wrote a lot of JSX here. 297 00:17:23,670 --> 00:17:26,010 ‫But yeah, of course the main part is here 298 00:17:26,010 --> 00:17:29,620 ‫the effect and understanding how the dependency array works. 299 00:17:29,620 --> 00:17:32,340 ‫So make sure to really get that. 300 00:17:32,340 --> 00:17:33,900 ‫And then let's move on 301 00:17:33,900 --> 00:17:36,980 ‫and actually make this rating here work 302 00:17:36,980 --> 00:17:40,413 ‫so that we can add a movie to our watch list.