DEV Community

Cover image for What is XState used for?
Matt Pocock
Matt Pocock

Posted on β€’ Originally published at stately.ai

13 7

What is XState used for?

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();
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (2)

Collapse
 
adam_cyclones profile image
Adam Crockett πŸŒ€ β€’

I really enjoyed using it for a multi step cli one time.

Also I did try some algorithms using XState and canvas. State machines are easy to read

Collapse
 
wootsbot profile image
Jorge Luis Calleja Alvarado β€’

Wow, I keep using xstate in the company's projects and now with this approach I don't hesitate to use it in the serverless projects we have.

Agent.ai Challenge image

Congrats to the Agent.ai Challenge Winners πŸ†

The wait is over! We are excited to announce the winners of the Agent.ai Challenge.

From meal planners to fundraising automators to comprehensive stock analysts, our team of judges hung out with a lot of agents and had a lot to deliberate over. There were so many creative and innovative submissions, it is always so difficult to select our winners.

Read more β†’

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay