Introduction to State Machines Using XState

ClockIcon52m
xstateXState
>=4.6.7
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
4.6
647 people completed
Kyle Shevlin
By

Kyle Shevlin

Hi, I am Kyle! I'm a front end JavaScript developer who loves teaching and helping people out. When I'm not coding, you can probably find me playing golf, ultimat...

The difficulty of managing state is one of the primary reasons our applications become so complex. We try and manage this complexity with a lot of booleans, somewhat semantic variables like isLoading, wasFetched, and hasError, and over-engineered systems that are still full of bugs. Surely, there's a better way.

That better way is state machines.

State machines formalize how we define and transition through the states of our application and give us ultimate control of the most complex parts of our apps.

In this course, we will explore the problems state machines purport to solve, like boolean explosion. We'll try to solve it our own way first, get so far, and then demonstrate how state machines get us all the way. After that, we'll dive into the XState library, JavaScript's premiere state machine library, to learn its API and how to use it to solve our problems.

By the time you're done taking this course, you should have a solid education about state machines and be able to start applying them

Check out the Community Notes for this course.

This course is a community resource.

A Community Resource is a course that is free to access for all. The instructor of this course requested it to be open to the public. View all Community Resources →

What you'll learn

  • CheckIconBuild a simple machine for a piece of UI
  • CheckIconBuild Hierarchical, Parallel, and, History state machines
  • CheckIconIdentify the conditions & implement transition guards
  • CheckIconTrigger Actions on transition
  • CheckIconHandle infinite states when working with inputs
  • CheckIconUnderstand Activities

Prerequisites

Kyle Shevlin
By

Kyle Shevlin

Hi, I am Kyle! I'm a front end JavaScript developer who loves teaching and helping people out. When I'm not coding, you can probably find me playing golf, ultimat...

This course is a community resource.

A Community Resource is a course that is free to access for all. The instructor of this course requested it to be open to the public. View all Community Resources →
Illustration for Course Intro and Overview

Course Intro and Overview

Kyle Shevlin
Lesson
ClockIcon
1m 10s