Agent skill · software engineering · aiskillstore
react-patterns
Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
Why this skill is useful
Provides specific patterns and best practices for modern React development that the AI wouldn't reliably generate on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
React Patterns Principles for building production-ready React applications. --- 1. Component Design Principles Component Types Type Use State ------ ----- ------- Server Data fetching, static None Client Interactivity useState, effects Presentational UI display Props only Container Logic/state Heavy state Design Rules One responsibility per component Props down, events up Composition over inheritance Prefer small, focused components --- 2. Hook Patterns When to Extract Hooks Pattern Extract When --------- ------------- useLocalStorage Same storage logic needed useDebounce Multiple debounced values useFetch Repeated fetch patterns useForm Complex form state Hook Rules Hooks at top level only Same order every render Custom hooks start with "use" Clean up effects on unmount --- 3. State Management Selection Complexity Solution ------------ ---------- Simple useState, useReducer Shared local Context Server state React Query, SWR Complex global Zustand, Redux Toolkit State Placement Scope Where ------- ------- Single component useState Parent-child Lift state up Subtree Context App-wide Global store --- 4. React 19 Patterns New Hooks Hook Purpose ------ --------- useActionState Form submission state useOptimistic Optimistic UI updates use Read resources in render Compiler Benefits Automatic memoization Less manual useMemo/useCallback Focus on pure components --- 5. Composition Patterns Compound Components Parent provides context Children consume context Flexible slot-based composition Example: Tabs, Accordion, Dropdown Render Props vs Hooks Use Case Prefer ---------- -------- Reusable logic Custom hook Render flexibility Render props Cross-cutting Higher-order component --- 6. Performance Principles When to Optimize Signal Action -------- -------- Slow renders Profile first Large lists Virtualize Expensive calc useMemo Stable callbacks useCallback Optimization Order 1. Check if actually slow 2. Profile with DevTools 3. Identify bottleneck 4. Apply targeted fix --- 7. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/react-patterns