Deep dive into states in XState

Learn all about states in XState.

• Parent and child states

  States can contain more states, also known as child states. These child states are only active when the parent state is active. Child states are nested inside their parent states.

• Other state attributes

  States can have various other attributes, most of which are useful for narrower cases.

• Advanced transitions

  Parent and child states offer more opportunities for various types of transitions. You can transition from any state to any other state. XState has a few different syntaxes to help you out.

• Final states

  When a machine reaches the final state, it can no longer receive any events, and anything running inside it is canceled and cleaned up. A machine can have multiple final states or no final states.

• Parallel states

  A parallel state is a state separated into multiple regions of child states, where each region is active simultaneously.

• History states

  When using statecharts, sometimes you’ll want to relaunch a process in a previous state.

• In-state guards

  You can check if the machine is in a certain state using an in property on a transition. The in property takes a state ID as an argument and returns true if that state node is active in the current state, which can be useful in parallel states.