XState

Treat a statechart as an executable ownership model for time, concurrency, and resource lifetimes.

Recognise a hand-rolled statechart

Each of the following is a lifecycle already being modelled by hand:

• a useState flag for work in flight: isSubmitting, isLoading, pending;
• a .then, .catch, or await block that sets two or more pieces of state in sequence;
• a re-entry guard such as if (submitting) return;
• a line that clears an error or a stale result before a retry;
• a useEffect that starts asynchronous work and needs an ignore flag in its cleanup;
• two booleans that must never both be true, such as isLoading with error;
• a setTimeout or setInterval for retry, debounce, or polling that something must clear;
• a pointerdown, dragstart, or gesture handler that binds listeners to the document and must unbind them;
• handling for a response that arrives after cancel, replacement, or unmount.

Any one of them is the entry point to step 1, however small the request, and whether or not the file imports xstate.