react-state-driven-ui_skill

Overview

This skill teaches building React UIs as a pure projection of explicit state transitions using a reducer + events approach. It removes timing-dependent bugs and makes multi-step workflows, async flows, and cross-component state predictable, testable, and maintainable. The pattern isolates side effects and keeps components render-only and intent-only.

How this skill works

You model all UI behavior as an explicit state machine: define the state shape, the user and system events, and a pure reducer that maps events to next states. Side effects (API calls, retries, optimistic updates) are defined separately and wired to emit outcome events via React Query mutation callbacks. Components only render state and emit intent events.

When to use it

• Multi-step forms, wizards, or confirmation flows with distinct phases
• Async operations with loading, retries, optimistic updates, or server validation
• Cross-component or cross-route state that must stay consistent
• Navigation-sensitive features (deep links, back/forward, unsaved-change warnings)
• Real-time updates where incoming messages change UI state
• Complex validation spanning field-, form-, and server-side rules

Best practices

• Always start by defining the complete state model and ownership boundaries
• Model all user intents and system outcomes as explicit events before coding components
• Implement transitions as a pure reducer; keep side effects out of it
• Bind side effects to events via React Query mutation callbacks that emit outcome events
• Derive computed values with selectors; keep components purely projection + intent
• Avoid boolean-soup: represent phases explicitly instead of scattered flags

Example use cases

• A multi-step checkout flow with validation, save points, and retryable network steps
• A collaborative document editor where edits, saves, and socket updates coordinate UI state
• A form that needs server-side validation, optimistic submit, and graceful error recovery
• A settings page that syncs with URL state and warns on unsaved changes when navigating
• An upload flow with queued uploads, progress, and per-item retry logic