Check out a free preview of the full State Machines in JavaScript with XState course:
The "Nested or Hierarchical States" Lesson is part of the full, State Machines in JavaScript with XState course featured in this preview video. Here's what you'd learn in this lesson:

David explains that states that have common behaviors can be nested together within a visible state. Hierarchical states are equivalent to nested states.

Get Unlimited Access Now

Transcript from the "Nested or Hierarchical States" Lesson

[00:00:00]
>> Okay, so let's talk about hierarchical estates now. One of the primary features of state charts is the fact that you could nest dates in each other sort of like Russian dolls. Or just having a hierarchy like you would in the DOM. And let's take a look at an example of this, pretend that we have this state machine where we start in the hidden state and then we go to the visible state.

[00:00:27] So, when the turn on event happens, you go from hidden to visible, and when the turn off event happens, you go from visible to hidden. Now consider that we want to have two different modes of our visible states. We wanna have a light mode and we wanna have a dark mode, and we could switch back and forth between those two modes.

[00:00:48] So when we're in light mode and we switch, we go to dark mode and when we switch from dark mode, we go to light mode. Now in any of these modes, of course, when you turn off this display machine, then it should go back to the hidden states.

[00:01:03] But because of the way it's set up over here, we need to define two transitions for each of these two states. So we have to say turn off for visible lights and turn off for visible dark. And so these quickly get out of hand, especially as you have more and more states, as we're going to see in the next lesson.

[00:01:27] And so, one thing we could think about is that these visible lights and visible dark states are related states. They both have common behavior, and because of that, we could nest them in appearance state. So we could have a visible state, and this visible state can itself have an initial state.

[00:01:49] So in this case, our visible state, you could think of it as a mini state machine, has an initial state of light. And when you switch, it goes to dark, and when you switch back, it goes to light. Now in any of these states when we turn off visible, it goes back to hidden.

[00:02:07] And the way that that happens with state charts is, that if we are in one of this states which by default we are in the visible light state. Then when an event happens we check, does this state handle that event? So does it handle the turn off event?

[00:02:24] It does not, it only handles the switch event. So then we go to the parent state, which is the visible state. And then we ask it do you handle the turn off event, and it does. So it bubbles up from the deepest child to the parent states, just like just like events bubbling in the DOM.

[00:02:42] If a button doesn't capture the click events, then the container of the button will capture it. And if that doesn't, then it makes its way all the way up to the body and the root elements, so it happens in exactly the same way. Now, the way that we define these hierarchical or nested states, however you want to call them is by, I'll show you over here.

[00:03:08] We have our dragDropMachine, is, let's actually define that over here. So let's have a displayMachine = createMachine, and we have an initial state of hidden. Now remember we could have two states, hidden or visible, and because these are objects, they could be recursive, in a way. So you could define this recursively, this visible state as itself having an initial state, so initial, we could say light.

[00:03:45] And then we could have two possible states, which is light or dark, so let's, console.log. Let's actually in the visible state and see what that looks like. So we're gonna displayMachine.initialState, we're gonna see what that looks like. And so if we go to lesson number 9. You're going to see that the state value looks a little bit different.

[00:04:19] Over here, we have an object instead of a string, and that's saying that we're in the visible states. And that visible state is itself in the light state, and so this is a way of representing these hierarchical states. Because if we go deeper, let's say we have initial one, states, we'll just have one over here.

[00:04:50] Then we can see that that state value is visible, light, one, and it's represented as an object. Because we could also have orthogonal states and objects naturally represents orthogonality. But just for now, This is how you would represent nested states.