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

---

Remember: React is about composition. Build small, combine thoughtfully.