Inline vs. named Options

In the examples so far, we’ve passed options into the config using names:

const machine = createMachine({
  entry: ['sayHello'],
});

These are called named actions. You can do the same with named guards, actors and delays, and we’ll get to those later.

However, if you don’t want to name your actions, you can also declare them inline:

const machine = createMachine({
  entry: [
    () => {
      console.log('Hello!');
    },
  ],
});

The difference between named and inline options is mostly stylistic. We support both approaches, and you can mix-and-match named and inline options within the same machine:

const machine = createMachine(
  {
    entry: [
      // Inline
      () => {
        console.log('Hello!');
      },
    ],
    exit: [
      // Named
      'sayGoodbye',
    ],
  },
  {
    actions: {
      sayGoodbye: () => {
        console.log('sayGoodbye');
      },
    },
  }
);

Named options are preferred when using typegen and also show up better when visualized with our VS Code extension. Named options show their name, whereas inline options show an “Inline” label.

When not using typegen, inline options can often give you better type inference than named options.