Skip to content
— 2 minute read

What’s the difference between Machine and createMachine?

Matt Pocock

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.

Tags: