What is XState – high-level concepts

Now that we have a grasp on the theoretical concept of finite state machines, we can move on to talking about XState and its main concept: finite state machines! But this time, we’ll look at it in the world of programming global state in applications.

When using XState to manage global state in an application, we should think of our state as a finite state machine. This means abandoning the previous concept of representing state as a plain JavaScript object. With XState, a component—or a surface—is a machine that can be in one of multiple predefined states. Let’s consider the user login flow. Our entire app can be in one of two states: the user is logged in or the user is not logged in. We would also need a transition mechanism for the user to move from one of the states to the other. The same goes for images on the Home surface. Every image is either in the state of being “liked” or “not...