State Machines in JavaScript with XState, v2

# History States

## David Khourshid

Microsoft

### Check out a free preview of the full State Machines in JavaScript with XState, v2 course

The "History States" Lesson is part of the full, State Machines in JavaScript with XState, v2 course featured in this preview video. Here's what you'd learn in this lesson:

David discusses and demonstrates what history states are used for, previous states, specifying history states, shallow history, and deep history.

Preview
Close

### Transcript from the "History States" Lesson

[00:00:00]
>> All right, let's talk about another powerful feature of state charts, and that's history states. What exactly are history states and what are they used for? History states are not exactly the same as previous states, because a previous state just represents going arbitrarily back in time and state machines need to be deterministic.

[00:00:20]
So if you do wanna go back to some other state, there needs to be an explicit transition from your current states to whatever previous state. So it sort of needs to be hard coded. History states are actually used in conjunction with compound states for revisiting those states with the previous child states that the compound state was in.

[00:00:43]
So let me just describe this in a diagram. Let's say that we have a compound state over here and this compound state has two child states. So we have A, And we have B. So let's also say that this compound state has a sibling state, and we'll just put this over here, and it could transition back and forth between the sibling state.

[00:01:18]
So we have an arrow going there, and an arrow or transition, whatever you want to call it going there, of course we need an initial state. So we're just going to go into A and pretend that there's like a way to transition from A to B. So we have A and B right here.

[00:01:38]
All right, so let's say that we answer this machine and we're in the state A and then a transition is taken out of this compound state that goes to this other state. And then a transition from the other states goes back to that compound states. Well, A is going to be revisited again and that's going to be the next states and that's because it is the initial state.

[00:02:09]
However, let's say that we transition from A to B. And now B is our current states. So now when we go to other, we're in the other state, so I'm just gonna color this something else. And now when we transition back, I'm gonna color this purple, what do you think will happen?

[00:02:32]
Well, since we're entering this compound states, we are going to also immediately enter the initial states and not the most recent child state of the states. So this might not be what we expect or what we wants to model. And so that's where history states come in handy.

[00:02:55]
We could have this special, it's called a pseudo states. It's defined the same as any other state, but it's a state that serves a special purpose. And so we're just gonna mark it with an H over here. And this is called a history state. So instead of going to this parent state from this other state, we go from the other states to a history state.

[00:03:24]
And this history state is a child of this parent state, which means it's also a sibling of the A and B states. So what's gonna happen now is if we're in the B state over here, and we transition to the other state. Now, when we transition back, and keep in mind we're transitioning directly into the history state.

[00:03:53]
That is actually going to say, all right, we want to really transition to the most recent child state of this parent state, which is going to be B. And so that's why history states are best for remembering what the most recently visited child state in this parent state was and going back to it.

[00:04:19]
So it's not a mechanism for going back in states. There's completely different methods of doing that. And you would also typically do that outside of the state machine itself. But rather, it's a way for you to declaratively represent, I want to go back to the most recently visited child state in this parents.

[00:04:43]
So there's also such thing as deep history. And so let's say that this B state also has some child states of its own and let's say that this is also a compound state. So now instead of having to have a history state here and also have history state here and if we have deeper levels adding more and more history states, we could just represent this as deep history.

[00:05:12]
And in state chart notation that's represented with H*. And so what this deep history state is gonna do is it's going to go to the most recently visited child. But it's also going to go to that child's most recently visited children as well. So it's an infinitely deep, or a recursive if you will, history state.

[00:05:37]
And so that could be useful in many situations.

### Learn Straight from the Experts Who Shape the Modern Web

• In-depth Courses