1 00:00:01,200 --> 00:00:03,600 ‫In the lecture about the render phase, 2 00:00:03,600 --> 00:00:06,150 ‫we left out one critical piece, 3 00:00:06,150 --> 00:00:08,618 ‫which was the diffing algorithm that is part 4 00:00:08,618 --> 00:00:11,839 ‫of the reconciliation process. 5 00:00:11,839 --> 00:00:14,478 ‫So we mentioned diffing back then 6 00:00:14,478 --> 00:00:18,270 ‫but we didn't really go into how diffing works. 7 00:00:18,270 --> 00:00:22,053 ‫And since that's really important, let's do that now. 8 00:00:24,090 --> 00:00:26,070 ‫So diffing is first 9 00:00:26,070 --> 00:00:29,790 ‫of all based on two fundamental assumptions. 10 00:00:29,790 --> 00:00:32,370 ‫The first one is that two elements 11 00:00:32,370 --> 00:00:36,120 ‫of different types will produce different trees. 12 00:00:36,120 --> 00:00:39,657 ‫The second assumption is that elements with a stable key, 13 00:00:39,657 --> 00:00:43,290 ‫so a key that is consistent over time, 14 00:00:43,290 --> 00:00:45,903 ‫will stay the same across renders. 15 00:00:46,740 --> 00:00:49,920 ‫Now these assumptions may seem pretty obvious 16 00:00:49,920 --> 00:00:51,630 ‫especially the first assumption 17 00:00:51,630 --> 00:00:54,660 ‫but they allow the algorithm to be orders 18 00:00:54,660 --> 00:00:57,810 ‫of magnitude faster going, for example, 19 00:00:57,810 --> 00:01:01,410 ‫from a billion operations per a thousand processed elements 20 00:01:01,410 --> 00:01:04,440 ‫to just a thousand operations. 21 00:01:04,440 --> 00:01:08,730 ‫Now remember that diffing is comparing elements step-by-step 22 00:01:08,730 --> 00:01:12,990 ‫between two renders based on their position in the tree. 23 00:01:12,990 --> 00:01:15,630 ‫And there are basically two different situations 24 00:01:15,630 --> 00:01:17,940 ‫that need to be considered. 25 00:01:17,940 --> 00:01:21,420 ‫First, having two different elements at the same position 26 00:01:21,420 --> 00:01:23,970 ‫in the tree between two renders 27 00:01:23,970 --> 00:01:26,790 ‫and second having the same element 28 00:01:26,790 --> 00:01:29,460 ‫at the same position in the tree. 29 00:01:29,460 --> 00:01:32,790 ‫So those are the only two situations that matter. 30 00:01:32,790 --> 00:01:36,900 ‫And so let's now start with the first situation. 31 00:01:36,900 --> 00:01:38,220 ‫So let's say that 32 00:01:38,220 --> 00:01:40,871 ‫at some point an application is re-rendered, 33 00:01:40,871 --> 00:01:42,930 ‫and in the diffing process, 34 00:01:42,930 --> 00:01:45,198 ‫we find that an element has changed 35 00:01:45,198 --> 00:01:48,255 ‫in a certain position of the tree. 36 00:01:48,255 --> 00:01:51,510 ‫Now here we're actually not looking at a tree 37 00:01:51,510 --> 00:01:56,036 ‫but at the JSX code, which leads to that tree because I find 38 00:01:56,036 --> 00:01:59,940 ‫that it's a bit easier to understand this way. 39 00:01:59,940 --> 00:02:01,434 ‫But anyway, in the case 40 00:02:01,434 --> 00:02:06,060 ‫of a DOM element changing like this, changing simply means 41 00:02:06,060 --> 00:02:09,210 ‫that the type of the element has changed 42 00:02:09,210 --> 00:02:12,990 ‫like in this example from a div to a header. 43 00:02:12,990 --> 00:02:16,320 ‫So in a situation like this, React will assume 44 00:02:16,320 --> 00:02:20,010 ‫that the element itself plus all its children 45 00:02:20,010 --> 00:02:22,380 ‫are no longer valid. 46 00:02:22,380 --> 00:02:25,980 ‫Therefore, all these elements will actually be destroyed 47 00:02:25,980 --> 00:02:28,170 ‫and removed from the DOM. 48 00:02:28,170 --> 00:02:31,680 ‫And that also includes their state, which is really 49 00:02:31,680 --> 00:02:33,990 ‫important to remember. 50 00:02:33,990 --> 00:02:38,280 ‫So as we see in this example, both the diff element 51 00:02:38,280 --> 00:02:42,120 ‫and the search bar component will be removed from the DOM 52 00:02:42,120 --> 00:02:46,170 ‫and will then be rebuilt as a header with a brand 53 00:02:46,170 --> 00:02:49,323 ‫new search bar component instance as the child. 54 00:02:50,250 --> 00:02:54,330 ‫So if the child elements stays the same across renders, 55 00:02:54,330 --> 00:02:57,123 ‫the tree will actually get rebuilt, 56 00:02:57,123 --> 00:03:01,590 ‫but it gets rebuilt with brand new elements. 57 00:03:01,590 --> 00:03:04,757 ‫And so if there were any components with state 58 00:03:04,757 --> 00:03:08,070 ‫that state will not be recovered. 59 00:03:08,070 --> 00:03:11,910 ‫So this effectively resets state 60 00:03:11,910 --> 00:03:14,130 ‫and this has huge implications 61 00:03:14,130 --> 00:03:18,600 ‫for the way that React applications work in practice. 62 00:03:18,600 --> 00:03:21,390 ‫And that's why we will see some examples 63 00:03:21,390 --> 00:03:24,622 ‫of this behavior in the next lecture. 64 00:03:24,622 --> 00:03:29,040 ‫Now, everything we just learned works the exact same way 65 00:03:29,040 --> 00:03:33,718 ‫for React elements, so basically for component instances 66 00:03:33,718 --> 00:03:37,170 ‫as we can see in this second example. 67 00:03:37,170 --> 00:03:39,780 ‫So here the search bar component changed 68 00:03:39,780 --> 00:03:42,240 ‫to a profile menu component 69 00:03:42,240 --> 00:03:47,240 ‫and therefore the search bar is again completely destroyed 70 00:03:47,310 --> 00:03:51,003 ‫including its date and removed from the DOM. 71 00:03:51,870 --> 00:03:55,890 ‫Okay, so this is the first situation. 72 00:03:55,890 --> 00:03:59,310 ‫The second situation is when between two renders 73 00:03:59,310 --> 00:04:01,950 ‫we have the exact same element 74 00:04:01,950 --> 00:04:04,023 ‫at the same position in the tree. 75 00:04:04,863 --> 00:04:08,103 ‫And this one is actually way more straightforward. 76 00:04:08,940 --> 00:04:11,850 ‫So if after a render, an element 77 00:04:11,850 --> 00:04:15,960 ‫at a certain position in the tree is the same as before, 78 00:04:15,960 --> 00:04:18,600 ‫like in these examples right here, 79 00:04:18,600 --> 00:04:22,140 ‫the element will simply be kept in the DOM. 80 00:04:22,140 --> 00:04:24,660 ‫And that includes all child elements 81 00:04:24,660 --> 00:04:28,770 ‫and more importantly, the components state. 82 00:04:28,770 --> 00:04:30,960 ‫Now this may sound pretty obvious 83 00:04:30,960 --> 00:04:35,220 ‫but it actually has some important implications in practice. 84 00:04:35,220 --> 00:04:38,820 ‫So again, the same element at the same position 85 00:04:38,820 --> 00:04:43,710 ‫in the tree stays the same and preserves state, and it works 86 00:04:43,710 --> 00:04:48,426 ‫like this for DOM elements and for React elements as well. 87 00:04:48,426 --> 00:04:50,685 ‫Now, looking at these examples 88 00:04:50,685 --> 00:04:54,690 ‫we actually see that something has changed. 89 00:04:54,690 --> 00:04:58,680 ‫However, it was not the element type that has changed 90 00:04:58,680 --> 00:05:02,040 ‫but simply the class name attribute in the diff 91 00:05:02,040 --> 00:05:05,580 ‫and the weight prop in the search power component. 92 00:05:05,580 --> 00:05:08,340 ‫And so what React is gonna do is to simply 93 00:05:08,340 --> 00:05:11,130 ‫mutate the DOM element attributes. 94 00:05:11,130 --> 00:05:13,410 ‫And in the case of React elements 95 00:05:13,410 --> 00:05:16,879 ‫it'll pass in the new props, but that's it. 96 00:05:16,879 --> 00:05:20,357 ‫So React tries to be as efficient as possible 97 00:05:20,357 --> 00:05:24,360 ‫and so the DOM elements themselves will stay the same. 98 00:05:24,360 --> 00:05:28,110 ‫They're not removed from the DOM, and even more importantly 99 00:05:28,110 --> 00:05:30,513 ‫the state will not be destroyed. 100 00:05:31,350 --> 00:05:35,220 ‫Now sometimes we actually don't want this standard behavior 101 00:05:35,220 --> 00:05:38,790 ‫but instead to create a brand new component instance 102 00:05:38,790 --> 00:05:40,560 ‫with new state. 103 00:05:40,560 --> 00:05:43,650 ‫And so that's where the key prop comes into play 104 00:05:43,650 --> 00:05:46,680 ‫as we will learn about after seeing these rules 105 00:05:46,680 --> 00:05:49,323 ‫that we just learned about in action.