Finite state modeling

Summary

Model UI as explicit states and events (idle, loading, success, error) — avoid boolean soup (isLoading && !isError && ...). XState/state machines prevent impossible states. Forms, wizards, and modals benefit most. Illegal transitions indicate design bugs early.

Code example

const fetchMachine = {
  idle: { FETCH: 'loading' },
  loading: { SUCCESS: 'success', ERROR: 'error' },
  success: { FETCH: 'loading' },
  error: { FETCH: 'loading', RETRY: 'loading' },
};

function transition(state, event) {
  return fetchMachine[state]?.[event] ?? state;
}

Key points

• Model UI as explicit states and events (idle, loading, success, error) — avoid boolean soup (isLoading && !isError && ...).
• XState/state machines prevent impossible states.
• Forms, wizards, and modals benefit most.
• Illegal transitions indicate design bugs early.

Further reading

• State machines
• Choosing state structure

Related concepts

• Race conditions in UI state
• Event sourcing in frontend