1 00:00:01,170 --> 00:00:04,980 ‫Welcome back to probably the most complicated 2 00:00:04,980 --> 00:00:09,330 ‫and most confusing lecture of the entire course. 3 00:00:09,330 --> 00:00:11,880 ‫But I don't say this to scare you 4 00:00:11,880 --> 00:00:15,150 ‫because this might also be the most interesting 5 00:00:15,150 --> 00:00:18,600 ‫and fascinating lecture of the course. 6 00:00:18,600 --> 00:00:22,290 ‫Now, if you don't immediately understand 100% 7 00:00:22,290 --> 00:00:26,490 ‫of what I'm gonna teach you here, that's absolutely fine. 8 00:00:26,490 --> 00:00:29,070 ‫So don't stress about it at all. 9 00:00:29,070 --> 00:00:33,810 ‫Again, you can use React without knowing any of this stuff 10 00:00:33,810 --> 00:00:36,180 ‫but if you have a curious mind 11 00:00:36,180 --> 00:00:40,530 ‫and feel the need to understand how React does what it does, 12 00:00:40,530 --> 00:00:42,693 ‫then this video is for you. 13 00:00:44,820 --> 00:00:47,712 ‫Now, before we even start, let's first go back 14 00:00:47,712 --> 00:00:52,290 ‫to where we first learned about the mechanics of state. 15 00:00:52,290 --> 00:00:54,570 ‫Remember this diagram? 16 00:00:54,570 --> 00:00:56,910 ‫Well, back then I told you 17 00:00:56,910 --> 00:01:00,330 ‫that we can conceptually imagine this 18 00:01:00,330 --> 00:01:05,330 ‫as a new view being rendered on the screen, so into the DOM. 19 00:01:05,520 --> 00:01:09,930 ‫However, now we know that this was technically not true 20 00:01:09,930 --> 00:01:13,830 ‫because rendering is not about the screen or the DOM 21 00:01:13,830 --> 00:01:18,600 ‫or the view, it's just about calling component functions. 22 00:01:18,600 --> 00:01:22,500 ‫I also told you that whenever there is a re-render, 23 00:01:22,500 --> 00:01:25,650 ‫React discards the old component view 24 00:01:25,650 --> 00:01:29,160 ‫and replaces it with a brand new one. 25 00:01:29,160 --> 00:01:32,790 ‫However, that's also technically not true. 26 00:01:32,790 --> 00:01:36,150 ‫So the DOM will actually not be updated 27 00:01:36,150 --> 00:01:39,210 ‫for the entire component instance. 28 00:01:39,210 --> 00:01:43,470 ‫So if those things are not true, then let's now learn 29 00:01:43,470 --> 00:01:47,823 ‫what happens instead and how rendering actually works. 30 00:01:49,920 --> 00:01:52,560 ‫So, in the previous lecture we talked 31 00:01:52,560 --> 00:01:55,380 ‫about how renders are triggered. 32 00:01:55,380 --> 00:01:58,020 ‫In this lecture, we're gonna learn all about 33 00:01:58,020 --> 00:02:02,760 ‫how renders are actually performed in the render phase. 34 00:02:02,760 --> 00:02:05,490 ‫So, at the beginning of the render phase 35 00:02:05,490 --> 00:02:08,760 ‫React will go through the entire component tree, 36 00:02:08,760 --> 00:02:12,960 ‫take all the component instances that triggered a re-render 37 00:02:12,960 --> 00:02:15,900 ‫and actually render them, which simply means 38 00:02:15,900 --> 00:02:18,840 ‫to call the corresponding component functions 39 00:02:18,840 --> 00:02:21,840 ‫that we have written in our code. 40 00:02:21,840 --> 00:02:24,900 ‫This will create updated React elements 41 00:02:24,900 --> 00:02:29,880 ‫which altogether make up the so-called virtual DOM. 42 00:02:29,880 --> 00:02:32,910 ‫And this is a term that you might have heard before 43 00:02:32,910 --> 00:02:35,580 ‫and so let's dig a little bit deeper now 44 00:02:35,580 --> 00:02:38,583 ‫into what the virtual DOM actually is. 45 00:02:39,870 --> 00:02:42,630 ‫So on the initial render, React will 46 00:02:42,630 --> 00:02:46,320 ‫take the entire component tree and transform it 47 00:02:46,320 --> 00:02:48,961 ‫into one big React element which will 48 00:02:48,961 --> 00:02:53,550 ‫basically be a React element tree like this one. 49 00:02:53,550 --> 00:02:57,330 ‫And this is what we call the virtual DOM. 50 00:02:57,330 --> 00:03:00,480 ‫So, the virtual DOM is just a tree 51 00:03:00,480 --> 00:03:02,512 ‫of all React elements created 52 00:03:02,512 --> 00:03:06,360 ‫from all instances in the component tree. 53 00:03:06,360 --> 00:03:09,780 ‫And it's relatively cheap and fast to create a tree 54 00:03:09,780 --> 00:03:13,560 ‫like this, even if we need many iterations of it 55 00:03:13,560 --> 00:03:17,776 ‫because in the end it's just a JavaScript object. 56 00:03:17,776 --> 00:03:22,140 ‫Now, virtual DOM is probably the most hyped 57 00:03:22,140 --> 00:03:25,110 ‫and most used term when people describe 58 00:03:25,110 --> 00:03:28,110 ‫what React is and how it works. 59 00:03:28,110 --> 00:03:31,230 ‫But if we think about it, if the virtual DOM 60 00:03:31,230 --> 00:03:33,390 ‫is just the simple object, 61 00:03:33,390 --> 00:03:37,080 ‫it's actually not such a big deal, right? 62 00:03:37,080 --> 00:03:39,630 ‫And that's why the React team has really 63 00:03:39,630 --> 00:03:42,360 ‫downplayed the meaning of this name. 64 00:03:42,360 --> 00:03:45,480 ‫And the official documentation actually no longer 65 00:03:45,480 --> 00:03:48,810 ‫mentioned the term virtual DOM anywhere. 66 00:03:48,810 --> 00:03:51,060 ‫But I'm still using this term here 67 00:03:51,060 --> 00:03:54,720 ‫because everyone still uses it and also 68 00:03:54,720 --> 00:03:59,320 ‫because it just sounds a bit nicer than React element tree. 69 00:03:59,320 --> 00:04:04,200 ‫Also, some people confuse the term with the shadow DOM, 70 00:04:04,200 --> 00:04:05,915 ‫even though it has nothing to do 71 00:04:05,915 --> 00:04:08,760 ‫with the virtual DOM in React. 72 00:04:08,760 --> 00:04:12,167 ‫So the shadow DOM is actually just a browser technology 73 00:04:12,167 --> 00:04:16,260 ‫that is used in stuff like web components. 74 00:04:16,260 --> 00:04:18,750 ‫But anyway, let's now suppose 75 00:04:18,750 --> 00:04:22,830 ‫that there is gonna be a state update in component D, 76 00:04:22,830 --> 00:04:26,700 ‫which will of course trigger a re-render. 77 00:04:26,700 --> 00:04:29,430 ‫That means that React will call the function 78 00:04:29,430 --> 00:04:33,360 ‫of component D again and place the new React element 79 00:04:33,360 --> 00:04:35,820 ‫in a new React element tree. 80 00:04:35,820 --> 00:04:38,730 ‫So, in a new virtual DOM. 81 00:04:38,730 --> 00:04:42,870 ‫But now comes the very important part, which is this. 82 00:04:42,870 --> 00:04:45,540 ‫Whenever React renders a component, 83 00:04:45,540 --> 00:04:49,260 ‫that render will cause all of its child components 84 00:04:49,260 --> 00:04:51,480 ‫to be rendered as well. 85 00:04:51,480 --> 00:04:53,880 ‫And that happens no matter if the props 86 00:04:53,880 --> 00:04:57,420 ‫that we passed down have changed or not. 87 00:04:57,420 --> 00:05:00,540 ‫So again, if the updated components 88 00:05:00,540 --> 00:05:03,720 ‫returns one or more other components, 89 00:05:03,720 --> 00:05:07,680 ‫those nested components will be re-rendered as well, 90 00:05:07,680 --> 00:05:10,500 ‫all the way down the component tree. 91 00:05:10,500 --> 00:05:13,500 ‫This means that if you update the highest component 92 00:05:13,500 --> 00:05:17,550 ‫in a component tree, in this example component A, 93 00:05:17,550 --> 00:05:21,933 ‫then the entire application will actually be re-rendered. 94 00:05:22,770 --> 00:05:27,300 ‫Now, this may sound crazy, but React uses this strategy 95 00:05:27,300 --> 00:05:30,690 ‫because it doesn't know beforehand whether an update 96 00:05:30,690 --> 00:05:34,680 ‫in a component will affect the child components or not. 97 00:05:34,680 --> 00:05:38,640 ‫And so by default, React prefers to play it safe 98 00:05:38,640 --> 00:05:41,040 ‫and just render everything. 99 00:05:41,040 --> 00:05:45,210 ‫Also, keep in mind once again that this does not mean 100 00:05:45,210 --> 00:05:47,700 ‫that the entire DOM is updated. 101 00:05:47,700 --> 00:05:51,030 ‫It's just a virtual DOM that will be recreated 102 00:05:51,030 --> 00:05:53,370 ‫which is really not a big problem 103 00:05:53,370 --> 00:05:56,523 ‫in small or medium sized applications. 104 00:05:57,960 --> 00:06:00,930 ‫Okay, so with this, we now know what 105 00:06:00,930 --> 00:06:03,420 ‫this new virtual DOM here means 106 00:06:03,420 --> 00:06:06,240 ‫and so let's keep moving forward. 107 00:06:06,240 --> 00:06:08,580 ‫So what happens next is that 108 00:06:08,580 --> 00:06:11,490 ‫this new virtual DOM that was created 109 00:06:11,490 --> 00:06:15,210 ‫after the state update will get reconciled 110 00:06:15,210 --> 00:06:18,000 ‫with the current so-called Fiber tree 111 00:06:18,000 --> 00:06:20,793 ‫as it exists before the state update. 112 00:06:21,780 --> 00:06:26,430 ‫Now this reconciliation is done in React's reconciler 113 00:06:26,430 --> 00:06:28,347 ‫which is called Fiber. 114 00:06:28,347 --> 00:06:31,590 ‫Now that's why we have a Fiber tree. 115 00:06:31,590 --> 00:06:35,070 ‫Then the results of this reconciliation process 116 00:06:35,070 --> 00:06:38,130 ‫is gonna be an updated Fiber tree, 117 00:06:38,130 --> 00:06:43,130 ‫so a tree that will eventually be used to write to the DOM. 118 00:06:43,350 --> 00:06:45,870 ‫So this is a high level overview 119 00:06:45,870 --> 00:06:50,220 ‫of the inputs and the outputs of reconciliation, 120 00:06:50,220 --> 00:06:52,620 ‫but, of course, now we need to understand 121 00:06:52,620 --> 00:06:56,103 ‫what reconciliation is and how it works. 122 00:06:58,170 --> 00:07:01,680 ‫So, you might be wondering why do we even need stuff 123 00:07:01,680 --> 00:07:06,450 ‫like the virtual DOM, a reconciler and those Fiber trees? 124 00:07:06,450 --> 00:07:09,240 ‫Why not simply update the entire DOM 125 00:07:09,240 --> 00:07:12,213 ‫whenever state changes somewhere in the app? 126 00:07:13,080 --> 00:07:15,780 ‫Well, the answer is simple. 127 00:07:15,780 --> 00:07:19,320 ‫Remember how we said that creating the virtual DOM 128 00:07:19,320 --> 00:07:23,100 ‫so the React element tree for the entire app is cheap 129 00:07:23,100 --> 00:07:27,330 ‫and fast because it's just a JavaScript object? 130 00:07:27,330 --> 00:07:31,770 ‫Well, writing to the DOM is not cheap and fast. 131 00:07:31,770 --> 00:07:33,840 ‫It would be extremely inefficient 132 00:07:33,840 --> 00:07:38,220 ‫and wasteful to always write the entire virtual DOM 133 00:07:38,220 --> 00:07:43,110 ‫to the actual DOM each time that a render was triggered. 134 00:07:43,110 --> 00:07:47,100 ‫Also, usually when the state changes somewhere in the app 135 00:07:47,100 --> 00:07:49,710 ‫only a small portion of the DOM needs 136 00:07:49,710 --> 00:07:52,353 ‫to be updated and the rest of the DOM 137 00:07:52,353 --> 00:07:55,323 ‫that is already present can be reused. 138 00:07:56,280 --> 00:07:58,830 ‫Now, of course, on the initial render 139 00:07:58,830 --> 00:08:03,420 ‫there is no way around creating the entire DOM from scratch 140 00:08:03,420 --> 00:08:07,293 ‫but from there on, doing so doesn't make sense anymore. 141 00:08:08,370 --> 00:08:13,170 ‫So imagine that you have a complex app like udemy.com 142 00:08:13,170 --> 00:08:15,840 ‫and when you click on some button there 143 00:08:15,840 --> 00:08:18,900 ‫then showModal is set to true, 144 00:08:18,900 --> 00:08:22,920 ‫which in turn will then trigger a modal to be shown. 145 00:08:22,920 --> 00:08:26,370 ‫So in this situation, only the DOM elements 146 00:08:26,370 --> 00:08:30,270 ‫for that modal need to be inserted into the DOM 147 00:08:30,270 --> 00:08:34,050 ‫and the rest of the DOM should just stay the same. 148 00:08:34,050 --> 00:08:36,930 ‫And so that's what React tries to do. 149 00:08:36,930 --> 00:08:39,180 ‫Whenever a render is triggered, 150 00:08:39,180 --> 00:08:42,270 ‫React will try to be as efficient as possible 151 00:08:42,270 --> 00:08:47,270 ‫by reusing as much of the existing DOM tree as possible. 152 00:08:47,760 --> 00:08:50,730 ‫But that leads us to the next question. 153 00:08:50,730 --> 00:08:53,580 ‫So how does React actually do that? 154 00:08:53,580 --> 00:08:55,710 ‫How does it know what changed 155 00:08:55,710 --> 00:08:58,650 ‫from one render to the next one? 156 00:08:58,650 --> 00:09:00,540 ‫Well, that's where a process 157 00:09:00,540 --> 00:09:03,513 ‫called reconciliation comes into play. 158 00:09:04,410 --> 00:09:08,190 ‫So reconciliation is basically deciding exactly 159 00:09:08,190 --> 00:09:11,850 ‫which DOM elements need to be inserted, deleted 160 00:09:11,850 --> 00:09:16,800 ‫or updated in order to reflect the latest state changes. 161 00:09:16,800 --> 00:09:19,890 ‫So the result of the reconciliation process 162 00:09:19,890 --> 00:09:24,090 ‫is gonna be a list of DOM operations that are necessary 163 00:09:24,090 --> 00:09:27,453 ‫to update the current DOM with a new state. 164 00:09:28,380 --> 00:09:32,700 ‫Now, reconciliation is processed by a reconciler 165 00:09:32,700 --> 00:09:35,130 ‫and we can say that the reconciler 166 00:09:35,130 --> 00:09:37,860 ‫really is the engine of React. 167 00:09:37,860 --> 00:09:40,740 ‫It's like the heart of React. 168 00:09:40,740 --> 00:09:43,650 ‫So it's this reconciler that allows us 169 00:09:43,650 --> 00:09:46,080 ‫to never touch the DOM directly 170 00:09:46,080 --> 00:09:49,590 ‫and instead simply tell React what the next snapshot 171 00:09:49,590 --> 00:09:53,700 ‫of the UI should look like based on state. 172 00:09:53,700 --> 00:09:56,790 ‫And as I mentioned before, the current reconciler 173 00:09:56,790 --> 00:10:01,790 ‫in React is called Fiber, and this is how it works. 174 00:10:02,880 --> 00:10:06,240 ‫So, during the initial render of the application 175 00:10:06,240 --> 00:10:09,810 ‫Fiber takes the entire React element tree, 176 00:10:09,810 --> 00:10:13,050 ‫so the virtual DOM, and based on it 177 00:10:13,050 --> 00:10:17,550 ‫builds yet another tree which is the Fiber tree. 178 00:10:17,550 --> 00:10:21,270 ‫The Fiber tree is a special internal tree where 179 00:10:21,270 --> 00:10:25,110 ‫for each component instance and DOM element in the app, 180 00:10:25,110 --> 00:10:28,290 ‫there is one so-called Fiber. 181 00:10:28,290 --> 00:10:30,720 ‫Now, what's special about this tree 182 00:10:30,720 --> 00:10:34,170 ‫is that unlike React elements in the virtual DOM, 183 00:10:34,170 --> 00:10:38,160 ‫Fibers are not recreated on every render. 184 00:10:38,160 --> 00:10:41,340 ‫So the Fiber tree is never destroyed. 185 00:10:41,340 --> 00:10:44,310 ‫Instead, it's a mutable data structure 186 00:10:44,310 --> 00:10:47,820 ‫and once it has been created during the initial render, 187 00:10:47,820 --> 00:10:50,700 ‫it's simply mutated over and over again 188 00:10:50,700 --> 00:10:53,430 ‫in future reconciliation steps. 189 00:10:53,430 --> 00:10:57,720 ‫And this makes Fibers the perfect place for keeping track 190 00:10:57,720 --> 00:11:01,740 ‫of things like the current component state, props, 191 00:11:01,740 --> 00:11:06,330 ‫side effects, list of used hooks and more. 192 00:11:06,330 --> 00:11:11,040 ‫So the actual state and props of any component instance 193 00:11:11,040 --> 00:11:14,700 ‫that we see on the screen are internally stored 194 00:11:14,700 --> 00:11:18,960 ‫inside the corresponding Fiber in the Fiber tree. 195 00:11:18,960 --> 00:11:22,950 ‫Now, each Fiber also contains a queue of work to do 196 00:11:22,950 --> 00:11:25,920 ‫like updating state, updating refs, 197 00:11:25,920 --> 00:11:28,080 ‫running registered side effects, 198 00:11:28,080 --> 00:11:31,380 ‫performing DOM updates and so on. 199 00:11:31,380 --> 00:11:36,380 ‫This is why a Fiber is also defined as a unit of work. 200 00:11:36,540 --> 00:11:39,720 ‫Now, if we take a quick look at the Fiber tree 201 00:11:39,720 --> 00:11:43,530 ‫we will see that the Fibers are arranged in a different way 202 00:11:43,530 --> 00:11:46,890 ‫than the elements in the React element tree. 203 00:11:46,890 --> 00:11:50,460 ‫So instead of a normal parent-child relationship, 204 00:11:50,460 --> 00:11:53,790 ‫each first child has a link to its parent 205 00:11:53,790 --> 00:11:56,670 ‫and all the other children then have a link 206 00:11:56,670 --> 00:11:58,530 ‫to their previous sibling. 207 00:11:58,530 --> 00:12:02,490 ‫And this kind of structure is called a linked list 208 00:12:02,490 --> 00:12:05,670 ‫and it makes it easier for React to process the work 209 00:12:05,670 --> 00:12:08,103 ‫that is associated with each Fiber. 210 00:12:09,000 --> 00:12:13,740 ‫We also see that both trees include not only React elements 211 00:12:13,740 --> 00:12:17,490 ‫or components, but also regular DOM elements, 212 00:12:17,490 --> 00:12:22,350 ‫such as the h3 and button elements in this example. 213 00:12:22,350 --> 00:12:26,190 ‫So both trees really are a complete representation 214 00:12:26,190 --> 00:12:30,663 ‫of the entire DOM structure, not just of React components. 215 00:12:31,620 --> 00:12:36,540 ‫Now going back to the idea that Fibers are units of work, 216 00:12:36,540 --> 00:12:39,390 ‫one extremely important characteristic 217 00:12:39,390 --> 00:12:42,210 ‫of the Fiber reconciler is that work 218 00:12:42,210 --> 00:12:45,390 ‫can be performed asynchronously. 219 00:12:45,390 --> 00:12:47,790 ‫This means that the rendering process 220 00:12:47,790 --> 00:12:52,790 ‫which is what the reconciler does, can be split into chunks, 221 00:12:52,980 --> 00:12:56,250 ‫some tasks can be prioritized over others 222 00:12:56,250 --> 00:12:58,890 ‫and work can be paused, reused, 223 00:12:58,890 --> 00:13:02,430 ‫or thrown away if not valid anymore. 224 00:13:02,430 --> 00:13:03,570 ‫Just keep in mind 225 00:13:03,570 --> 00:13:07,050 ‫that all this happens automatically behind the scenes. 226 00:13:07,050 --> 00:13:10,860 ‫It's completely invisible to us developers. 227 00:13:10,860 --> 00:13:14,210 ‫There are, however, also some practical uses 228 00:13:14,210 --> 00:13:16,200 ‫of this asynchronous rendering 229 00:13:16,200 --> 00:13:20,670 ‫because it enables modern so-called concurrent features 230 00:13:20,670 --> 00:13:25,670 ‫like Suspense or transitions starting in React 18. 231 00:13:26,010 --> 00:13:28,020 ‫It also allows the rendering process 232 00:13:28,020 --> 00:13:30,780 ‫to pause and resume later so that 233 00:13:30,780 --> 00:13:33,990 ‫it won't block the browser's JavaScript engine 234 00:13:33,990 --> 00:13:37,470 ‫with two long renders, which can be problematic 235 00:13:37,470 --> 00:13:40,830 ‫for performance in large applications. 236 00:13:40,830 --> 00:13:43,140 ‫And again, this is only possible 237 00:13:43,140 --> 00:13:45,870 ‫because the render phase does not produce 238 00:13:45,870 --> 00:13:48,393 ‫any visible output to the DOM yet. 239 00:13:49,441 --> 00:13:52,200 ‫Okay, so at this point we know 240 00:13:52,200 --> 00:13:56,580 ‫what the Fiber reconciler is and how the Fiber tree works 241 00:13:56,580 --> 00:14:00,300 ‫but now it's time to talk about what Fiber actually does 242 00:14:00,300 --> 00:14:04,260 ‫which is the reconciliation process. 243 00:14:04,260 --> 00:14:07,710 ‫And the best way to explain how reconciliation works 244 00:14:07,710 --> 00:14:10,830 ‫is by using a practical example. 245 00:14:10,830 --> 00:14:12,630 ‫So let's take the virtual DOM 246 00:14:12,630 --> 00:14:16,110 ‫and the corresponding Fiber tree from the last slide 247 00:14:16,110 --> 00:14:20,400 ‫which corresponds to this piece of code right here. 248 00:14:20,400 --> 00:14:23,070 ‫So in the app component, there is a piece 249 00:14:23,070 --> 00:14:27,960 ‫of state called showModal, which is currently set to true 250 00:14:27,960 --> 00:14:30,840 ‫and you can pause the video here to analyze it 251 00:14:30,840 --> 00:14:33,180 ‫but it's not really necessary. 252 00:14:33,180 --> 00:14:38,180 ‫So let's say now that the state is updated to false. 253 00:14:38,190 --> 00:14:40,350 ‫This will then trigger a re-render 254 00:14:40,350 --> 00:14:43,710 ‫which will create a new virtual DOM. 255 00:14:43,710 --> 00:14:45,900 ‫And in this tree, the modal 256 00:14:45,900 --> 00:14:48,990 ‫and all its children are actually gone 257 00:14:48,990 --> 00:14:50,970 ‫because they are no longer displayed 258 00:14:50,970 --> 00:14:54,330 ‫when showModal is not true. 259 00:14:54,330 --> 00:14:58,110 ‫Also, all remaining React elements are yellow, 260 00:14:58,110 --> 00:15:01,950 ‫meaning that all of them were re-rendered. 261 00:15:01,950 --> 00:15:05,160 ‫And do you remember why that is? 262 00:15:05,160 --> 00:15:06,150 ‫That's right. 263 00:15:06,150 --> 00:15:10,050 ‫It's because all children of a re-rendered element 264 00:15:10,050 --> 00:15:12,120 ‫are re-rendered as well, 265 00:15:12,120 --> 00:15:14,643 ‫as we just learned a few minutes ago. 266 00:15:15,540 --> 00:15:18,960 ‫But anyway, this new virtual DOM now needs 267 00:15:18,960 --> 00:15:22,260 ‫to be reconciled with the current Fiber tree, 268 00:15:22,260 --> 00:15:25,500 ‫which will then result in this updated tree 269 00:15:25,500 --> 00:15:30,150 ‫which internally is called the work in progress tree. 270 00:15:30,150 --> 00:15:33,630 ‫So whenever reconciliation needs to happen, 271 00:15:33,630 --> 00:15:37,530 ‫Fiber walks through the entire tree step by step 272 00:15:37,530 --> 00:15:40,770 ‫and analyzes exactly what needs to change 273 00:15:40,770 --> 00:15:42,750 ‫between the current Fiber tree 274 00:15:42,750 --> 00:15:47,750 ‫and the updated Fiber tree based on the new virtual DOM. 275 00:15:48,150 --> 00:15:51,960 ‫And this process of comparing elements step-by-step 276 00:15:51,960 --> 00:15:56,100 ‫based on their position in the tree is called diffing 277 00:15:56,100 --> 00:15:59,160 ‫and we will explore exactly how diffing works 278 00:15:59,160 --> 00:16:00,870 ‫a bit later in the section 279 00:16:00,870 --> 00:16:04,353 ‫because that's actually pretty important in practice. 280 00:16:05,250 --> 00:16:09,990 ‫But anyway, let's quickly analyze our updated Fiber tree 281 00:16:09,990 --> 00:16:14,990 ‫where I marked new work that is related to DOM mutations. 282 00:16:15,210 --> 00:16:19,920 ‫So first, the Btn component has some new text 283 00:16:19,920 --> 00:16:22,230 ‫and so the work that will need to be done 284 00:16:22,230 --> 00:16:25,350 ‫in this Fiber is a DOM update. 285 00:16:25,350 --> 00:16:29,910 ‫So in this case, swapping text from height to rate. 286 00:16:29,910 --> 00:16:34,910 ‫Then we have the Modal, Overlay, h3 and button. 287 00:16:34,920 --> 00:16:37,590 ‫So these were in the current Fiber tree 288 00:16:37,590 --> 00:16:40,260 ‫but are no longer in the virtual DOM 289 00:16:40,260 --> 00:16:44,640 ‫and therefore they are marked as DOM deletions. 290 00:16:44,640 --> 00:16:47,130 ‫Finally, we have the interesting case 291 00:16:47,130 --> 00:16:49,410 ‫of the video component. 292 00:16:49,410 --> 00:16:53,220 ‫So this component was re-rendered because it's a child 293 00:16:53,220 --> 00:16:57,000 ‫of the app component, but it actually didn't change. 294 00:16:57,000 --> 00:17:00,030 ‫And so as a result of reconciliation, 295 00:17:00,030 --> 00:17:03,303 ‫the DOM will not be updated in this case. 296 00:17:04,260 --> 00:17:08,220 ‫Now, once this process is over, all these DOM mutations 297 00:17:08,220 --> 00:17:12,390 ‫will be placed into a list called the list of effects 298 00:17:12,390 --> 00:17:15,090 ‫which will be used in the next phase, 299 00:17:15,090 --> 00:17:19,770 ‫so in a commit phase, to actually mutate the DOM. 300 00:17:19,770 --> 00:17:22,710 ‫Now, what I showed you here was actually still 301 00:17:22,710 --> 00:17:26,370 ‫a bit oversimplified, if you can believe that, 302 00:17:26,370 --> 00:17:29,310 ‫but I think that this is more than enough 303 00:17:29,310 --> 00:17:32,703 ‫for you to understand how this process works. 304 00:17:34,590 --> 00:17:39,590 ‫Okay, so that was quite a deep dive, but now we're back here 305 00:17:40,380 --> 00:17:44,400 ‫in the high level overview of the render phase. 306 00:17:44,400 --> 00:17:48,600 ‫So we learned that the results of the reconciliation process 307 00:17:48,600 --> 00:17:53,370 ‫is a second updated Fiber tree, plus basically a list 308 00:17:53,370 --> 00:17:58,230 ‫of DOM updates that need to be performed in the next phase. 309 00:17:58,230 --> 00:18:02,130 ‫So React still hasn't written anything to the DOM yet 310 00:18:02,130 --> 00:18:06,660 ‫but it has figured out this so-called list of effects. 311 00:18:06,660 --> 00:18:10,770 ‫So this is the final result of the render phase 312 00:18:10,770 --> 00:18:14,640 ‫as it includes the DOM operations that will finally be made 313 00:18:14,640 --> 00:18:19,640 ‫in the commit phase, which is the topic of our next video. 314 00:18:19,920 --> 00:18:22,140 ‫So if you don't want to break the flow, 315 00:18:22,140 --> 00:18:24,573 ‫then let's move on there right now.