The Actor Model:
a new mental model
for React
Farzad Yousefzadeh

Farzad Yousefzadeh
Senior Frontend Engineer @epicgames
Into State machines and Statecharts



What is Actor Model?

interface Actor {
state: State;
send(event): void;
receive(event): void;
}
What is Actor Model?


Integrations are key
- Bugs in units are easy
- Bugs in integrations are hard

Actor Model vs Redux


Identifying Actors in the system


- Retrieve source with id
- Prefill the editor with the retrieved source
- Update the source when save is pressed
- Parse the source
- Preview the parsed source
- Sign in
- Sign out
- Toast for errors
Source actor
Editor actor
Preview actor
Auth actor
Notification actor
Retriece source with ID
Update the source when save button is pressed
Prefill the editor with the retrieved source
Parse the markdown source
Preview the parsed markdown
Sign in
Sign out
Toast fancy messages
- Retrieve source with id
- Prefill the editor with the retrieved source
- Update the source when save is pressed
- Parse the source
- Preview the parsed source
- Sign in
- Sign out
- Toast for errors
Auth actor
Source actor
Editor actor
Preview actor
Notification actor
Sequence Diagrams and Scenarios

Reading ID and Source

Saving source

Edit markdown

Check user session and user info

Compiling and previewing
Actor Model and Feature growth

Only spawn needed actors


Complexity comparison and dynamically spawning actors
Anything can be an actor
if it can send an event, receive an event, have a private state, then it's a duck Actor
Advantages of Actor Model
- Simple
- Observability
- No race condition
- Scalable solution
- Works well with web APIs
- Actors are composable
- Easier to diagnose
- Isolated logic outside of React tree
