Check out a free preview of the full State Machines in JavaScript with XState course:
The "Spawning vs Invoking Actors" Lesson is part of the full, State Machines in JavaScript with XState course featured in this preview video. Here's what you'd learn in this lesson:

David explains that spawning is creating a finite number of new actors that are available for an infinite amount of time until the machine is stopped, and invoking requires a single actor or a small amount of actors and is linked to a specific state and therefore has a specific life cycle.

Get Unlimited Access Now

Transcript from the "Spawning vs Invoking Actors" Lesson

[00:00:00]
>> I'll be making all of the code sandboxes that I demonstrated and more available in the repository, the Frontend Masters XState Workshop repository, and they're going to be made available in the XState documentation. If you go to examples, you're going to see a lot of examples such as to do MVC with both react and view.

[00:00:21] As well as a calculator, and if you've ever tried to program a calculator like the classic ones where you have buttons that you push, you're going to realize that it's a lot harder than it seems because you have to handle edge cases such as what if they press the plus sign before they press any numbers?

[00:00:38] What if they press minus twice? What if they divide by zero? What if they do things out of order? What if they do five plus clear? What is the behavior there? And so that's why modeling a calculator as a state chart is a really useful technique to really organize your states and prevents those impossible states and transitions and edge cases from happening.

[00:01:01] So there's also a variety of tutorials here. This Reddit API tutorial is taken from the Redux docs, except it's implemented with actors instead of how Redux does it where it just keeps it in the same object and doing that makes it a lot more performant because now every single state update that happens in one of those actors doesn't directly affect the parents unless that child actor directly sends an event over to the parents.

[00:01:32] So, just to quickly go over that, there's a section here called Using Actors. And so the way that this works is we're going to spawn an actor for each one of these subreddits such as react, view, and frontend. And so what each of these does is each of these actors has its own responsibility of loading that subreddit data.

[00:01:56] And then once it gets that data, it sends a message right back to the reddit parents machine that says, hey, I have the data, here you go. And so, instead of using invoke, this uses spawn to do that. So you could consider spawn to be very similar to invoke.

[00:02:15] With spawn, you give it the source that you want and you assign that directly in context. So you're using a sign like normal, but instead of it being just a normal object or an array, now this is a live actor that you could talk to. And so the only difference between spawn and invoke is that invoked actors are immediately stopped whenever you exit the states and spawned actors, since they could be spawned at any time due to some events happening, they are alive for an indefinite period of time until the machine is stopped.

[00:02:58] So if the parent machine is stopped, it's going to stop all those actors inside as well, so it doesn't have as well a defined life cycle as invoke. And so that's why I say, always prefer invoke over spawn. Spawn is more for a dynamic number of actors that you might want to spawn, and invoke is for you want a single actor or a set number of actors that are active only within a specific state.