Why developers like XState

What is XState?

It is a library for creating, interpreting, and executing finite state machines and statecharts. It's a really powerful package that can be used to manage state in React Apps.

XState is a tool in the State Management Library category of a tech stack.

XState is an open source tool with GitHub stars and GitHub forks. Here’s a link to XState's open source repository on GitHub

Who uses XState?

Companies

11 companies reportedly use XState in their tech stacks, including WebTech Team, OpenWeb, and numa.

WebTech Team

OpenWeb

numa

SmartAsset

observerly

Asimov

Rakuten Taiwan Ichiba

Upsolve

Sibi

Developers

39 developers on StackShare have stated that they use XState.

Frontend Developer

My Stack

XState Integrations

React

Vue.js

Jotai

Decisions about XState

Here are some stack decisions, common use cases and reviews by companies and developers who chose XState in their tech stack.

Royi Levy

Sep 26, 2021 | 8 upvotes · 7.4K views

Needs advice

GraphQL

and

XState

Hey, I'm new and I've come here because right now, I am so overwhelmed by all the available technologies and solutions that I have no idea where to start.

What I need is to create a very specific application for developers in my workplace. The workflow looks something like this: User enters his variables --> app creates a configuration --> Run a 'test' based on that configuration. I am talking about a lot of variables. The point of the application is to take in all that information and configure it. For example, one of the variables could be a file from which I take information by parsing its content. Now the user can run a test based on the configuration. The test itself is not my responsibility, it's in python and something I need to feed my configuration.

Things I am pretty sure about:

Split the app up to frontend and backend
backend needs to be Python 2.7 -> thinking about utilizing Django
frontend is going to be web-based ->thinking about React (TypeScript, HTML, and some CSS framework like Bootstrap)
Use WebSockets for bi-directional conversation between frontend and backend
Run both server and client on the user's PC.

The problem I am facing is how to connect the different 'states' of the independent server and the client, in a programmatically correct way, with so many variables, tabs, components, etc.

I use WebSockets to move information between server and client. Let's say the user entered a new value in the client GUI, now I want to update the server so it can do its part. But I don't want to send a whole snapshot of the current state of the GUI to the server since this is not efficient. Is GraphQL the right solution for this job? After the GUI updates the server, the server parsed a few things and wants to send this back to the client. How can I take what the server sent, which could be a very deeply nested value, and update the corresponding part in the GUI? Is XState (or other state managers) the solution?

I know this is a very specific question, and I might be lost, but I would like to hear your advice because this is a new subject for me, and I am just learning right now.

See all decisions

XState Alternatives & Comparisons

What are some alternatives to XState?

Redux

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. t provides a great experience, such as live code editing combined with a time traveling debugger.

vuex

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.

MobX

MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP). React and MobX together are a powerful combination. React renders the application state by providing mechanisms to translate it into a tree of renderable components. MobX provides the mechanism to store and update the application state that React then uses.

redux-thunk

Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters.

redux-saga

An alternative side effect model for Redux apps

See all alternatives

Related Comparisons