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

The "Final States Q&A" 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 answers students questions regarding if after is a declarative settimeout and if the state machine can be restarted via a raise event. Questions regarding if each region has its own ondone transition and if the .loading and ondone transition needed due to transitioning to a child state are also covered in this segment.


Transcript from the "Final States Q&A" Lesson

>> In the example we showed the actor transition and someone asked after is he kind of declarative sets timeout then, yeah that's absolutely correct so after transition causes an action that the interpreter takes. And is going to execute it by moving it into a set timeout and after a certain timeout it's going to send an event back to the machine.

And so that's how that after transition sugar works. Can the state machine be restarted from the on done Handler, by doing a race events? So the answer is no. Once a state machine has reached its top level final State, then it is done. It can't be restarted. The way that you would restart the machine is just by recreating it.

Each region still has its own on done events, which would be called when that region reaches its final states. Correct? So this is referring to the parallel states over here. So the way that this actually works. And so just to make this a little bit more clear, let's instead of giving these regions a thought like this, we are going to give it this.

So you can imagine each of these regions looking like this and this is also how it's represented in the X state visualizer. Just to to make things a little bit more clear, each of these regions can have its own on done transition, in a parallel state they typically don't or at least I haven't seen it that way.

But yes, they can have its own on transition. Now this on transition for this parents elements is actually relative to these children. This on done is actually on the grandparents Ellen. And so this is actually in the SCXML algorithm so if I grandparents, there we go an this is actually interesting to look at it says if the grandparents is a parallel states state.

And the child states of that grandparents if every one of them so every one of those compound states is in a final state, then we on cue this done.states. And whatever events in an X state we provide sugar for that via the on done transition so that's sort of a long answer but yeah it's handled in the grandparents for parallel states.

And so if you envision it by like when this is done and this is done that means that these two are also done which I'll signify in green then the grandparents is going to say okay. Both of these compound states are in their final states so I, I am actually done as well.

Is the loading in the on done transition needed because we are transitioning to a child state. So, let's take a look at that, loading, first, let's find it. All right, so on done target loading. All right, so the reason that this is, is because first of all we're defining this transition on the parent states so this player state over here.

And this target is basically saying that this parent state needs to move itself to the loading state so if we go back to scale draw over here we're basically saying that this player state. And we can represent it like this, make sure we have the right line. Yep.

Okay. We don't, hold on. There we go. Okay. So, we can represent it by saying okay when this player state is done, it is going to transition to its own child states. So this is on done. In this is because we also have that we have ready and we have the finish dates just add the states we have the finish state over here in that always transition.

[COUGH] And because this is a final state, that is what's gonna cause the on Dunn transition to be taken up here and transition itself back into the loading state. So that's why you have that dot notation because this one when you represent a state key as they target, you're representing it's sibling.

And so that is not what the most natural approaches. So if you are in the loading stage, we are going to wanna go to a sibling stage, which is ready. So that is why there is no dots there. But if you want to go a child of the state, then you are going to use a dot in order to signify it to go inside of that state.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now