Name: React Patterns
Author: sickn33

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

Pattern	Extract When
useLocalStorage	Same storage logic needed
useDebounce	Multiple debounced values
useFetch	Repeated fetch patterns
useForm	Complex form state

Complexity	Solution
Simple	useState, useReducer
Shared local	Context
Server state	React Query, SWR
Complex global	Zustand, Redux Toolkit

Scope	Where
Single component	useState
Parent-child	Lift state up
Subtree	Context
App-wide	Global store

Hook	Purpose
useActionState	Form submission state
useOptimistic	Optimistic UI updates
use	Read resources in render

Use Case	Prefer
Reusable logic	Custom hook
Render flexibility	Render props
Cross-cutting	Higher-order component

React Patterns

1. Component Design Principles

Component Types

Design Rules

React Patterns

1. Component Design Principles

Component Types

Design Rules

2. Hook Patterns

When to Extract Hooks

Hook Rules

3. State Management Selection

State Placement

4. React 19 Patterns

New Hooks

Compiler Benefits

5. Composition Patterns

Compound Components

Render Props vs Hooks

6. Performance Principles

When to Optimize

Optimization Order

7. Error Handling

Error Boundary Usage

Error Recovery

8. TypeScript Patterns

Props Typing

Common Types

9. Testing Principles

Test Priorities

10. Anti-Patterns

When to Use

Limitations

Extract Errors

Frontend Patterns

Coding Standards

Coding Standards

Coding Standards

Frontend Patterns

Signal	Action
Slow renders	Profile first
Large lists	Virtualize
Expensive calc	useMemo
Stable callbacks	useCallback

Scope	Placement
App-wide	Root level
Feature	Route/feature level
Component	Around risky component

Pattern	Use
Interface	Component props
Type	Unions, complex
Generic	Reusable components

Need	Type
Children	ReactNode
Event handler	MouseEventHandler
Ref	RefObject<Element>

Level	Focus
Unit	Pure functions, hooks
Integration	Component behavior
E2E	User flows

❌ 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