Skip to content
Version: XState v5

Eventless (always) transitions

Eventless transitions are transitions that happen without an explicit event. These transitions are always taken when the transition is enabled.

Eventless transitions are labeled “always” and often referred to as “always” transitions.

{
  states: {
    form: {
      initial: 'valid',
      states: {
        valid: {},
        invalid: {}
      },
      always: {
        guard: 'isValid',
        target: 'valid',
      }
    }
  }
}

↓Jump to learning more about eventless transitions in XState↓

Using eventless transitions in Stately Studio​

Make an event into an eventless transition​

First, select the event you want to replace with an eventless transition. Then…

Using the quick actions menu​

  1. Right-click the state to bring up the quick actions menu.
  2. Choose Always from the Event type options.

Using the Transition details panel​

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

Eventless transitions and guards​

Eventless transitions are taken immediately after normal transitions are taken. They are only taken if enabled, for example, if their guards are true. This makes eventless transitions helpful in doing things when some condition is true.

Avoid infinite loops​

Eventless transitions with no target nor guard will cause an infinite loop. Transitions using guard and actions may run into an infinite loop if its guard keeps returning true.

You should define eventless transitions either with:

  • target
  • guard + target
  • guard + actions
  • guard + target + actions

If target is declared, the value should differ from the current state node.

Coming soon… example { always: { ... } }

When to use​

Eventless transitions can be helpful when a state change is necessary, but there is no specific trigger for that change.

Coming soon… examples

TypeScript​

Coming soon

Cheatsheet​

Coming soon