react-patterns

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

Ho