react-syntax-context
Installation
SKILL.md
react-syntax-context
Quick Reference
Context API Surface
| API | Purpose | Version |
|---|---|---|
createContext<T>(defaultValue) |
Create a context object with TypeScript generic | React 18+ |
useContext(Context) |
Consume the nearest Provider value | React 18+ |
use(Context) |
Consume context inside conditionals/loops | React 19 only |
<Context.Provider value={...}> |
Provide value to descendants | React 18 |
<Context value={...}> |
Provide value to descendants (no .Provider) |
React 19 |
Critical Warnings
NEVER create a new object literal directly in the Provider value prop without useMemo -- this creates a new reference every render and forces ALL consumers to re-render.
NEVER use Context for frequently changing values (e.g., mouse position, scroll offset, animation frames) -- use useSyncExternalStore or an external state library instead.
Related skills