Define Event That Does Internal Self Transition

An XState state can contain a state transition in the on object that represents a self transition. A self transition means that the state points to itself. In response to that event, it will transition directly to itself, instead of to another state node.

An internal self transition is one in which the transition occurs, but it never exits its state node. That means entry and exit actions won't be triggered.

The parent state node can transition directly to itself or to a child node. Here are a couple ways to define internal self transitions directly to the parent node.

  1. Implicit

states: {
  counting: {
    on: {
      INCREMENT: {
        actions: ['incrementCount'],
      },
    },
  },
},

No target is declared for INCREMENT, so an internal, self-transition is implicit.

  1. Explicit

states: {
  counting: {
    on: {
      INCREMENT: {
        internal: true,
        actions: ['incrementCount'],
      },
    },
  },
},

This says that the transition should be an internal one.

  1. Undefined Target

states: {
  counting: {
    on: {
      INCREMENT: {
        target: undefined,
        actions: ['incrementCount'],
      },
    },
  },
},

An undefined target is an internal, self-transition.

source

Last updated