make-immediate-and-delayed-transitions.md

Make Immediate And Delayed Transitions

An XState state can define an on key with an object. The object can define one or more events that the state listens for and transitions in response to. In addition to transitioning in response to an event, you can have a state do both immediate and delayed transitions.

Here is an example state machine.

export const loadingSpinner = createMachine(
  {
    initial: 'pending',
    context: {},
    states: {
      pending: {
        always: [
          { target: 'loading' }
        ]
      },
      loading: {
        after: {
          5000: { target: 'done' }
        }
      },
      done: {
        final: true
      }
    }
  }
);

This machine will start in the pending state. The always object will immediately fire which will trigger a transition to the loading state. There the after object will schedule a transition to the done state to happen in 5 seconds (5000ms).

The always is the immediate transition. The after is the delayed transition.

The "eventless" always transition, in practice, is more useful when combined with a condition. That allows you to define an immediate transition that only takes place if some condition has already been met (e.g. does the context already contain the thing we were about to look up?).