‫In this lecture,
‫I just want to quickly demonstrate
‫the diffing rules that we just learned in our project,
‫so that you can see that they actually
‫do have a practical effect in the real world.
‫So let's start by examining a bit better
‫what happens as we use this tab component.
‫So again, here we have this button that when we click,
‫we'll hide that paragraph, right?
‫And also when we click here,
‫then we update the state and the likes number increases.
‫So that's what happens in this tab.
‫But now, watch what happens when we go to another tab.
‫So you see that the text is still hidden
‫and the number of likes is still at four.
‫So what this means is that the state
‫of this tab component instance has been preserved.
‫Now, if we hadn't learned about this
‫in the previous section,
‫then this would look really strange, right?
‫Because we would expect that whenever we go to a new tab,
‫that the state would be reset.
‫But that's not what happens.
‫So as we click around here, the only thing that happens
‫is that this title here is changed.
‫I mean, this text down here also changes
‫but it stays invisible.
‫So here the text changed,
‫and the state again stayed the same,
‫and the same here for the number of likes.
‫So what is actually happening?
‫Well, basically each time that we click
‫on one of these tabs,
‫the tab component down here is re-rendered.
‫However, as we can see down here in this component tree
‫as we keep clicking around,
‫we see that the tabContent component instance
‫always stays in the exact same position in the tree.
‫And so with this, we are now in the situation
‫that we learned in the previous lecture,
‫where we have the same element.
‫So in this case, the same component in the same position.
‫And so because of that,
‫the state is preserved across renders.
‫So just like we learned before.
‫So again, as we keep clicking around these tabs here,
‫this component instance here is actually not destroyed.
‫So it stays in the DOM
‫and the only thing that changes
‫is the props that it receives.
‫So of course, the props will change.
‫So where is that?
‫Right here?
‫So you see that now as I click here,
‫then of course, down here the prop will have changed.
‫But that's the only thing that changes.
‫So the state, again, remains completely unchanged.
‫But what if we now click on this tab number four?
‫So as we can see in our code, in this case,
‫so when the tab num is three,
‫actually this DifferentContent component
‫will be rendered, right?
‫And so let's see what's going to happen.
‫So we have number four here and we have the text closed.
‫So now we click here.
‫And immediately we see that we get
‫a completely different component instance right here.
‫So it's still in the same position of the tree
‫but it's no longer tab content, but different content.
‫And so now when I go back, watch what happens.
‫So now the state has actually been reset.
‫And so that's because the tab content
‫that we had here before has been completely destroyed
‫and removed from the DOM in the meantime.
‫So while we were at the different content,
‫and so that's why I placed this string here
‫which says that this is a different tab
‫and so it resets state.
‫And so indeed, if we keep going here, maybe we hide this.
‫Then again, when we go here, and we go back,
‫then the state has been reset.
‫Because again, in the meantime,
‫this component here has disappeared and with it it's state.
‫So this is a direct consequence of the diffing rules
‫that we just learned about.
‫And so this means that these rules are very important
‫actually in practice.
‫So you can see the situation happening all the time.
‫And actually, we saw the exact same thing
‫in or it, and split application.
‫But don't worry about that for now
‫because we will come back to that app,
‫actually in a few lectures from now.
‫Now sometimes of course, we do not want this behavior.
‫So actually, just as I was saying
‫in the last lecture as well.
‫So for example, let's say I hide the details here
‫but then, I actually expect that when I go to a new tab
‫that it starts again with the default,
‫so with this opened again.
‫So again, usually this is not what we want.
‫And so let's take a look at how we can solve this
‫in the next video.