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 "Transient Transitions" 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 explains that transient transitions are different than regular transitions because they happen on null events. They are transitions that are automatically taken when entering a state.

Get Unlimited Access Now

Transcript from the "Transient Transitions" Lesson

>> Now we're gonna start talking about transient transitions. And transient transitions are different than normal transitions because they happen on null events. Or you could sort of consider them happening on no events at all. Instead, these are transitions that are automatically taken once you enter a state. And that's why transient transitions are most useful when used with conditionals.

[00:00:25] And so when you have a guarded transition, you could immediately choose where to go next. So remember that a finite state machine has an initial state, and it only has one initial state. When you turn a machine on, whether it's an ATM or your computer, it's always gonna have that same initial state.

[00:00:46] But that initial state might initially check where it needs to go next. So for example, let's say that we have a page where you're checking authentication or authorization. And you want to immediately take the user to either the dashboard if they're authorized, or the login screen otherwise. Because we can't start the machine immediately on the dashboard or the login screen, we have this checkingAuth state.

[00:01:15] Which is, in this case, it's known as a transient state, because it has no direct transitions based on events. Instead, it has completely null transitions. And so in state machine syntax, when you look at this diagram, everything inside these brackets is a transition guard. So for example, this is gonna show that we immediately take this transition if it's authorized, or if this authorized condition is true.

[00:01:46] Otherwise, we take this transition. So transient transitions look a little bit interesting in xstate. And it's because the property key is literally just an empty string. So this means that immediately, we're going to take one of these transitions if they apply. So like we saw before, where we could have multiple transitions, we're going to check that we can take the first one.

[00:02:18] So if isAuthorized is true, then we're going to select this transition. Otherwise, we're going to select the other transition. So we're gonna go directly to the login or directly to the dashboard, depending on which condition is true. So again, you could parameterize the guard over here, put it in isAuthorized, in the guards right over here.

[00:02:46] But that's not necessary, only if you want to parametrize your guards.