Skip to content
Version: XState v5

State done events

A state done event transitions from a parent state when one of its child states reaches its final state. State done events are labeled “onDone.”

State done events are useful when you want to:

  • Model sequential flows where one process must complete before moving to the next
  • Coordinate between parent and child states in a hierarchical state machine
  • Handle cleanup or transition logic after a subprocess completes
  • Automatically transition to a new state when all child states are complete

For example, in a coffee machine, you might use an onDone event to transition from the "preparation" state to "brewing" only after all preparation steps (grinding beans, heating water, etc.) are complete. This ensures proper sequencing of operations.

State done events also help maintain separation of concerns by allowing child states to focus on their specific tasks while the parent state handles the overall flow coordination.

In the video player above, when the video player reaches the Stopped state, the Opened state transitions through the onDone state done event to the Closed state.

How to add a state done event to a parent state​

  1. Check the final child state has its state type set to Final. If the parent state doesn’t contain a final child state, the state done event type will not be available for transitions from the parent state.
  2. Select the parent state.
  3. Drag from the handles on the left, right and bottom sides of the selected state, and release to create a connecting transition, event and new state.
  4. Select the newly-created event. Then…

Using the quick actions menu​

  1. Right-click the state to open the quick actions menu.
  2. Choose State done event from the Event type options.

Using the Transition details panel​

  1. Open the Transition details panel from the right tool menu.
  2. Choose State done event from the Event type dropdown menu.