Pattern Browser
Quick reference guide to all patterns. Framework-level patterns link to the full framework; implementation patterns have dedicated pages with the full 7-part template (problem → naive → improvement → production → when to use → gotchas).
Implementation Patterns
Deep-dive pages: problem, naive approach, first improvement, remaining issues, production pattern, when I use this, gotchas.
Optimistic Updates
Use when: Instant feedback for likes, follows, toggles
Data & StateInfinite Scroll
Use when: Feeds, timelines, long lists
Data & StateDebouncing & Throttling
Use when: Search, scroll, resize, high-frequency events
Data & StateForm Validation (Client + Server)
Use when: Signup, checkout, any form with rules
FormsLoading States
Use when: Skeletons, spinners, pending vs refetch
UIError Boundaries
Use when: Catch render errors, show fallback, retry
UICache Invalidation
Use when: After mutations, keep cache in sync
Data & StatePolling vs WebSockets
Use when: When to poll, when to push, hybrid
Data & StateMulti-Step Forms
Use when: Checkout, onboarding, long wizards
FormsVirtualized Lists
Use when: Long lists, feeds, tables (500+ rows)
UIStale-While-Revalidate
Use when: Show cached data, refresh in background
Data & StateAutosave / Draft
Use when: Editors, long forms, prevent lost work
FormsDependent Fields
Use when: Country → city, product → variant, conditional options
FormsToasts
Use when: Success/error feedback, non-blocking notifications
UIModal Management
Use when: Dialogs, focus trap, escape, stacking
UICompound Components
Use when: Card.Header, Tabs + panels, flexible structure
ComponentsRender Props vs Hooks
Use when: Reuse behavior, inject state into UI
ComponentsControlled vs Uncontrolled
Use when: Forms, inputs, value vs ref
ComponentsHOCs vs Composition
Use when: Auth guards, wrappers, inject logic
ComponentsCode Splitting & Lazy Loading
Use when: Smaller bundles, load on demand
PerformanceMemoization (useMemo, React.memo)
Use when: Expensive derivations, skip re-renders
PerformanceState Management
Local State
useState()Lifted State
useState() in parentURL State
useSearchParams()Server State
useQuery()Global Client State
Zustand/ReduxComponent Composition
Props
<Child value={x} />Render Props
<DataProvider render={(data) => ...} />Compound Components
<Select><Option />...</Select>Headless Pattern
useSelect() hook + your markupData Fetching
Basic Fetch
useEffect + fetchReact Query
useQuery()Optimistic Updates
useMutation with onMutateWebSocket Sync
useWebSocket()Rendering Strategy
CSR (SPA)
Pure React appSSR
getServerSidePropsSSG
getStaticPropsISR
revalidate: 60Quick Decision Trees
State: Where should this data live?
Components: How should they communicate?
Common Anti-Patterns
❌ Context for High-Frequency
Using Context for data that updates on every keystroke causes entire tree to re-render.
Fix: Use Zustand with selectors or keep state local
❌ Manual API State
Managing loading/error/data state manually with useEffect.
Fix: Use React Query for all API data
❌ Premature Global State
Adding Redux/Zustand before feeling pain of prop drilling.
Fix: Start local, lift when it actually hurts
❌ URL for UI Chrome
Putting sidebar/modal state in URL when it's not shareable.
Fix: Use local state or localStorage for UI preferences