Transitions and choices in XState

Learn how to use transitions and guards in XState.

• Guards

  A guard is a condition that the machine checks when it goes through an event. If the condition is true, the transition can be taken. If the condition is false, the next potential transition is tested to determine if it can be taken. Any transition can be a guarded transition.

• Guarded actions

  You can use actions and guards together to run actions conditionally on transitions.

• Always

  Sometimes you’ll need to make checks in your statechart’s current state without receiving an event. You can do this with an eventless transition.

• After

  Timeouts and intervals can be hard to manage in application code. Statecharts make it easy and declarative using the after syntax.

• Internal and external transitions

  Transitions in statecharts can be one of two types: internal or external. External transitions are transitions that leave the machine’s current state node; the “source” state node on which the transition is defined.

• Transition descriptions

  You can add descriptions to transitions to illustrate what they do.