How To Handle Actor Output onDone Events in XState v5+ with React

I love that state machines make React a dream programming tool for managing frontend app lifecycle in a deterministic way. But, while XState’s actor model is a perfect fit with its state machine architecture, actor “output” events (onDone) are confusing AF.

Point Normal for Unsplash+. Digital render (not AI-generated); used with permission (Unsplash+ license).

I love XState (especially XState v5 with TypeScript) for building my apps, because otherwise React feels like a pile of useEffect race conditions.

Sure, the UI is guaranteed to update, but side effects across multiple components’ lifecycles do not run in a guaranteed order.

That can result in all sorts of weird bugs, from showing empty data to logged-out users or admin routes to logged-out users all the way to memory leaks and fully crashing your production app. Fun stuff!

XState is way more complicated than simply jerry-rigging a few thousand lines of complex application logic in useEffect, I admit that.

But using XState guarantees that your app is in a given state, not just React’s promise that your app’s components will react to changes in state.