‫All right, so let's move back to our project,
‫and see how React batches state updates in practice
‫and how this state updating is in fact asynchronous.
‫So let's come down here to our TabContent component,
‫and then let's play around a little bit with the states
‫that we have here.
‫And first of all, I want to now implement the functionality
‫of this undo button here.
‫So this undo will basically undo
‫or reset the two states that we have here.
‫So this one, and this one.
‫So let's write a simple function handleUndo.
‫And then what it does is setShowDetails back to true,
‫and set the likes back to zero.
‫And then let's use that handler right here.
‫So easy enough, handleUndo.
‫And yeah, that works great.
‫So as we just learned in the previous lecture,
‫inside of this event handler function here,
‫these two state updates are batched.
‫So they will only cause one component re-render.
‫Now how can we actually prove that?
‫Well, one simple way is to lock something
‫to the console here.
‫So let's say render.
‫And so then each time that the component gets re-rendered,
‫and so then each time this console.log will log render
‫to the console.
‫So let's see.
‫Let's first get rid of these other ones that we had here.
‫So here there are, and okay.
‫Now nevermind this one here that is a bit more grayed out.
‫This is coming from somewhere else.
‫So only this one render here is important.
‫So this first render string here
‫comes from the initial render of this TabContent component.
‫And if we go to another tab, then we get another one,
‫because of course, then this component here is updated.
‫Now, okay.
‫Now let's remove this, so that we start empty,
‫or actually we will see a few more.
‫So each time that we click here,
‫the component function gets rendered,
‫and so then the console.log is executed.
‫And so this is actually a really nice way of proving
‫that rendering is calling the component function.
‫Now, all right?
‫But now let's empty this.
‫And then as I click this button here,
‫we should only see one render here,
‫which would then mean that these two state updates
‫were batched.
‫So let's see.
‫And indeed, we only get one here.
‫Great.
‫Now let's also see that the state updating is asynchronous.
‫So basically, if I try to access the number of likes here
‫right after updating the state, then what happens?
‫So first I need to of course increase a little bit,
‫then let's clean this.
‫And as I reset, well, we get five,
‫which might be surprising.
‫But if you paid good attention in the previous lecture,
‫then this will actually no longer come as a surprise to you.
‫So the reason that here we get five is that the state
‫is in fact actually only updated after the re-rendering,
‫or basically during the re-rendering,
‫but not immediately after we call dysfunction.
‫So that's impossible.
‫And therefore, here we still get that old likes state,
‫which again is still at five.
‫Then now it is of course at zero,
‫because now the re-rendering has already happened.
‫Now, by the way, what do you think will happen,
‫so what do you think will get rendered
‫if we click the undo button again?
‫So let's clear this.
‫And so let's see what happens.
‫So I click this now, and you see that no render
‫was logged to the console.
‫So why do you think that is?
‫Why was the component instance not re-rendered this time?
‫Well, it's because both of the state values
‫were already at their default basically.
‫So details was already true and likes was already zero.
‫And so then as we attempted to update the state,
‫both of them were actually not updated.
‫And again, that's because the new state
‫was equal to the current state.
‫And so in that situation,
‫React will not even try to attempt to update the state,
‫and then of course, it will also not re-render
‫the component instance.
‫And so that's why, well, nothing happens.
‫So as we keep clicking here, of course,
‫the console.log keeps getting executed,
‫but again, the component itself is not re-rendered.
‫Okay, but let's move on here,
‫and let's implement this next button here.
‫So here I have these three pluses,
‫which means that when I click here,
‫I actually want like a super like,
‫so this should then improve by three.
‫So let's create a function for that.
‫And I will just copy this one.
‫And let's call it TripleInc.
‫And then I'll just duplicate this here.
‫And then let's come down here,
‫onClick and then handleTripleInc.
‫Okay, let's go back to our function,
‫because this will become very important.
‫So what do you think is going to happen
‫when I click here now?
‫Again, let's close.
‫So what do you think will happen
‫to the state here in particular?
‫So let's see.
‫And well, it only increased once,
‫so not three times as we might expect.
‫But were we actually really expecting
‫that it would increase three times?
‫I mean with what we already know,
‫we should know that this here could never work.
‫So let's see why that is.
‫So right here at the beginning of dysfunction
‫likes was zero, right?
‫And so then here, setLikes would be zero
‫plus 1 equals 1, right?
‫So this one is pretty clear, but then what in the next line?
‫So what is the value of likes here in this line?
‫Well, it is actually still zero.
‫And so that's because the state update
‫is once again, asynchronous.
‫So we do not get access to the new state value
‫after this line of code right here.
‫And so this is exactly what happens down here.
‫So here, the state is now stale,
‫so as we learned in the previous lecture as well.
‫So we can very easily see that here again
‫with this console.log.
‫So if I click again, and actually I want the other one.
‫So this one here, well then you see that it became two,
‫which is exactly the value that we had before.
‫And so here it was 2 plus 1 made this new 3.
‫But here, it was still 2, and here as well,
‫and here as well.
‫So how could we make this work
‫if we really wanted to update the state
‫three times like here?
‫I mean, of course, we could just do this,
‫but this is not the point here.
‫So we are trying to learn how we could do this right here
‫in another way.
‫So actually, we have been doing that all along.
‫So all the time, whenever we were updating state
‫based on the current state,
‫we would use a callback function instead of just a value.
‫So we also talked about that in the previous lecture.
‫And so now the time came where we really learn
‫why we have been doing it with the callback function
‫all the time.
‫So let's remove this here or comment it out.
‫And then let's do it the right way.
‫So setLikes, and now we pass in the callback function.
‫And then as you already know,
‫the first argument here is the current value of the state,
‫and then we just return the new one.
‫And again here, likes could be called anything.
‫Okay, let's do this three times, and then let's reload.
‫And now, yeah, now it works.
‫So this is the trick that changes the way
‫this state is updated.
‫So here in the callback function,
‫we do actually get access to the latest updated state.
‫So initially likes was zero, and then it returned 1.
‫And so then in the next call here,
‫this likes in this callback function will be 1.
‫And so then we can update it
‫to another one, and to another one.
‫Beautiful.
‫And so this is the reason why I've been telling you
‫that each time that we set state based on the previous state
‫or based on the current state,
‫we should always, always use a callback function
‫like this here.
‫Now you might be wondering like why should we do that here?
‫I mean, it works perfectly fine, right?
‫And you're right about that.
‫It works perfectly fine,
‫but we never know what other developers
‫might do with our functions,
‫or even what we might do later ourselves.
‫So let's say that at some point,
‫we want to change how this function works,
‫and then without thinking about it, we just do this.
‫And so then we go back to this not working as expected.
‫So now we want to increase the likes by 2,
‫but it will still only increase by 1, right?
‫Or another situation, maybe, let's comment this one out.
‫So maybe, here we could think
‫that we could just call this function here three times.
‫Or maybe some other developer might think that.
‫And so then they would get surprised when they see
‫that this is actually not working, right?
‫And so again, you should always,
‫always use the callback function,
‫because then you are always safe for whatever change
‫your code goes through in the future.
‫So with this, it will now work,
‫but of course, we need to write the correct variable name.
‫So yeah, now it does work.
‫So even if you then use the function somewhere else,
‫by doing this, you are safeguarded about well,
‫any changes that might occur in the future.
‫All right.
‫And now to finish, let's just prove
‫that automatic batching now works in React 18
‫even outside of event handlers.
‫So here we have this button that should undo,
‫so it should reset our state two seconds later.
‫Well, that's easy enough.
‫Let's just create a function called handleUndoLater.
‫And this function will simply set a timeout,
‫and then after two seconds, it'll call handleUndo.
‫So after 2000 milliseconds.
‫And so what this will do is to schedule
‫this handleUndo function to be executed two seconds
‫after this function here was called.
‫And so then, handleUndo is no longer really
‫an event handler function.
‫It's just any function that simply gets called
‫at a later time.
‫So that's just what setTimeout does.
‫So let's then wire that up here with the onClick prop.
‫So handleUndoLater.
‫All right.
‫Let's just then set our state.
‫Let's clean up here.
‫And then I just clicked, and let's wait.
‫And indeed, two seconds later, our state was updated.
‫And indeed, our component was only rendered once,
‫which is proved here by this single render string.
‫Great.
‫So again, this proves that in React 18
‫batching happens not only inside event handlers,
‫but also inside a set timeout.
‫And the same is true for promises and other situations.
‫Now, just to really make sure,
‫and you don't have to do this,
‫but I like to play around with this stuff.
‫So what I want to do now is to render this using React 17.
‫So I will comment this one out, and comment this one, okay?
‫And then here we need to also change here from here.
‫And so now this is basically back
‫to being a React 17 application.
‫And that's exactly what it says here in this warning.
‫So until you switch to the new API,
‫your app will behave as if it's running React 17.
‫But right now, that's actually exactly what we want.
‫So now we get some error here, but yeah.
‫So let's do some state updating here.
‫Then I will clean and watch what happens
‫when I click this button now.
‫So let's wait.
‫And now we got two re-renders.
‫And so this does actually prove that before React 18,
‫automatic batching was not happening inside a setTimeout.
‫So that's really curious,
‫but of course, let's now put it back.
‫All right.
‫So this was just to show you
‫that there really is a difference,
‫so that React 18, well really changed this.
‫So again, now we should be back to only one.
‫Yeah, there we go.
‫Okay, and this is actually all I had to show you here.
‫So this was a bit longer than expected,
‫but we did to a lot of stuff here.
‫So after you do a quick recap of everything we just do here,
‫or that we did here, actually,
‫then let's go to the next lecture.