1 00:00:00,743 --> 00:00:02,885 ‫Welcome to the last lecture 2 00:00:02,885 --> 00:00:04,508 ‫of this section. 3 00:00:04,508 --> 00:00:06,241 ‫And it was a long 4 00:00:06,241 --> 00:00:09,155 ‫and complicated section, I know. 5 00:00:09,155 --> 00:00:11,381 ‫But hopefully, you enjoyed learning 6 00:00:11,381 --> 00:00:14,996 ‫about all these internal workings of React 7 00:00:14,996 --> 00:00:17,152 ‫as much as I did. 8 00:00:17,152 --> 00:00:18,720 ‫And now, to finish, 9 00:00:18,720 --> 00:00:20,630 ‫I thought it was a great idea 10 00:00:20,630 --> 00:00:22,757 ‫to summarize the key learnings 11 00:00:22,757 --> 00:00:26,193 ‫that you should retain from this section. 12 00:00:27,617 --> 00:00:29,998 ‫Now, this is not a summary 13 00:00:29,998 --> 00:00:31,892 ‫of everything that we learned 14 00:00:31,892 --> 00:00:35,515 ‫but only the practical takeaways and conclusions 15 00:00:35,515 --> 00:00:37,014 ‫that you will actually need 16 00:00:37,014 --> 00:00:38,502 ‫to know in practice 17 00:00:38,502 --> 00:00:42,019 ‫as you build your own React apps 18 00:00:42,019 --> 00:00:43,520 ‫and this is necessary 19 00:00:43,520 --> 00:00:46,154 ‫because I've mentioned multiple times 20 00:00:46,154 --> 00:00:47,506 ‫that you actually don't need 21 00:00:47,506 --> 00:00:50,257 ‫to know all this complicated stuff 22 00:00:50,257 --> 00:00:53,151 ‫about how React works behind the scenes 23 00:00:53,151 --> 00:00:54,509 ‫but you do need to know 24 00:00:54,509 --> 00:00:57,265 ‫the practical implications of it. 25 00:00:57,265 --> 00:01:00,638 ‫And so in this lecture is where I gathered 26 00:01:00,638 --> 00:01:02,754 ‫all those practical implications 27 00:01:02,754 --> 00:01:06,255 ‫in the form of text slides that you can save 28 00:01:06,255 --> 00:01:08,753 ‫and read in the future. 29 00:01:08,753 --> 00:01:10,742 ‫But anyway, let's now move on 30 00:01:10,742 --> 00:01:12,810 ‫to our first point, 31 00:01:12,810 --> 00:01:15,250 ‫which is that a component is basically 32 00:01:15,250 --> 00:01:18,394 ‫like a blueprint for a piece of UI 33 00:01:18,394 --> 00:01:21,761 ‫that will eventually exist on the screen. 34 00:01:21,761 --> 00:01:24,393 ‫When we then use a component, 35 00:01:24,393 --> 00:01:26,997 ‫React creates a component instance, 36 00:01:26,997 --> 00:01:30,502 ‫which is like an actual physical manifestation 37 00:01:30,502 --> 00:01:33,930 ‫of a component, which contains props, 38 00:01:33,930 --> 00:01:37,290 ‫state, effects, and more. 39 00:01:37,290 --> 00:01:40,008 ‫So following the analogy of the blueprint, 40 00:01:40,008 --> 00:01:43,748 ‫the component is like a blueprint for a house 41 00:01:43,748 --> 00:01:45,608 ‫and the component instances 42 00:01:45,608 --> 00:01:47,644 ‫are like the actual houses 43 00:01:47,644 --> 00:01:51,739 ‫that have been built from that blueprint. 44 00:01:51,739 --> 00:01:54,898 ‫Finally, a component instance when rendered, 45 00:01:54,898 --> 00:01:58,111 ‫will return a React element. 46 00:01:58,111 --> 00:02:02,513 ‫Okay, so let's now move on to rendering. 47 00:02:02,513 --> 00:02:05,379 ‫So in React, rendering only means 48 00:02:05,379 --> 00:02:07,246 ‫calling component functions 49 00:02:07,246 --> 00:02:09,740 ‫and calculating what dumb elements need 50 00:02:09,740 --> 00:02:14,503 ‫to be inserted, deleted, or updated later. 51 00:02:14,503 --> 00:02:16,502 ‫So rendering has nothing to do 52 00:02:16,502 --> 00:02:19,020 ‫with actually writing. 53 00:02:19,020 --> 00:02:21,643 ‫So with actually updating the DOM. 54 00:02:21,643 --> 00:02:24,000 ‫Writing to the DOM is actually called 55 00:02:24,000 --> 00:02:26,768 ‫committing in the React language. 56 00:02:26,768 --> 00:02:29,001 ‫So what I want you to remember here 57 00:02:29,001 --> 00:02:31,261 ‫is that each time a component instance 58 00:02:31,261 --> 00:02:33,748 ‫is rendered and re-rendered, 59 00:02:33,748 --> 00:02:36,746 ‫the function is simply called again. 60 00:02:36,746 --> 00:02:40,748 ‫But what actually triggers a render to happen? 61 00:02:40,748 --> 00:02:43,998 ‫Well, as you should probably know already, 62 00:02:43,998 --> 00:02:45,886 ‫only the initial app render 63 00:02:45,886 --> 00:02:48,992 ‫and state updates can cause a render 64 00:02:48,992 --> 00:02:52,890 ‫which will happen for the entire application. 65 00:02:52,890 --> 00:02:54,645 ‫So even though it might look 66 00:02:54,645 --> 00:02:58,146 ‫as if only one single component is rendered, 67 00:02:58,146 --> 00:03:02,996 ‫the process is actually executed for all components. 68 00:03:02,996 --> 00:03:04,758 ‫Now, when a component instance 69 00:03:04,758 --> 00:03:07,760 ‫does get re-rendered, all its children 70 00:03:07,760 --> 00:03:10,762 ‫will get re-rendered as well. 71 00:03:10,762 --> 00:03:13,499 ‫Now, this doesn't mean that all children 72 00:03:13,499 --> 00:03:16,290 ‫will get updated in the DOM 73 00:03:16,290 --> 00:03:18,260 ‫because thanks to reconciliation, 74 00:03:18,260 --> 00:03:20,495 ‫React will check which elements 75 00:03:20,495 --> 00:03:25,020 ‫have actually changed between the two renders. 76 00:03:25,020 --> 00:03:28,238 ‫Now, one of the main parts of this reconciliation 77 00:03:28,238 --> 00:03:32,017 ‫that I just mentioned is diffing. 78 00:03:32,017 --> 00:03:34,510 ‫So diffing is how React decides 79 00:03:34,510 --> 00:03:37,002 ‫which dumb elements need to be added 80 00:03:37,002 --> 00:03:39,510 ‫or modified later. 81 00:03:39,510 --> 00:03:41,015 ‫Now, if between two renders, 82 00:03:41,015 --> 00:03:42,866 ‫a certain React element stays 83 00:03:42,866 --> 00:03:45,994 ‫at the same position in the elementary, 84 00:03:45,994 --> 00:03:47,885 ‫the corresponding DOM element 85 00:03:47,885 --> 00:03:50,040 ‫and the component state 86 00:03:50,040 --> 00:03:52,127 ‫will simply stay the same. 87 00:03:52,127 --> 00:03:55,380 ‫So the DOM will not be modified in this case 88 00:03:55,380 --> 00:03:58,749 ‫which is a huge win for performance. 89 00:03:58,749 --> 00:04:00,996 ‫However, if the element did change 90 00:04:00,996 --> 00:04:03,248 ‫to a different position in the tree 91 00:04:03,248 --> 00:04:04,498 ‫or if it changed 92 00:04:04,498 --> 00:04:07,496 ‫to a different element type altogether, 93 00:04:07,496 --> 00:04:08,643 ‫then the DOM element 94 00:04:08,643 --> 00:04:12,254 ‫and the corresponding state will be destroyed. 95 00:04:12,254 --> 00:04:15,762 ‫So they will basically be reset. 96 00:04:15,762 --> 00:04:18,996 ‫Now, one cool thing about the diffing algorithm 97 00:04:18,996 --> 00:04:22,134 ‫is the fact that we can actually influence it 98 00:04:22,134 --> 00:04:24,764 ‫by giving elements a key prop, 99 00:04:24,764 --> 00:04:27,247 ‫which then allows React to distinguish 100 00:04:27,247 --> 00:04:30,019 ‫between multiple component instances 101 00:04:30,019 --> 00:04:32,634 ‫of the same component type. 102 00:04:32,634 --> 00:04:34,761 ‫So when the key on a certain element 103 00:04:34,761 --> 00:04:37,254 ‫stays the same across renders, 104 00:04:37,254 --> 00:04:39,770 ‫the element is kept in the DOM 105 00:04:39,770 --> 00:04:40,992 ‫even if it appears 106 00:04:40,992 --> 00:04:43,736 ‫at a different position in the tree. 107 00:04:43,736 --> 00:04:45,632 ‫And so this is the reason why 108 00:04:45,632 --> 00:04:48,750 ‫we need to use keys in lists 109 00:04:48,750 --> 00:04:51,994 ‫because it will prevent unnecessary recreations 110 00:04:51,994 --> 00:04:54,526 ‫of elements in the DOM. 111 00:04:54,526 --> 00:04:56,003 ‫Now, on the other hand, 112 00:04:56,003 --> 00:04:58,496 ‫when we change the key between renders, 113 00:04:58,496 --> 00:05:02,760 ‫the DOM element will be destroyed and rebuilt. 114 00:05:02,760 --> 00:05:05,239 ‫And so this is a very nice trick 115 00:05:05,239 --> 00:05:08,638 ‫that we can use in order to reset state, 116 00:05:08,638 --> 00:05:11,748 ‫which is sometimes necessary as we saw 117 00:05:11,748 --> 00:05:16,484 ‫in two practical examples in this section. 118 00:05:16,484 --> 00:05:19,261 ‫Next, we have one very important rule 119 00:05:19,261 --> 00:05:21,989 ‫that you must never ever forget 120 00:05:21,989 --> 00:05:24,162 ‫which is that you should never declare 121 00:05:24,162 --> 00:05:28,644 ‫a new component inside another component. 122 00:05:28,644 --> 00:05:31,500 ‫That's because doing so will recreate 123 00:05:31,500 --> 00:05:34,005 ‫that nested component every time 124 00:05:34,005 --> 00:05:36,871 ‫the parent component re-renders 125 00:05:36,871 --> 00:05:38,640 ‫so that nested component 126 00:05:38,640 --> 00:05:42,013 ‫would always be a new variable basically. 127 00:05:42,013 --> 00:05:43,995 ‫And so this means that React 128 00:05:43,995 --> 00:05:46,746 ‫would always see the nested component 129 00:05:46,746 --> 00:05:49,003 ‫as a brand new component, 130 00:05:49,003 --> 00:05:51,747 ‫and therefore reset its state each time 131 00:05:51,747 --> 00:05:55,248 ‫that the parent's state is updated. 132 00:05:55,248 --> 00:05:57,378 ‫Now, the reason why this happens 133 00:05:57,378 --> 00:05:59,255 ‫is not the important part, 134 00:05:59,255 --> 00:06:00,881 ‫but what matters is that 135 00:06:00,881 --> 00:06:03,889 ‫you should always, always declare. 136 00:06:03,889 --> 00:06:06,241 ‫So you should write new components 137 00:06:06,241 --> 00:06:08,231 ‫at the top level of a file, 138 00:06:08,231 --> 00:06:11,384 ‫never inside another component. 139 00:06:11,384 --> 00:06:13,984 ‫Now, the logic that is responsible 140 00:06:13,984 --> 00:06:16,005 ‫for creating DOM elements 141 00:06:16,005 --> 00:06:19,884 ‫so basically logic that produces JSX 142 00:06:19,884 --> 00:06:22,399 ‫is called render logic 143 00:06:22,399 --> 00:06:25,006 ‫and this render logic is not allowed 144 00:06:25,006 --> 00:06:28,290 ‫to produce any side effects. 145 00:06:28,290 --> 00:06:31,254 ‫So render logic can have no API calls, 146 00:06:31,254 --> 00:06:35,409 ‫no timers, no object or variable mutations, 147 00:06:35,409 --> 00:06:37,762 ‫and no state updates. 148 00:06:37,762 --> 00:06:40,876 ‫The only place where side effects are allowed 149 00:06:40,876 --> 00:06:45,499 ‫is inside event handlers and inside useEffect. 150 00:06:45,499 --> 00:06:48,754 ‫Okay, now, after all this rendering, 151 00:06:48,754 --> 00:06:51,755 ‫it's time to finally update the DOM, 152 00:06:51,755 --> 00:06:55,001 ‫which happens in the commit phase. 153 00:06:55,001 --> 00:06:57,619 ‫However, it's actually not React 154 00:06:57,619 --> 00:06:59,240 ‫that does this committing 155 00:06:59,240 --> 00:07:03,241 ‫but a so-called renderer called ReactDOM. 156 00:07:03,241 --> 00:07:04,491 ‫That's why we always need 157 00:07:04,491 --> 00:07:06,746 ‫to include both these libraries 158 00:07:06,746 --> 00:07:09,753 ‫in a React web application project. 159 00:07:09,753 --> 00:07:12,139 ‫We can also use other renderers 160 00:07:12,139 --> 00:07:14,753 ‫to use React on different platforms. 161 00:07:14,753 --> 00:07:16,506 ‫For example, to build mobile 162 00:07:16,506 --> 00:07:20,132 ‫or native applications with React native. 163 00:07:20,132 --> 00:07:21,624 ‫All right, and now, 164 00:07:21,624 --> 00:07:24,485 ‫for the rest of this last slide, 165 00:07:24,485 --> 00:07:27,508 ‫let's leave the topics related to rendering behind 166 00:07:27,508 --> 00:07:31,650 ‫and quickly talk about state and events. 167 00:07:31,650 --> 00:07:33,984 ‫So when we have multiple state updates 168 00:07:33,984 --> 00:07:36,507 ‫inside an event handler function, 169 00:07:36,507 --> 00:07:39,628 ‫all these state updates will be batched. 170 00:07:39,628 --> 00:07:43,253 ‫So basically, they will happen all at once 171 00:07:43,253 --> 00:07:46,488 ‫and this is super important because it means 172 00:07:46,488 --> 00:07:49,139 ‫that multiple related state updates 173 00:07:49,139 --> 00:07:52,505 ‫will only create one re-render which, 174 00:07:52,505 --> 00:07:55,880 ‫once again, is great for performance. 175 00:07:55,880 --> 00:07:58,766 ‫And since React 18, automatic batching 176 00:07:58,766 --> 00:08:01,131 ‫even happens inside timeouts, 177 00:08:01,131 --> 00:08:04,769 ‫promises, and native event handlers. 178 00:08:04,769 --> 00:08:08,748 ‫Now, one super important practical implication of this 179 00:08:08,748 --> 00:08:11,747 ‫is that we cannot access a state variable 180 00:08:11,747 --> 00:08:14,267 ‫immediately after we update it 181 00:08:14,267 --> 00:08:15,484 ‫which is why we say 182 00:08:15,484 --> 00:08:18,963 ‫that state updates are asynchronous. 183 00:08:19,800 --> 00:08:21,519 ‫Next up, when we use events 184 00:08:21,519 --> 00:08:23,755 ‫inside event handler functions, 185 00:08:23,755 --> 00:08:28,001 ‫we get access to a so-called synthetic event object, 186 00:08:28,001 --> 00:08:31,391 ‫not the browser's native object. 187 00:08:31,391 --> 00:08:35,010 ‫So the React team created synthetic events 188 00:08:35,010 --> 00:08:37,626 ‫so that events work the exact same way 189 00:08:37,626 --> 00:08:40,002 ‫across all browsers 190 00:08:40,002 --> 00:08:42,750 ‫and the main difference between synthetic 191 00:08:42,750 --> 00:08:44,494 ‫and native events is that 192 00:08:44,494 --> 00:08:47,887 ‫most synthetic events do actually bubble 193 00:08:47,887 --> 00:08:50,627 ‫and that includes the focus, blur, 194 00:08:50,627 --> 00:08:54,505 ‫and change events, which do usually not bubble 195 00:08:54,505 --> 00:08:57,057 ‫as native browser events. 196 00:08:57,057 --> 00:09:00,735 ‫The only exception here is the scroll event. 197 00:09:00,735 --> 00:09:03,250 ‫Okay, and now, finally, 198 00:09:03,250 --> 00:09:07,001 ‫let's remember that React is a library 199 00:09:07,001 --> 00:09:09,014 ‫and not a framework. 200 00:09:09,014 --> 00:09:11,499 ‫This means that you can basically assemble 201 00:09:11,499 --> 00:09:14,749 ‫your applications using your favorite 202 00:09:14,749 --> 00:09:18,527 ‫or the community's favorite third-party libraries 203 00:09:18,527 --> 00:09:21,128 ‫and this is great for flexibility 204 00:09:21,128 --> 00:09:23,136 ‫and creative freedom. 205 00:09:23,136 --> 00:09:25,385 ‫The downside of this freedom is that 206 00:09:25,385 --> 00:09:28,246 ‫there is an basically infinite amount 207 00:09:28,246 --> 00:09:31,239 ‫of libraries that you can choose from. 208 00:09:31,239 --> 00:09:34,734 ‫And so you need to first find and then learn 209 00:09:34,734 --> 00:09:38,790 ‫all these additional libraries that you need. 210 00:09:38,790 --> 00:09:41,430 ‫However, that's not that big of a problem 211 00:09:41,430 --> 00:09:42,263 ‫because you will learn 212 00:09:42,263 --> 00:09:44,757 ‫about the most commonly used libraries 213 00:09:44,757 --> 00:09:48,375 ‫in the main projects of this course. 214 00:09:48,375 --> 00:09:51,113 ‫All right, and there you have it. 215 00:09:51,113 --> 00:09:54,720 ‫So this is essentially what I need you to remember 216 00:09:54,720 --> 00:09:57,497 ‫from this section going forward. 217 00:09:57,497 --> 00:10:00,383 ‫And again, I hope that you found this section 218 00:10:00,383 --> 00:10:02,867 ‫as interesting as I did. 219 00:10:02,867 --> 00:10:05,243 ‫But no matter if you did or not, 220 00:10:05,243 --> 00:10:07,507 ‫please leave your comments about it 221 00:10:07,507 --> 00:10:09,506 ‫in the Q and A section. 222 00:10:09,506 --> 00:10:11,757 ‫And now, maybe take some time 223 00:10:11,757 --> 00:10:16,000 ‫to basically recover from all this new material 224 00:10:16,000 --> 00:10:18,746 ‫and all these new concepts that you learned. 225 00:10:18,746 --> 00:10:20,501 ‫And then once you're done, 226 00:10:20,501 --> 00:10:23,403 ‫I'll see you in the next section.