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

Additonal Resources

Thank you.

Actor Model

By Farzad Yousefzadeh

Actor Model

A new mental model for modeling React applications at scale @React Finland 2021

  • 856