1
00:00:01,170 --> 00:00:02,310
‫In this lecture,

2
00:00:02,310 --> 00:00:04,440
‫I just want to quickly demonstrate

3
00:00:04,440 --> 00:00:08,490
‫the diffing rules that we just learned in our project,

4
00:00:08,490 --> 00:00:10,620
‫so that you can see that they actually

5
00:00:10,620 --> 00:00:14,283
‫do have a practical effect in the real world.

6
00:00:15,690 --> 00:00:18,300
‫So let's start by examining a bit better

7
00:00:18,300 --> 00:00:21,663
‫what happens as we use this tab component.

8
00:00:22,650 --> 00:00:26,340
‫So again, here we have this button that when we click,

9
00:00:26,340 --> 00:00:29,370
‫we'll hide that paragraph, right?

10
00:00:29,370 --> 00:00:30,810
‫And also when we click here,

11
00:00:30,810 --> 00:00:34,803
‫then we update the state and the likes number increases.

12
00:00:35,700 --> 00:00:38,280
‫So that's what happens in this tab.

13
00:00:38,280 --> 00:00:41,973
‫But now, watch what happens when we go to another tab.

14
00:00:43,770 --> 00:00:47,040
‫So you see that the text is still hidden

15
00:00:47,040 --> 00:00:50,250
‫and the number of likes is still at four.

16
00:00:50,250 --> 00:00:52,860
‫So what this means is that the state

17
00:00:52,860 --> 00:00:57,540
‫of this tab component instance has been preserved.

18
00:00:57,540 --> 00:00:59,400
‫Now, if we hadn't learned about this

19
00:00:59,400 --> 00:01:00,840
‫in the previous section,

20
00:01:00,840 --> 00:01:04,110
‫then this would look really strange, right?

21
00:01:04,110 --> 00:01:08,250
‫Because we would expect that whenever we go to a new tab,

22
00:01:08,250 --> 00:01:10,113
‫that the state would be reset.

23
00:01:10,980 --> 00:01:12,840
‫But that's not what happens.

24
00:01:12,840 --> 00:01:16,020
‫So as we click around here, the only thing that happens

25
00:01:16,020 --> 00:01:18,063
‫is that this title here is changed.

26
00:01:18,990 --> 00:01:21,150
‫I mean, this text down here also changes

27
00:01:21,150 --> 00:01:22,953
‫but it stays invisible.

28
00:01:24,270 --> 00:01:25,800
‫So here the text changed,

29
00:01:25,800 --> 00:01:28,110
‫and the state again stayed the same,

30
00:01:28,110 --> 00:01:31,200
‫and the same here for the number of likes.

31
00:01:31,200 --> 00:01:34,140
‫So what is actually happening?

32
00:01:34,140 --> 00:01:37,170
‫Well, basically each time that we click

33
00:01:37,170 --> 00:01:38,910
‫on one of these tabs,

34
00:01:38,910 --> 00:01:42,540
‫the tab component down here is re-rendered.

35
00:01:42,540 --> 00:01:46,410
‫However, as we can see down here in this component tree

36
00:01:46,410 --> 00:01:48,000
‫as we keep clicking around,

37
00:01:48,000 --> 00:01:51,270
‫we see that the tabContent component instance

38
00:01:51,270 --> 00:01:55,140
‫always stays in the exact same position in the tree.

39
00:01:55,140 --> 00:01:57,690
‫And so with this, we are now in the situation

40
00:01:57,690 --> 00:01:59,940
‫that we learned in the previous lecture,

41
00:01:59,940 --> 00:02:02,160
‫where we have the same element.

42
00:02:02,160 --> 00:02:06,480
‫So in this case, the same component in the same position.

43
00:02:06,480 --> 00:02:08,280
‫And so because of that,

44
00:02:08,280 --> 00:02:11,580
‫the state is preserved across renders.

45
00:02:11,580 --> 00:02:14,460
‫So just like we learned before.

46
00:02:14,460 --> 00:02:18,450
‫So again, as we keep clicking around these tabs here,

47
00:02:18,450 --> 00:02:22,380
‫this component instance here is actually not destroyed.

48
00:02:22,380 --> 00:02:24,000
‫So it stays in the DOM

49
00:02:24,000 --> 00:02:25,680
‫and the only thing that changes

50
00:02:25,680 --> 00:02:28,023
‫is the props that it receives.

51
00:02:28,920 --> 00:02:32,130
‫So of course, the props will change.

52
00:02:32,130 --> 00:02:33,213
‫So where is that?

53
00:02:34,410 --> 00:02:35,940
‫Right here?

54
00:02:35,940 --> 00:02:37,980
‫So you see that now as I click here,

55
00:02:37,980 --> 00:02:41,610
‫then of course, down here the prop will have changed.

56
00:02:41,610 --> 00:02:43,890
‫But that's the only thing that changes.

57
00:02:43,890 --> 00:02:48,630
‫So the state, again, remains completely unchanged.

58
00:02:48,630 --> 00:02:52,680
‫But what if we now click on this tab number four?

59
00:02:52,680 --> 00:02:56,640
‫So as we can see in our code, in this case,

60
00:02:56,640 --> 00:02:59,220
‫so when the tab num is three,

61
00:02:59,220 --> 00:03:02,160
‫actually this DifferentContent component

62
00:03:02,160 --> 00:03:05,010
‫will be rendered, right?

63
00:03:05,010 --> 00:03:07,980
‫And so let's see what's going to happen.

64
00:03:07,980 --> 00:03:12,693
‫So we have number four here and we have the text closed.

65
00:03:13,680 --> 00:03:15,690
‫So now we click here.

66
00:03:15,690 --> 00:03:18,270
‫And immediately we see that we get

67
00:03:18,270 --> 00:03:22,440
‫a completely different component instance right here.

68
00:03:22,440 --> 00:03:24,750
‫So it's still in the same position of the tree

69
00:03:24,750 --> 00:03:28,920
‫but it's no longer tab content, but different content.

70
00:03:28,920 --> 00:03:32,313
‫And so now when I go back, watch what happens.

71
00:03:33,240 --> 00:03:36,990
‫So now the state has actually been reset.

72
00:03:36,990 --> 00:03:39,180
‫And so that's because the tab content

73
00:03:39,180 --> 00:03:42,450
‫that we had here before has been completely destroyed

74
00:03:42,450 --> 00:03:45,330
‫and removed from the DOM in the meantime.

75
00:03:45,330 --> 00:03:48,750
‫So while we were at the different content,

76
00:03:48,750 --> 00:03:51,570
‫and so that's why I placed this string here

77
00:03:51,570 --> 00:03:53,820
‫which says that this is a different tab

78
00:03:53,820 --> 00:03:55,920
‫and so it resets state.

79
00:03:55,920 --> 00:04:00,630
‫And so indeed, if we keep going here, maybe we hide this.

80
00:04:00,630 --> 00:04:03,990
‫Then again, when we go here, and we go back,

81
00:04:03,990 --> 00:04:06,570
‫then the state has been reset.

82
00:04:06,570 --> 00:04:09,000
‫Because again, in the meantime,

83
00:04:09,000 --> 00:04:13,743
‫this component here has disappeared and with it it's state.

84
00:04:14,640 --> 00:04:18,030
‫So this is a direct consequence of the diffing rules

85
00:04:18,030 --> 00:04:19,710
‫that we just learned about.

86
00:04:19,710 --> 00:04:23,610
‫And so this means that these rules are very important

87
00:04:23,610 --> 00:04:25,890
‫actually in practice.

88
00:04:25,890 --> 00:04:29,250
‫So you can see the situation happening all the time.

89
00:04:29,250 --> 00:04:32,340
‫And actually, we saw the exact same thing

90
00:04:32,340 --> 00:04:35,520
‫in or it, and split application.

91
00:04:35,520 --> 00:04:37,200
‫But don't worry about that for now

92
00:04:37,200 --> 00:04:39,450
‫because we will come back to that app,

93
00:04:39,450 --> 00:04:42,480
‫actually in a few lectures from now.

94
00:04:42,480 --> 00:04:46,470
‫Now sometimes of course, we do not want this behavior.

95
00:04:46,470 --> 00:04:48,570
‫So actually, just as I was saying

96
00:04:48,570 --> 00:04:50,670
‫in the last lecture as well.

97
00:04:50,670 --> 00:04:54,120
‫So for example, let's say I hide the details here

98
00:04:54,120 --> 00:04:58,080
‫but then, I actually expect that when I go to a new tab

99
00:04:58,080 --> 00:05:00,570
‫that it starts again with the default,

100
00:05:00,570 --> 00:05:03,210
‫so with this opened again.

101
00:05:03,210 --> 00:05:06,360
‫So again, usually this is not what we want.

102
00:05:06,360 --> 00:05:09,180
‫And so let's take a look at how we can solve this

103
00:05:09,180 --> 00:05:10,383
‫in the next video.