Workflow State Machine

Pre-built wizard machine factory:

const checkoutMachine = createWizardMachine({
  steps: ["cart", "shipping", "payment", "confirmation"],
  guards: {
    canProceedFromCart: (ctx) => ctx.items.length > 0,
    canProceedFromShipping: (ctx) => !!ctx.shippingAddress,
  },
  onComplete: (ctx) => submitOrder(ctx),
});

// In component:
const { step, next, back, canProceed, isSubmitting } = useWizard(checkoutMachine);

Async operation pattern with automatic state management:

const fetchMachine = createAsyncMachine({
  fetch: (id: string) => api.getUser(id),
  onSuccess: (ctx, user) => ({ ...ctx, user }),
});
// States: idle → loading → success/error, all typed

Custom serializer handles edge cases that break JSON.stringify:

// Standard serialize/deserialize doesn't handle functions in guards or actions
const serializer = createMachineSerializer({
  // Functions are serialized as references, resolved against the machine definition at hydration
  serializeFunction: (fn) => ({ __fnRef: fn.name }),
  deserializeFunction: (ref, machine) => machine.guards[ref.__fnRef],
  // Circular references are tracked via WeakSet during serialization
});