react-patterns
Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
61
Quality
48%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Securityby
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./.agent/skills/react-patterns/SKILL.mdReact 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<Element> |
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 |
Remember: React is about composition. Build small, combine thoughtfully.
- Repository
- lchenrique/politron-ide
- Commit
7114206
- Last updated
- Created
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.