What is XState used for?

#webdev #react #node #vue

XState can be used wherever JavaScript runs, whether on the backend or frontend. Because the code it creates can be visualized, it's great at handling complex use cases - being able to see what a complex piece of code does can be extremely useful.

Let's look at each use case one-by-one.

On the web

XState can be used in any frontend application to manage state. It has first-class integrations for React, Vue, Svelte, as well as an upcoming Solid integration. It also works well in Angular without any integrations needed.

You can try it in a Vanilla JS app by running this simple piece of code:

import { createMachine, interpret } from "xstate";

const machine = createMachine({
  initial: "waiting",
  states: {
    waiting: {
      after: {
        2000: "alerted",
      },
    },
    alerted: {
      entry: () => {
        alert("Hello from the state machine!");
      },
    },
  },
});

interpret(machine).start();

In this example, the machine will wait for 2 seconds, then call alert() to let you know it's alive.

There are plenty of ways XState can be used on the frontend - let's talk about two of the most common patterns:

Complex components

Most frontend apps split their code into components - individual pieces which can be reused across the app. If need to build a complex component, you can use XState to co-ordinate it.

A great example of this is the library Zag.js, which is using XState-style syntax and statecharts to build reusable components across frameworks. You can even see them visualized using Stately's tools.

Global state

You can also use XState to manage global state in your apps. A common pattern is the Flux architecture, where you dispatch events to a single top-level store. Parts of your app can subscribe to updates from that store, using selectors.

XState can replace global state managers like Redux or Vuex, with one major benefit - your global state can be visualised and visually edited. XState gives you the ability to create a global store, dispatch events to it, and subscribe to only the pieces that matter. See our specific instructions in React for more info.

Native/extensions

XState is also extremely useful in React Native or Electron apps, Browser extensions and IDE extensions. Since XState doesn't use any browser API's, you can use it anywhere JavaScript runs.

For instance, we use XState at Stately to co-ordinate our VSCode extension. Centered uses XState extensively in their Electron and React Native apps to co-ordinate timers, control app updates and handle complex user interactions.

Backend

You can use XState in Node.js or Deno to build serverless functions or persistent servers.

For lambda functions, XState exposes a function called waitFor, which allows you to wait for a state machine to be in a certain state. This allows you to use XState inside async functions with ease.

To learn more about XState in the backend, see our recent video introducing the topic.

Scripting and CLI's

XState can be used when running scripts or CLI's to co-ordinate long-running processes.

The most famous example of this in the wild is the frontend framework Gatsby. They use XState in their build process and development server to co-ordinate file-system changes and parallelize multiple processes. This means their entire build system is visualisable - an incredibly boon for such a complex process.

Summary

XState works anywhere JS runs - and folks are using it in the wild for all sorts or use cases. Any time you're building something that feels remotely complex, you can use XState to simplify your code and enable powerful visual tooling.