I find this remarkable because it demonstrates a well-structured and type-safe implementation of a finite state machine in React. It provides clear separation of states, events, and transitions, making the logic easy to understand and maintain. The hook not only allows triggering events via a generic transition function but also provides ready-to-use action functions, improving developer ergonomics. Its value is enhanced by being lightweight, with no side libraries or external dependencies, which makes it easy to integrate into any React project without increasing bundle size or complexity. This reduces bugs, improves maintainability, and ensures type safety for complex UI logic.
The implementation uses TypeScript typing as a quality control, ensuring that only valid states and events can be used, preventing many runtime errors. The useMemo hook provides performance-related control by memoizing action functions to avoid unnecessary re-renders. The component is also dependency-free, relying only on React itself, which minimizes potential issues from third-party libraries.
A TypeScript-friendly React hook for implementing finite state machines (FSM) in your React applications. It provides a simple way to define states, events, and transitions while maintaining full type safety.
Hook to manage a finite state machine.
| Name | Type | Description |
|---|---|---|
machine |
Machine<S> |
State machine definition. |
[state, actions, transition]
| Return | Type | Description |
|---|---|---|
state |
S |
Current state of the machine. |
actions |
{ [event]: () => void } |
Functions to trigger events for the current state. |
transition |
(event: string) => void |
Generic function to trigger a transition by event. |
type Config<S extends string> = {
on: Record<string, S>;
};
export type Machine<S extends string> = {
initial: S;
states: Record<S, Config<S>>;
};