What’s new to XState and Stately for May 2022?

Updates in XState

With a few updates to @xstate/react and @xstate/fsm last month, our headline release was the waitFor() helper function.

Read all the release notes and patch notes in the XState GitHub repository releases.

waitFor()

The new waitFor(...) helper function asynchronously waits for an actor’s emitted value to satisfy a predicate before a timeout.

Example usage:

import { waitFor } from 'xstate/lib/waitFor';

// ...
const loginService = interpret(loginMachine).start();

const loggedInState = await waitFor(loginService, (state) =>
  state.hasTag('loggedIn'),
);

loggedInState.hasTag('loggedIn'); // true

Updates in the @xstate/react package

The @xstate/react package contains utilities for using XState with React. Find out more in the @xstate/react package readme.

React 18

The @xstate/react package now accepts React 18 as a peer dependency, and we rewrote the implementation to use the use-sync-external-store package. The package uses a shim to keep compatibility with older versions of React, so there is no need to worry if you haven’t upgraded yet.

Subscribing to stopped interpreters

Subscribing to a stopped interpreter will now always immediately emit the interpreter’s state and call a completion callback.

asEffect and asLayoutEffect removed

We have removed the asEffect and asLayoutEffect action creators. These action creators didn’t fit the React model well and had the potential to cause issues as their existence suggested that they might be easy to use.

If you want to execute actions at those exact times, you can either make a call directly from those effects or send events to the machine from those effects and execute explicit actions in response to said events.

useMachine and useService with @xstate/fsm

We changed the signatures of useMachine and useService integrating with @xstate/fsm to match their signatures with their related hooks integrating with XState. Both now only accept a single generic. useMachine accepts TMachine, and useService accepts TService.

Updates in the @xstate/fsm package

@xstate/fsm is a minimal, 1kb implementation of XState for finite state machines. Find out more in the @xstate/fsm package readme.

.start()

When you call .start() without any argument, it now always starts from the machine’s initial state, matching the behavior of XState itself.

More coming soon!

If you want to know more about what we’ve got planned, you can check out our Roadmap. Got any feedback, or want to suggest features? Share your thoughts in the XState discussions.

We’re also looking for your feedback on specific ideas in our Stately RFCs (Requests for comment).