Skip to content
ExperimentsArchived on December 1, 2022

xstate-react-calculator

An iPhone-style calculator built with React and XState — an experiment in modeling UIs with finite state machines.

Created Last commit
  • react
  • xstate
  • state-machines
  • experiment

xstate-react-calculator

xstate-react-calculator is an iPhone-style calculator built with React and XState. The point wasn't the calculator — it was using the exercise to feel out what it's like to model a whole UI as a finite state machine instead of with scattered booleans and useReducer.

It's exactly the kind of project XState handles better than useState: there are illegal states (you can't apply two operators in a row without a number between them), history-dependent transitions, and enough control logic that the naive flag-and-conditional version goes unreadable fast.

Archived in 2022 — it was a one-shot experiment, not something I'm maintaining. Stays up as a reference I can re-read whenever I need to remember how to draft a statechart from scratch.

For more, see the README on GitHub.