What is XState used for?
Tags: webdev, react, node, vue
Published: 2022-06-21 12:28:17

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](https://reactjs.org/), [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/), as well as an upcoming [Solid](https://www.solidjs.com/) integration. It also works well in [Angular](https://angularjs.org/) without any integrations needed.

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

```ts
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](https://zagjs.com/components/react/accordion), which is using XState-style syntax and statecharts to build reusable components across frameworks. You can even [see them visualized](https://state-machine-viz.vercel.app/accordion) using Stately's tools.

### Global state

You can also use XState to manage global state in your apps. A common pattern is the [Flux](https://facebook.github.io/flux/docs/in-depth-overview/) architecture, where you dispatch events to a single top-level store. Parts of your app can subscribe to updates from that store, using [selectors](https://redux.js.org/usage/deriving-data-selectors).

XState can **replace global state managers like [Redux](https://redux.js.org/) or [Vuex](https://vuex.vuejs.org/)**, with one major benefit - your global state can be visualised and [visually edited](https://stately.ai/editor). 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](https://xstate.js.org/docs/recipes/react.html#global-state-react-context) for more info.

## Native/extensions

XState is also extremely useful in [React Native](https://reactnative.dev/) or [Electron](https://www.electronjs.org/) 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](https://github.com/statelyai/xstate-tools/blob/6a91d6a5cdd4cf73c882175a2ad5fbe3b2a9910d/apps/extension/client/src/editorWebviewScript.ts#L90). [Centered](https://www.centered.app/) 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](https://nodejs.org/en/) or [Deno](https://deno.land/) to build [serverless functions](https://vercel.com/docs/concepts/functions/serverless-functions) or persistent servers.

For lambda functions, XState exposes a function called [`waitFor`](https://xstate.js.org/docs/guides/interpretation.html#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](https://www.youtube.com/watch?v=qqyQGEjWSAw) 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](https://www.gatsbyjs.com/). 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.