1 00:00:01,110 --> 00:00:02,700 ‫So, in this section, 2 00:00:02,700 --> 00:00:04,650 ‫we're finally gonna come back 3 00:00:04,650 --> 00:00:07,770 ‫to our USEOPCORN Project. 4 00:00:07,770 --> 00:00:10,350 ‫However, before we go any further, 5 00:00:10,350 --> 00:00:13,830 ‫we just need to look at one more slide here, 6 00:00:13,830 --> 00:00:15,420 ‫where we will quickly learn 7 00:00:15,420 --> 00:00:18,120 ‫about the LIFECYCLE of COMPONENTS, 8 00:00:18,120 --> 00:00:20,730 ‫because this is gonna be highly relevant 9 00:00:20,730 --> 00:00:22,833 ‫for the rest of the section. 10 00:00:24,360 --> 00:00:27,450 ‫And actually, I should say that we're gonna learn 11 00:00:27,450 --> 00:00:31,050 ‫about the LIFECYLE of a COMPONENT INSTANCE, 12 00:00:31,050 --> 00:00:34,470 ‫because it's only an actual physical INSTANCE 13 00:00:34,470 --> 00:00:38,730 ‫of a COMPONENT that can go through a LIFECYCLE. 14 00:00:38,730 --> 00:00:40,740 ‫But as I mentioned earlier, 15 00:00:40,740 --> 00:00:44,340 ‫it's just a bit too much work to always say, 16 00:00:44,340 --> 00:00:45,960 ‫COMPONENT INSTANCE. 17 00:00:45,960 --> 00:00:48,660 ‫And so, for the rest of this lecture, 18 00:00:48,660 --> 00:00:51,930 ‫I will just say COMPONENT most of the time, 19 00:00:51,930 --> 00:00:55,410 ‫which is what everybody else also does. 20 00:00:55,410 --> 00:00:59,100 ‫So no one can always say COMPONENT INSTANCE, 21 00:00:59,100 --> 00:01:01,230 ‫that's just too much work. 22 00:01:01,230 --> 00:01:06,230 ‫But anyway, what does COMPONENT LIFECYCLE actually mean? 23 00:01:07,140 --> 00:01:11,670 ‫Well, the LIFECYCLE of a COMPONENT basically encompasses 24 00:01:11,670 --> 00:01:15,630 ‫the different phases that a specific COMPONENT INSTANCE 25 00:01:15,630 --> 00:01:18,480 ‫can go through over time. 26 00:01:18,480 --> 00:01:22,080 ‫And the first phase in any COMPONENT'S LIFECYCLE 27 00:01:22,080 --> 00:01:25,620 ‫is that a COMPONENT INSTANCE is MOUNTED. 28 00:01:25,620 --> 00:01:29,190 ‫Which is also called the INITIAL RENDER. 29 00:01:29,190 --> 00:01:32,160 ‫So this is when the COMPONENT is rendered 30 00:01:32,160 --> 00:01:34,050 ‫for the very first time, 31 00:01:34,050 --> 00:01:36,660 ‫based on everything that we have learned 32 00:01:36,660 --> 00:01:38,820 ‫in the previous section. 33 00:01:38,820 --> 00:01:43,410 ‫This is also when fresh state and props are created 34 00:01:43,410 --> 00:01:45,420 ‫for the COMPONENT INSTANCE. 35 00:01:45,420 --> 00:01:48,270 ‫And therefore, I like to use the analogy 36 00:01:48,270 --> 00:01:52,080 ‫that the COMPONENT is born in this phase. 37 00:01:52,080 --> 00:01:54,900 ‫Now, once the COMPONENT has been rendered 38 00:01:54,900 --> 00:01:56,670 ‫and is on the screen, 39 00:01:56,670 --> 00:02:00,903 ‫it can be re-rendered an unlimited number of times. 40 00:02:01,800 --> 00:02:04,590 ‫Now, as we learned in the previous section, 41 00:02:04,590 --> 00:02:07,140 ‫a React Application is re-rendered, 42 00:02:07,140 --> 00:02:10,830 ‫whenever there is a State Update, right? 43 00:02:10,830 --> 00:02:13,890 ‫However, back then, we were only talking 44 00:02:13,890 --> 00:02:16,470 ‫about the entire application, 45 00:02:16,470 --> 00:02:20,370 ‫not about one specific COMPONENT INSTANCE. 46 00:02:20,370 --> 00:02:24,450 ‫So in practical terms, a COMPONENT will also 47 00:02:24,450 --> 00:02:28,560 ‫be re-rendered when the props that it receives change, 48 00:02:28,560 --> 00:02:31,470 ‫when its parent COMPONENT re-renders, 49 00:02:31,470 --> 00:02:34,830 ‫or when something called CONTEXT changes. 50 00:02:34,830 --> 00:02:36,963 ‫And more about CONTEXT later. 51 00:02:37,980 --> 00:02:41,760 ‫Now, the RE-RENDER Phase is actually optional, 52 00:02:41,760 --> 00:02:45,540 ‫so it doesn't always happen in all COMPONENTS. 53 00:02:45,540 --> 00:02:49,770 ‫So some COMPONENTS are only mounted and then unmounted, 54 00:02:49,770 --> 00:02:54,153 ‫right away, which actually brings us to the next phase. 55 00:02:54,990 --> 00:02:58,290 ‫So finally, there comes a point in time, 56 00:02:58,290 --> 00:03:01,980 ‫where a COMPONENT INSTANCE is no longer needed. 57 00:03:01,980 --> 00:03:05,730 ‫And so that's when the COMPONENT is unmounted. 58 00:03:05,730 --> 00:03:09,750 ‫And as you can see from that not so subtle emoji, 59 00:03:09,750 --> 00:03:13,440 ‫this is when the COMPONENT basically dies. 60 00:03:13,440 --> 00:03:15,000 ‫So in this step, 61 00:03:15,000 --> 00:03:18,990 ‫the COMPONENT INSTANCE is completely destroyed and removed 62 00:03:18,990 --> 00:03:23,280 ‫from the screen along with its state and props. 63 00:03:23,280 --> 00:03:24,113 ‫And of course, 64 00:03:24,113 --> 00:03:26,670 ‫we have already seen this happening many times 65 00:03:26,670 --> 00:03:29,610 ‫in the applications that we have been building. 66 00:03:29,610 --> 00:03:32,070 ‫So this can happen when users navigate 67 00:03:32,070 --> 00:03:35,820 ‫to a new section or a new page of the app 68 00:03:35,820 --> 00:03:39,060 ‫or when they close the app all together. 69 00:03:39,060 --> 00:03:41,100 ‫Now, of course, a new INSTANCE 70 00:03:41,100 --> 00:03:44,310 ‫of the same COMPONENT can be mounted later, 71 00:03:44,310 --> 00:03:47,640 ‫but this specific INSTANCE is now gone. 72 00:03:47,640 --> 00:03:49,287 ‫So it has been unmounted. 73 00:03:50,280 --> 00:03:52,260 ‫and that's actually it. 74 00:03:52,260 --> 00:03:55,020 ‫So pretty straightforward, right? 75 00:03:55,020 --> 00:03:59,010 ‫Especially, after that deep dive last section. 76 00:03:59,010 --> 00:04:03,330 ‫So why was it even worth learning about this now? 77 00:04:03,330 --> 00:04:05,130 ‫Well, it's important to know 78 00:04:05,130 --> 00:04:07,320 ‫about the COMPONENT LIFECYCLE, 79 00:04:07,320 --> 00:04:10,260 ‫because we can hook into different phases 80 00:04:10,260 --> 00:04:11,940 ‫of this LIFECYCLE. 81 00:04:11,940 --> 00:04:15,870 ‫So we can basically define code to be executed 82 00:04:15,870 --> 00:04:18,300 ‫at these specific points in time, 83 00:04:18,300 --> 00:04:21,600 ‫which can be extremely useful. 84 00:04:21,600 --> 00:04:25,080 ‫And we do so by using the useEffect Hook, 85 00:04:25,080 --> 00:04:28,173 ‫which is the big topic of this section.