State Machines in JavaScript with XState, v2

# Final States

## David Khourshid

Microsoft

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

The "Final 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 final states are used for, specifying final states with type: 'final', done transitions with onDone, final states in compound states, final states in parallel states, and top-level final states of machine.

Preview
Close

### Transcript from the "Final States" Lesson

[00:00:00]
>> When we talk about the mathematical definition of Stephen scenes, there is five part to it. There is an initial state, a finite set of state, a finite set of transitions, a finite set of events and a final state. Or final states there could be multiple final states but a final state represents somewhere where the machine ends.

[00:00:27]
So if you have a machine that's doing a certain process where it has a clearly defined start In an end, then the final state represents that process being finished. Whether it errored out or it is successful and it represents the fact that that machine can no longer make any further transitions because it is in that final state.

[00:00:51]
So, final states are used to signify that something is done. And in the machine a final state can be used to,- like I said signify the end of a process, but we could also include final states inside of compound and parallel states. So, let me just give you an example here.

[00:01:13]
Now our big example that we have over here, am gonna remove a few transition just to make things a little bit clear. Let's say the we are on the loading state and we have a success state that is going to go to loaded and am also going to remove this axle just to make things a little bit more clear.

[00:01:36]
We could mark this as type, final. And so, Let's see what happens when we do that. All right, so we're loading and when we send for example, let's send loaded events. Success events, just kidding. Getting my machines confused. Now we're in loaded. And the states also has a done property that says done is true.

[00:02:12]
And so this is a good way to just determine whether a machine is done or not. And so you see over here this previous state has a done false property. [COUGH] Now like I said, Done states or sorry, final states are also useful for signifying that part of the machine is done.

[00:02:34]
And then you could handle what happens when that part of a machine such as a compound, or parallel state is done. So, for instance, when we're in this loading state, let's see that we have to do a few things. I'm gonna make this a compound state getting data and then states getting data.

[00:02:58]
[COUGH] And I could add a transition here but I'm being lazy I'm gonna add an after transition, which is just a transition that happens after a certain amount of time. And yes, you can think of time as an event as well. So I'm gonna do this after a second.

[00:03:15]
I'm gonna be getting more data. So getting more data. And then after let's make this 500. We have a finished state. So this finish state, we're gonna mark as type final. Now keep in mind that this is not a top level state of the machine, this is. So we have this top level loaded state which is final, but this is a final state inside of this loading state.

[00:03:56]
So what happens over here? First let's log this and see what happens. It says getting data then getting more data then finished, okay? So what uses that? Well, when we're in the compound state, we could listen to a state being done by using on done over here, and so on.

[00:04:19]
Done, I'm just gonna say, actions console.log done just to show you that that gets triggered. So, we reached the finish state, and we have the done message over there. Now, this on done transition is just as implied it is a transition so we could transition, to the loaded state.

[00:04:46]
And now you're gonna see that it's going to immediately go to that loaded state because once we reach the final state of finished, it's going to take this transition and go to the loaded state. Now you can also have final states in parallel states as well. And we talked about top level final states of the machine.

[00:05:10]
But with parallel states, it's a little bit different and I really recommend you read the documentation on this because with parallel states the on done, is called when all of the child states reach their respective final states. So for example if I have oops, if I have this state over here and maybe another state here and so yeah let's say I have all of these.

[00:05:42]
And let's say that this date is a final state which I'm going to mark with a double box over here. And let's say that we have one two over here. And let's say this is an on done transition on that parallel states. So what happens here is when we reach the final state of one of the regions, so let me just mark this as green, then this on done is not going to be called just yet.

[00:06:19]
But when we reach the final states of all of the regions in parallel states, then and only then is the onDone transition taken in that parallel state. Now, this is more of a niche use case but it is useful to know. And this is something that is defined in SCXML in the original state charts paper.

[00:06:45]
And it could be useful in certain situations but most of the time you're going to be using final states in the context of compound states or in the machine overall.

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

• In-depth Courses