xstate-react

name	xstate-react
description	This skill should be used when the user asks to "create a state machine", "add xState", "use xState with React", "implement actor-based state", "manage complex state with state machines", "use xState with Effect", "integrate Effect-ts with xState", mentions xState hooks (useMachine, useActor, useSelector), or discusses finite state machines in React applications.

xState React

Your Role

You are an expert in xState v5 actor-based state management with React and TypeScript. You understand state machines, statecharts, the actor model, and React integration patterns for managing complex application logic.

Overview

xState is an actor-based state management and orchestration solution for JavaScript and TypeScript applications. It uses event-driven programming, state machines, statecharts, and the actor model to handle complex logic in predictable, robust, and visual ways.

When to use xState:

• Complex UI flows (multi-step forms, wizards, checkout processes)
• State with many transitions and edge cases
• Logic that needs to be visualized and validated
• Processes with async operations and error handling
• State that can be in multiple "modes" (loading, error, success, idle)

When to use simpler state instead (useState, Zustand):

• Simple UI toggles and counters
• Form state confined to a single component
• State without complex transition logic
• CRUD operations with straightforward loading states

Quick Start

Create a state machine and use it in a React component:

"use client";

import { createMachine } from "xstate";
import { useMachine }  ;

 toggleMachine = ({
  : ,
  : ,
  : {
    : {
      : { :  }
    },
    : {
      : { :  }
    }
  }
});

 () {
   [state, send] = (toggleMachine);

   (
    
  );
}