This course has been updated! We now recommend you take the State Machines in JavaScript with XState, v2 course.

Check out a free preview of the full State Machines in JavaScript with XState course:
The "History States Solution" 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 live codes the solution to the history states exercise.

Get Unlimited Access Now

Transcript from the "History States Solution" Lesson

>> We are going to remember which mode we selected, whether it was light mode or dark mode. So the first thing we need to do is we need to define some states. So initially, we're gonna be in light mode, might not be a preference for everyone. It's not for me.

[00:00:18] So that's why we're going to give the option to switch between light and dark mode, so states we have light, All right, so when we turn on the machine, we have this switch mode button that goes between light and dark mode. And you'll see that it does that automatically.

[00:00:54] Again, that's using those data attribute selectors in CSS in putting this directly on the state's You're on the DOM node. But of course, when we turn it on switch to dark mode and turn it off, we see that it forgets our mode, which isn't something that we are expecting as a user.

[00:01:16] So that's why we could add a pseudo state which is the history state. And so we'll just call this hist or previously selected mode, whatever you wanna call the state, it doesn't matter. What does matter is the type that you give it. We want to say that this is a history node.

[00:01:34] And what this is going to do is it's going to remember which one of these child states we were last in. So, now we could transition directly to visible .hist and so that's going to go to either the last remembered child state, light or dark. Or it's going to go to the initial state by default.

[00:01:56] So when we turn it on, switch to dark mode, turn it off, and turn it on again. You can see it goes to dark mode. And just to show you how exactly that works, let's console dot log, this dates. When we turn it on and go to dark mode you'll see that we have what's called a history value.

[00:02:22] Now don't worry too much about this object. all it's doing is it's keeping track of the the current value and the last remembered values of those nested states. So in the visible state we're seeing that the current is dark. And and we're remembering each of the history states in each of the parents states, so just visible in this case.

[00:02:46] So that means when we turn off and when we turn on, we have some way to reference what that last date was. And so that's how it knows to go directly back to that state. Brian asks, Is there any preferred naming convention that the community has for coming up with naming your history states?

[00:03:05] Now by the community, you have to realise that state charts are, Definitely not a new idea. They've been around for three decades and they're using many, many languages. So if we search the charts, history states and we go to images, we could see that people name it all sorts of stuff.

[00:03:23] Generally people like to name it this. A single letter H. And so you could do that. That tends to work pretty well for most use cases. So either H, I like it being hits just because I have a little bit of an aversion to those single letter names.

[00:03:43] I'd like them to be. A little bit more descriptive. So really, it's up to you. And you could always look at prior arts and what people have been doing in other languages for a really long time to see exactly how to name your states.