Microsoft
State Modeling in React with XState
4 hours
CC
Course Description
XState helps you manage both local and global component states in React. In this course, we'll be learning to model state before we code using state machines and statecharts and then use those in our app to orchestrate complex app logic. We'll also be visualizing or machines in real-time and learning to use model-based testing.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseWhat They're Saying
I recently learned State machines and state modelling in react using XState on frontend masters by David Khourshid. This was really good. Very well presented! Their VS Code extension is also amazing.
Adnan Sheikh
ImAdnanSheikh
State Machine made easy in ReactJS with XState React Hooks => And better yet! A course delivered by David Khourshid, the creator of XState... What else! 😍👩💻👨🏽💻
Dave Carter
d4vecarter
Course Details
Published: December 29, 2020
Learning Paths
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 8 minutes
David Khourshid introduces the course and demonstrates how to install and run the exercises in the GitHub repository.
State Machines
Section Duration: 40 minutes
David describes software modeling as knowing how an application will behave at any given time. A React component can model its state with the useState hook, however, the logic can get complex when there are multiple state values to manage.
David uses an online tool Excalidraw to diagram the state machine for the toggle component. There are three states: inactive, pending, and active. The events that trigger the stage changes are the toggle event and a success event.
David recommends refactoring any useState hooks to the useReducer hook as a first step for incorporating a state machine. The state logic is centralized within the reducer making it easier to understand and share across components.
David refactors the switch statement to use a machine object. The flow of the component's state changes are configured in the machine object and can be visualized with an tool like the XState Visualizer.
Students are instructed to create a state machine from scratch using the useReducer hook.
David live codes the solution to the State Machine exercise.
XState Machines
Section Duration: 50 minutes
David describes XState as a state machine and state chart library. The state machine object is used within XState by passing it to the createMachine method.
Students are instructed to use the state machine within XState and XState React.
David live codes the solution to the Using XState exercise. The XState Inspect tool is also covered in this segment.
David explains that extended state properties are state properties without finite values. They are stored in a context object within the state machine.
Students are instructed to use context property to hold the extended state and the assign method to update context property in an action.
David live codes the solution to the Context exercise.
David demonstrates how actions can be parameterized for more reusability. Custom parameters are passed to the useMachine hook which overrides the default parameters in the machine.
Students are instructed to move the actions created with the assign() method to parameterized actions.
David live codes the solution to the Parameterizing Actions exercise.
David demonstrates how to use XState events with 3rd party libraries in React.
Transitions
Section Duration: 31 minutes
David explains how guarded transitions prevent state transitions if a condition is not met. The condition is a function which returns a boolean indicating if the transition should run.
Students are instructed to use guarded transitions to model what happens when the timer expires.
David live codes the solution to the Guarded Transitions exercise.
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.
Students are instructed to use eventless transitions to detect when the timer expires and simplify the guard logic.
David live codes the solution to the Eventless Transitions exercise.
State Types
Section Duration: 25 minutes
David uses the useService hook to subscribe to changes in the local time service. The updated time will then be sent to the ForeignClock component's state machine to keep it up-to-date with the Clock component.
David explains that hierarchical states are states nested inside a parent state. This creates a composite state where events can propagate from the sub-state and be handled in the parent state.
Students are instructed to use hierarchical states to add overtime logic, and use forbidden transitions to adjust the behavior of the nested states.
David live codes the solution to the Hierarchical States exercise. This segment also demonstrates how to use final states to transition a parent state.
Actors
Section Duration: 1 hour, 2 minutes
David invokes a promise and a callback to demonstrate how to communicate between actors within a state machine. Promises use onDone and onError transitions based on their result. Callbacks return data after their execution.
Students are instructed to move the interval logic from the useEffect hook directly into the state machine.
David live codes the solution to the Invoking Actors exercise.
David refactors the alarm functionality into a separate component or actor, and creates a state machine for the parent application. After an alarm actor is spawned, its local state is private unless the state is shared with another actor or the parent application by sending an event.
Students are instructed to distribute the state with actors.
David live codes the solution to the Spawning Actors exercise.
David adds model-based testing to the timer application. This approach describes the behavior of the application as a state machine allowing the tests to be written based on how the user will interact with the application.
Wrapping Up
Section Duration: 20 minutes
David concludes the course by sharing some examples of XState being used with other frameworks and answering some questions. The questions were about the future of XState with TypeScript, the use of state machine with a GUI, and best practices when coding a state machine.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops