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. 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 |

11. File Structure

<img width="1150" height="1438" alt="image" src="https://github.com/user-attachments/assets/10369698-472c-4695-a494-2c0672103aa1" />

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.