Untangling Complex Flows in React Native Apps with XState

In the previous chapter, we took a look at MobX—the second most popular state management library in the React ecosystem. MobX introduced some new concepts, such as using state values derived by the state manager. Other high-level concepts were similar to Redux—such as presenting state as plain JavaScript objects. We will now look at the first outlier on the React-state-management horizon: XState. XState treats the state not as an object, but as a finite machine. Don’t worry if you haven’t heard that term yet, as we’ll go over the topic of finite machines in the first section of this chapter.

We will start by looking at the theoretical side of XState’s basic idea: state machines. We will then talk about other high-level concepts of XState—state charts, actions, and the XState visualizer. When we’re comfortable with the theory, we’ll configure XState in the Funbook...