Check out a free preview of the full State Machines in JavaScript with XState course:
The "Parallel States" 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 parallel states can seem paradoxical to state machines because they allow being in two different states at the same time. However, the correct way of thinking about parallel states is to imagine a combination of states. Another word for parallel states is orthogonal states.

Get Unlimited Access Now

Transcript from the "Parallel States" Lesson

[00:00:00]
>> So parallel states are interesting because it at first seems to be paradoxical to what finite state machines are. In the parallel states, we're basically saying we should be able to be in more than one state at the same time, even though this isn't exactly what parallel states mean.

[00:00:19] Another thing for parallel states is orthogonal states. By the way, so if you hear them referred to as orthogonal. It's the exact same thing. So let's say that in our visible state for displays we have a mode and the brightness. And these, for the most part, are independent from each other, where in the mode we could switch back and forth between light and dark, and the brightness is just something that goes from bright to dim.

[00:00:47] After 5 seconds, so if you remember how to do a delayed transition, using the after property, then that's exactly how you would do it. And on any sort of focus, we go back from dim to bright. For the exercise we're going to do, we're just going to use that same.

[00:01:04] That seems switch events in order to do that. Now, a parallel states referred to being in both of these states at the same time. However, you shouldn't consider this sort of a non deterministic finite state machine or something that sort of deviates away from a state machine. Instead you could refer to this as simplifying the common editorial explosion of states which are otherwise orthogonal to each other.

[00:01:33] So, in the visible states, we could be in the lights mode, and the bright brightness, or we could be in the light mode in the dim brightness, or we could be in the dark mode and the bright brightness or the dark mode in the dim brightness. So in reality, there's four combinations of states.

[00:01:54] If you add another region so mode and brightens our region and if you add something else Then it becomes eight possible states. If you add another one, it becomes 16, 32, 64 and so on and so forth. You get that combinatorially explosion which we're trying to avoid. And this is why we use state charts.

[00:02:14] So by representing them as orthogonal regions, we don't have that method of defining combinations of states. So in other words, don't think of it as being in more than in one state at the same time, think of it as representing a combination of the states in a much simpler way.