SKILL.md
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
- Check if actually slow
- Profile with DevTools
- Identify bottleneck
- Apply targeted fix
7. Error Handling
Error Boundary Usage
Scope
Placement
App-wide
Root level
Feature
Route/feature level
Component
Around risky component
Error Recovery
- Show fallback UI
- Log error
- Offer retry option
- Preserve user data
8. TypeScript Patterns
Props Typing
Pattern
Use
Interface
Component props
Type
Unions, complex
Generic
Reusable components
Common Types
Need
Type
Children
ReactNode
Event handler
MouseEventHandler
Ref
RefObject
9. Testing Principles
Level
Focus
Unit
Pure functions, hooks
Integration
Component behavior
E2E
User flows
Test Priorities
- User-visible behavior
- Edge cases
- Error states
- Accessibility
10. Anti-Patterns
❌ Don't
✅ Do
Prop drilling deep
Use context
Giant components
Split smaller
useEffect for everything
Server components
Premature optimization
Profile first
Index as key
Stable unique ID
11. File Structure
Use this image as a reference for a better file structure of the project
Remember: React is about composition. Build small, combine thoughtfully.
When to Use
This skill is applicable to execute the workflow or actions described in the overview.
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.