react-sse-patterns

What problem does it solve?

Building real-time React apps with Server-Sent Events often leads to flaky reconnections, stale UI after drops, and tangled state management. This Skill provides a proven external-store architecture with reconnection, snapshot rehydration, and typed event handling so your UI stays consistent and responsive.

Core Features & Use Cases

• External SSE Store with useSyncExternalStore: Maintain a singleton EventSource with subscribe/getSnapshot for React-safe updates.
• Connection Resilience: Exponential backoff, unbounded retries, and a clear connection status for user feedback.
• Fresh Data on Reconnect: Snapshot-first rehydration ensures state is current before incremental events resume.
• Typed Event Parsing: Strongly-typed event payloads across workspace, session, messages, todos, logs, changes, events, and compose.
• Domain Hooks Pattern: Combine initial fetch with live SSE updates (e.g., useWorkspaces, useSession) using Suspense + external store.
• Use Case: Keep a dashboard updated with build logs and task status where transient network issues are common; users see a non-intrusive reconnect banner and the data rehydrates instantly after recovery.

Quick Start

Ask to scaffold an SSE external store with useSyncExternalStore, exponential backoff reconnects, a snapshot-first handler, a connection banner, and example domain hooks that prefer live SSE data over initial fetch.