Writing about XState
- Published on
#5 Unit test a state machine
Unit test state machines by leveraging their deterministic nature. Complete the coverage with integration and e2e testing.
- Published on
#4 Invoke and spawn utility machines
Rely on XState’s Actor model to manage concurrency by invoking or spawning actors. Invoke for guaranteed actors and spawn for dynamic ones like worker pools. Actors communicate through events, ensuring modular and scalable systems.
- Published on
#3 Type XState with the Typegen
Use XState's Typegen to automatically generate strong types for your machines by enabling it in your code, naming actions, delays, guards, and services for better TypeScript integration. Rely on Stately's VS Code extension or XState CLI for development and production builds.
- Published on
#2 Model a task queue with XState
Implement a task queue in XState by processing tasks individually, queuing new tasks while busy, automatically triggering the next task with eventless transitions, and simplifying the design by globally handling task addition across all states.
- Published on
#1 The journey to learning XState
Learn XState efficiently by exploring its documentation, taking courses, studying examples, and practicing with real projects to enhance your understanding and coding skills.
- Published on
#0 The State of XState Report
My report is now public! Read it online now.
- Published on
Create a proxy state machine to drive CSS transitions on state changes with XState
In order to add some behaviors to a state machine, we can change it, or we can add another machine in front of it to delegate some responsibilities. In this article I present the machine we added in front of our main machine to manage the load button of our Turing machine visualizer.
- Published on
Create stale data indicator with XState
The are few things as boring as not knowing the state of an application. Is this document saved or should I Ctrl+S? In this article I present the stale data indicator we display on our Turing machine visualizer when visualizer is not in sync with inputs.
- Published on
Prevent flickering loading animation with XState
Loading indicators tell users that something is happening and will complete soon. They exist to improve UX, but they can worsen UX if they are directly hidden after underlying HTTP requests resolve. In this article I share XState patterns I used to prevent this issue in our Turing machine visualizer.
- Published on
Orchestrate request for server-side execution of Turing machine with XState
We built a Turing machine visualizer but it does not execute machines itself—it's the job of an Erlang server. The visualizer needs to make a request to execute machines, and XState is the perfect tool to orchestrate this in combination with other behaviors of the visualizer.
- Published on
Control tape of Turing machine visualizer with XState
The execution of a Turing machine with an input produces a list of operations on a tape, that are made to be visualized. I built such a visualizer with XState, and used cool patterns to visualize operations on the tape.
- Published on
Handle logic at the right place in React
Deciding where to put logic code in React applications is crucial to keep a codebase clean and maintainable, and even functional. Rethinking the place of the logic to go from top to bottom can help a lot, and it's the main purpose of XState.
- Published on
Recreate Testing Library waitFor function with XState
Testing Library brings a formidable waitFor function to your tests to wait for a condition to be met before a timeout is reached. But sometimes we need such a function outside of client-side tests.
- Published on
Interpret SCXML state machines with XState
SCXML is an universal format to describe state machines. XState can be used to interpret them in JavaScript.
- Published on
External transition to child state
All transitions are external by default with XState, except transitions with a relative target, that are internal. It can lead to bugs when not understood properly.
- Published on
Parallel states and events with XState
Parallel states are an advanced feature of statecharts that allows to run a set of child states concurrently. We can even synchronize them easily by using normal XState events.