Introduction to State Machines with XState and React

This course is an introduction to finite state machines built with Javascript. State machines can describe complex applications straightforwardly, which makes them intuitive to work with and less error–prone. State machines can be easily integrated with React, which allows us to take a whole new approach for state management in React applications.

This course shows some basic concepts about state machines and their usage with XState. Also, it contains multiple coding examples, which allow students to have a better understanding of this topic.

Agenda:

Introduction to state machines

States, events, and transitions

Actions

Context

Guards

More on transition

Invoking services

Invoking machines

Delays

Alongside the presentations, we will also code some real–world examples, like:

Video player with autoplay option

Fetch machine for handling async requests

Search component with debounce