State Machines & Impossible States
Many UI bugs come from combinations of booleans that should never coexist. For example, isLoading, isSuccess, and hasError can accidentally represent contradictory states.
Instead, model mutually exclusive states explicitly: idle, loading, success, and error. This reduces the number of invalid combinations and makes rendering exhaustive.
You do not need a state-machine library to benefit from state-machine thinking. TypeScript unions, reducers, and explicit transition functions are often enough.
Model reality
If two booleans cannot logically be true together, consider replacing them with one discriminated state.
Key Takeaways
- Explicit states prevent contradictory UI flags.
- Reducers and discriminated unions are practical state-machine tools.
- State models should make invalid states difficult to represent.