‫It's very common that we update
‫a state variable based on the current value of that state.
‫And so, let's now learn how to best do that.
‫And in fact, we are updating state based on
‫the current state all the time here.
‫So here, for example, in said step, we take the current step
‫and then subtract one.
‫And here, the same.
‫So, here we take the current is open state
‫and toggle it, basically.
‫And so, this is what I mean with updating state based
‫on the current state.
‫Now, the way we are doing it right now
‫is working just fine, right?
‫So, our app works fine, but now let's imagine that
‫after a few months, we come back to this app
‫and then we want to change something.
‫So, let's say that we want this handle next function here
‫to actually move forward twice.
‫So, let's say that we want to set the step state twice.
‫So, there's nothing stopping us from doing that.
‫So, we can do this once and duplicate it.
‫So, this is perfectly fine.
‫We can call the same function twice.
‫But what? What happens now?
‫So, what do you think is going to happen
‫when I click next now?
‫So, in theory, it should take the step,
‫which is currently one, at one, so two,
‫and then here it should do the same
‫from two to three, right?
‫But again, watch what happens.
‫So, it only updated the state once.
‫Now, we will go into detail why exactly this happens.
‫But for now, what I need you to know is
‫that we should not update state based
‫on the current state like this.
‫So, the way that we have been doing it.
‫Instead, what we should do is to pass
‫in a callback function here.
‫So instead of a value, we pass a function,
‫which will receive as the argument,
‫the current value of the state.
‫So, let's remove this here and let's create a function,
‫and I will just create a simple arrow function here.
‫And so as I was saying, this will receive, as an input,
‫the current value of the state.
‫Now, there are multiple conventions on how
‫to call this argument.
‫So, we could again call it step,
‫but this might then be a bit confusing.
‫We can call it the current step, for example, or just S.
‫And so this is what I'm going to do now.
‫So, just an abbreviation.
‫And so then, here we can do S minus one, just like before.
‫And so this will now work the exact same way, right?
‫So, the view here was updated in the same way as before,
‫but this is a little bit more correct,
‫because if we do this here,
‫so again, receiving the current step as an input,
‫which we just call S, but it could be called anything.
‫And so then here we return that current step plus one
‫and the same here, plus one.
‫And so if we run this again, then it works.
‫So then, it is updating the state twice.
‫So, it started at one, then, therefore,
‫this callback here received the value of one,
‫and then one plus one was two.
‫And then here in the next state up,
‫that updated value is already passed here
‫into this callback.
‫And so then we have two plus one, which makes three.
‫Now, here we actually do not want this, of course,
‫so we just want to move forwards by one.
‫But in order to be safe for future updates,
‫it's a good idea to always use a callback like this
‫when we want to update state based on the current value
‫of that state.
‫So, let's do the same here.
‫So again, here we are also doing the same.
‫So, we are also setting this open state based
‫on the current one.
‫So, let's just call it S and then toggle that now, right?
‫And that works beautifully.
‫Now, when we're not setting state based
‫on the current state, then of course we can just pass
‫in the value as normal.
‫So, just like we did here, for example.
‫So, that also happens sometimes.
‫And so in that case, we need no callback.
‫Then, we just pass in the new state value,
‫as we do here, and as we also had here previously.
‫So again, in many situations, that would work just fine.
‫So, before we only had the S minus one here
‫and nothing else and so that worked as well.
‫But in order to be safe for future updates
‫or for working with coworkers, it's best to update the state
‫in a more safe way like this.
‫And so from now on, I will do this each time
‫that we update the state based on the current value
‫of the state.