Intro: Xstate and State Machines (React)

3 min readJul 17, 2020

Xstate reduces the state management complexity. With Xstate application is much easier for maintenance!

You’re not familiar with State machines. My article is the perfect into level.

Xstate overview

Do you love math ? If the answer is No don’t close the current tab. Give me a chance!

xState uses mathematical model: Finite-state machine. The main advantage is: You can define how the business logic will be behind each state and more important you can restrict your states!!!

Why this is important ? Now is the perfect time for example. Let’s say we have a simple react component. The react component has two radio buttons

Male.
Female

The default state is: unknown.

Let’s discuss all possible transitions and restrictions.

Transition from unknown to male
Transition from unknown to female
Transition from male to female
Transition from female to male
The transition from male to unknown is forbidden.
The transition from male to unknown is forbidden.

React state is a complex subject ? Not with Xstate.

The first advantage if you use: Xstate is Visualizer(https://xstate.js.org/viz/). My gender machine has visual representation:

How many libraries you know with Visualizer(https://xstate.js.org/viz/) ? My answer is 0. Several benefits your application wins with xstate

unknown state is unreachable from male or female state
Visualizer gives you opportunity to share your work with your teammates. Of course to debug in real time each option
React: Separation between business logic and view (React components)
The source code is much easier for reading

The source code behind my xstate machine is:

// gender-state-machine.js/**
 * Machine tracks gender options(male or female)
 * Transition from male / female to unknown is forbidden.
 */
const machine = Machine({
  id: "genderMachine",
  initial: "unknown",
  states: {
    unknown: {
      on: {
        FEMALE_OPTION: "female",
        MALE_OPTION: "male"
      }
    },
    male: {
      on: {
        FEMALE_OPTION: "female"
      }
    },
    female: {
      on: {
        MALE_OPTION: "male"
      }
    }
  }
});

Talk is cheap. Show me the code

I want to share with you my React component

If you want to use xstate you need to install:

npm i xstate @xstate/react

We need to import Xstate React hook:

import { useMachine } from "@xstate/react";

Now is the time for us to import: Gender Machine

import genderMachine from "./gender-state-machine"

The next step is creating a new React hook:

const [current, send] = useMachine(genderMachine);

Key components:

current.value access the current states

current.matches('male')is equal to true if the state is male

current.matches('female')is equal to true if the state is female

Let’s build the UI

import React from "react";import { useMachine } from "@xstate/react";import genderMachine from "./gender-state-machine";export default function App() {
  const [current, send] = useMachine(genderMachine);  const setMale = () => {
    send("MALE_OPTION");
  };  const setFemale = () => {
    send("FEMALE_OPTION");
  };  return (
    <>
      <h2>{current.value}</h2>
      <button onClick={setMale}>Male</button>
      <button onClick={setFemale}>Female</button>
    </>
  );
}

I want to improve the application. My goal is current.mathes to disable buttons

<button disabled={current.matches("male")} onClick={setMale}>Male</button><button disabled={current.matches("female")} onClick={setFemale}>Female</button>

Live Demo:

State machines

Summary

If you’re boring to manage state with boolean variables. Now is the moment to add xState in your tooling set.

If you’ve interest to learn: xState the resource table is

Intro: Xstate and State Machines (React)

Xstate overview

Talk is cheap. Show me the code

Summary

Written by Dimitar Danailov