Check out a free preview of the full State Modeling in React with XState course

The "Eventless Transitions" Lesson is part of the full, State Modeling in React with XState course featured in this preview video. Here's what you'd learn in this lesson:

David explains that eventless transitions are always taken when the state machine is first entered. They are defined using the "always" property of the state node and contain a conditional guard which must evaluate to true in order to run.

Preview
Close

Transcript from the "Eventless Transitions" Lesson

[00:00:00]
>> Let's now talk about eventless transitions. And, so i'm going to talk about why eventless transitions exist and why you might want to use them. An eventless transition, is a transition that occurs with no event. So basically, it occurs immediately. So, let's go to our scratchpad take a look at what that looks like.

[00:00:28]
Okay, so i have this alarm machine over here. And let's say that i also want a greeting machine. So a greet machine, i'm going to create a greet machine, create machine. And now here's where it gets tricky. I want to say good morning or good day, depending on what time it is.

[00:00:53]
Obviously, if it's afternoon, i don't wanna say good morning that's a little bit silly. And one question that frequently comes up is how do you define a dynamic initial state? So basically how do you say i want to start on this date on this condition, but i want to start in a different state if that condition doesn't pass, and this other condition passes.

[00:01:16]
And the answer is to use an eventless transition. So we could say, at first basically when this machine starts, we don't know whether it's morning or not.. So let's have states, initial or sorry, unknown. So in this unknown state, this is a state where we could find out, is it morning or is it evening.

[00:01:45]
So we could have an eventless transition. Originally, you specify eventless transitions with an empty string over here. In the latest version of x state, even though that will still work, this has been simplified so that you specify it on the always property. So we could say, always go to the morning states and so we'll have a morning state.

[00:02:13]
Over here. And by the way, you could have multiple machines in the components. So you could say const greet state, and we won't send anything. Use Machine, greet machine. And then, over here, i'm just gonna make a h2 tag and i'm gonna say good. And then i'm going to basically see if the greet state dot value is morning, then say morning.

[00:02:53]
Otherwise, say day. Now, when we get here it's going to say good morning. And it didn't say good day because we're transitioning immediately from this unknown state. And we're always going to the morning state. Now, what if we actually do want to check the time? Well, just like in the previous lesson we could use, we could make this a guarded transition.

[00:03:24]
So we could say a cont is morning, and only if it's morning do we go to morning. Otherwise, let's go to day. So we'll add this new day state over here. And now we also have to specify that is morning. So i'm just going to just put this in line for now.

[00:03:45]
I could say return new dates dot get hours is less than 12. I believe this is going to return a number between 0 and 23. And so obviously if it's before 12, it's morning. Alright, so this should say, good day and so it transition immediately to good day.

[00:04:09]
Because it's not morning, the condition didn't pass. And so that guard, the transition is not taken. And you're going to take this day instead. Now, a word of warning since this always, always, always gets called, when you, enter this state, you have to be careful that you don't get into an infinite loop.

[00:04:30]
And you could accidentally get into an infinite loop, basically, if you stay in that state at all. So if you have this condition and you forget this day, then this is what's gonna happen. Or target morning should go somewhere. Let's force this to be unknown just to show you what happens over here.

[00:04:57]
So basically we have a stack overflow, and that's because it's going to keep trying to go to that state over and over again. So again, that's something that you don't want to do. Always make sure that, this is called a transient states because it does have that, it's basically going somewhere else.

[00:05:17]
You're not staying in that state, you're immediately either going to morning or day depending on if that condition passes. So those are what's known as eventless, or always, in other words, transitions.

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