Skip to content
Version: XState v4

Entry & exit actions

While the statechart is running, it can execute other effects called actions.

An action can be fired upon entry or exit of a state. Actions are “fire-and-forget effects”; once the machine has fired the action, it moves on and forgets the action. You can also fire actions on transitions.

You can fire multiple entry and exit actions on a state. Top-level final states cannot have exit actions, since the machine is stopped and no further transitions can occur.

Video player state machine containing closed and opened states. On the Play event, the Closed state transitions to the Opened state. The Playing state has an entry action for starting a video playing indicated by the ‘Entry’ label and the text playVideo, and an exit action for pausing a video indicated by the ‘Exit’ lable and the text pauseVideo. The Opened state contains Playing and Paused states, which are transitioned between using the Pause and Play events. There’s a Stop event from the Opened state that transitions to the final state of Stopped. There’s an onDone event from the parent Opened state back to the Closed state.Video player state machine containing closed and opened states. On the Play event, the Closed state transitions to the Opened state. The Playing state has an entry action for starting a video playing indicated by the ‘Entry’ label and the text playVideo, and an exit action for pausing a video indicated by the ‘Exit’ lable and the text pauseVideo. The Opened state contains Playing and Paused states, which are transitioned between using the Pause and Play events. There’s a Stop event from the Opened state that transitions to the final state of Stopped. There’s an onDone event from the parent Opened state back to the Closed state.

View this machine in the Stately Studio.

In our video player, we have entry and exit actions on the Playing state. We use the entry action of playVideo to fire an effect playing the video on entry to the Playing state. We use the exit action of pauseVideo to fire an effect pausing the video when the Playing state is exited.

Add an entry action to a state​

  1. Select the state you want to have an entry action.
  2. Open the State details panel from the right tool menu.
  3. Use the + plus icon alongside the Entry actions to add a new action.
  4. Use the Custom tab under Entry actions to input the type for the entry action.
  5. Use the Assign tab under Entry actions to assign key and assignment pairs to the entry action.
  6. Save the entry action using the Save button.

Add an exit action to a state​

  1. Select the state you want to have an exit action.
  2. Open the State details panel from the right tool menu.
  3. Use the + plus icon alongside the Exit actions to add a new action.
  4. Use the Custom tab under Exit actions to input the type for the exit action.
  5. Use the Assign tab under Exit actions to assign key and assignment pairs to the exit action.
  6. Save the entry action using the Save button.