A state machine with a transition table and useReducer
RETRY while loading and RESOLVE after a failure are not in the table, so the state doesn't change (React still called Loader once for the ignored RETRY before seeing the state was the same, which is allowed). Greyed buttons show which events the current state accepts.
Besides one big store, state can be split into tiny independent atoms (Jotai, Recoil), tracked automatically with signals or observables (Preact Signals, MobX), or modelled as a state machine (XState); each model trades React's simple re-render rule for a different kind of precision.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Using the hand-made atom from the live example, add a discountAtom (0 to 1) and make totalAtom apply it. Which components re-render when the discount changes?
Write a transition table for a traffic light (green → yellow → red → green on TIMER, and any state → flashing on FAULT, flashing → red on RESET) and a reducer that uses it.
Explain it without notes
How does an atom-based library like Jotai differ from a single-store library like Zustand or Redux?
What are signals, and why doesn't React use them for state?
How does MobX decide which components to re-render?
What problem do state machines solve in UI code, and when would you reach for XState?
Preview
Console
Nothing logged yet.Expected console output
state: idle
send FETCH
state: loading
send RETRY
state: loading
send REJECT
state: failure
send RESOLVE
state: failure
send RETRY
state: loading
send RESOLVE
state: success