This course has been updated! We now recommend you take the State Machines in JavaScript with XState, v2 course.
Transcript from the "History States" Lesson
[00:00:00]
>> We have a small problem with the with the machine that we talked about in hierarchical states. So this works fine when we have a hidden state and we go to visible then we switch between light and dark. And so we're setting our preference inside the visible state, whether we want light mode or dark mode.
[00:00:20] But the problem that you could see in this chart is that when you turn off the display, it goes to hidden and when you turn on, it goes directly to the light one. So if you prefer dark mode, this gets pretty annoying because you're gonna have to keep switching back to dark mode.
[00:00:38] And this isn't really favorable. So what we could do instead is introduced history states. And so what this is saying is that when we're in the hidden state and be turned on event happens, we go to visible.hist and so we specified this hist as a history state, this is just convention you could call it whatever you want.
[00:01:01] And what this is going to say is go to the last, the last visited child state of this visible state. So it the last date that we were in, in this visible state was dark, then when we turn off and when we turn on again, it's going to go back to dark instead of directly to lights.
[00:01:23] And that's what that history state allows you to do. History states are knots for going back and forth between different states. That's something that you should use context for history states are all about the last visited child of a parent state. So it's most useful for hierarchical and parallel states which we're going to talk about next.