context-pattern

What problem does it solve?

This skill provides a reusable, type-safe React Context pattern using useSyncExternalStore to minimize re-renders and simplify consumption via selectors and dispatchers.

Core Features & Use Cases

• Type-safe Context pattern with separate files for Context.tsx, types.ts, useContext.ts, and useSelectors.ts
• useSyncExternalStore-based selectors to subscribe to specific state slices without unnecessary re-renders
• Lightweight, scalable shared state management suitable for large React apps and codebase refactors

Quick Start

Create a new feature context by following the prescribed file structure under context/ and implement the four files: Context.tsx, types.ts, useContext.ts, and useSelectors.ts. Then wrap components with the Provider and use the provided hooks and selectors to access and modify state.