This presentation examines the core challenges that state machines address and how AI enhances their solutions. We’ll build state machines using XState in React, Angular, or Vue, and then use Stately.ai to extend these machines with the help of AI and visualize them in the Stately visualizer.
As our applications evolved, common state management tools revealed their limits. Redux gave predictability but was heavy and verbose. Zustand felt lighter and more flexible, but we were still tracking values instead of behavior. The turning point came when we revisited XState. It shifted the question from “What is the current value?” to “What transitions are allowed?” This subtle change removed ambiguity and prevented entire categories of bugs.
Before diving in, a few prerequisites help set context: basic familiarity with React, some experience with common state management libraries like Redux or Zustand, and a general understanding of async flows such as fetch requests, loaders, and UI feedback loops. Prior exposure to state machines is optional.
In large teams with multiple projects and a micro frontend architecture, consistency becomes difficult to maintain. State machines help by offering a shared way to reason about flows. They provide a common vocabulary, predictable transitions, and visual clarity, which improves alignment across distributed teams.
The session focuses on real production patterns rather than theory. Each example highlights a common frontend challenge and how state machines bring clarity, predictability, and easier testing.
Example: Authentication and Login
Login seems simple at first, but complexity grows with retries, 2FA, captchas, error recovery, session refresh, and edge cases. Traditional state handling spreads logic across components and condition checks.
With state machines, we define clear states such as idle, authenticating, authenticated, and error along with exact transitions for each event. The flow becomes easier to understand, easier to test, and easy to visualize using tools like stately.ai.