XState offers two options for declaring machine definitions:
import { Machine } from 'xstate';
const machine = Machine({ ...config });
…or…
import { createMachine } from 'xstate';
const machine = createMachine({ ...config });
This can be confusing for beginners. Why are there two very similar-looking methods? What’s the difference?
The Difference
In Javascript, there is no difference between the two. You can use them completely interchangeably.
In Typescript, there is only a small difference between them - it’s to do with the ordering of the generics you can pass to the machine. Machine
allows you to pass a generic called 'Typestates' in the middle of the Context
and Event
generics.
import { Machine } from 'xstate';
interface Context {}
type Event = { type: 'EVENT_NAME' };
type States = {};
const machine = Machine<Context, States, Event>({ ...config });
Whereas createMachine
asks you to insert it at the end:
import { createMachine } from 'xstate';
interface Context {}
type Event = { type: 'EVENT_NAME' };
type States = {};
const machine = createMachine<Context, Event, States>({ ...config });
Whichever you choose, there is no functional difference in the created machine. The two functions reference the same code, and create the machine in the same way.
What should I choose?
Going forward, you should use createMachine
. That’s the syntax that will be preferred when v5 releases. But if you're happy with Machine, you can keep using it.