130: David Khourshid - Building Better UI Components with State Machines

What It Covers

David Khourshid explains how finite state machines eliminate impossible UI states by using labeled states instead of boolean flags, preventing bugs like simultaneous loading spinners and displayed data through deterministic state transitions.

Key Questions Answered

• •State representation: Replace boolean variables like isLoading with single status strings (idle, loading, success) to prevent impossible state combinations. Multiple booleans create 2^n possible states when only 5-7 are valid, causing bugs like Reddit showing "no results" while displaying results.
• •Event-driven architecture: Event handlers should only send events (like formSubmitted), not execute logic directly. The state machine determines valid transitions based on current state first, then event type, automatically ignoring invalid actions without if-statement guards protecting edge cases.
• •Transition structure: Implement state machines using nested switch statements that check current state first, then event type second. This inverts typical logic where actions check state, instead making states determine which actions are allowed, eliminating manual edge case handling.
• •Naming conventions: Name events in past tense describing what occurred (usernameChanged, dogRequested) rather than imperative commands (updateUsername, fetchData). This acknowledges events may not succeed and separates user intent from actual state changes, preventing misleading action names when operations fail.