Simple States And Composite States

XState allows you to build hierarchical state machines. A hierarchical state machine is one where there are substates nested under states.

States with nothing nested under them are simple states. States that have substates are composite states.

const machine = createMachine({
  // Starting State
  initial: "active",
  // Starting Context
  context: { count: 0 },
  // States
  states: {
    inactive: {
      always: { target: "active" },
    },
    active: {
      on: {
        SWITCH_COUNT_DIRECTION: {
          actions: ["logSwitch", "consoleLogSwitch"],
        },
        COUNT: {
          actions: "changeCount",
        },
      },
      initial: "increment",
      states: {
        increment: {
          on: {
            SWITCH_COUNT_DIRECTION: "decrement",
          },
        },
        decrement: {
          on: {
            SWITCH_COUNT_DIRECTION: "increment",
          },
        },
      },
    },
  },
});

• The inactive state is a simple state. There is nothing nested under it.

• The active state is a composite state. There are two substates (increment and decrement) nested under it.

• The increment and decrement states are both simple states. Nothing is nested under them.