react-patterns

React patterns, senior

You can already build with React — now learn the patterns seniors reach for: composition, state architecture, the server/client boundary, Suspense, and the anti-patterns to refactor away, so components stay simple as they scale.

16 units·46 lessons·~14 h

Start track →

Start here

A React pattern is a named, reusable solution to a recurring component-design problem, all descending from UI = f(state). This track assumes React fundamentals and teaches the patterns — with their failure modes — that keep components simple as an app scales.

01 What is a React pattern? 16 min

Composition

Components combine by composition, not inheritance: children and slots invert control so the parent supplies content and the component supplies structure. Prop drilling is fine for a few levels — reach for more only when it actually hurts.

01 Children and slots 18 min 02 Composition over inheritance 18 min 03 Prop drilling, and when it's fine 18 min

Compound components

Compound components share implicit state via a private context, giving consumers layout freedom while the parent owns behavior. Support both controlled and uncontrolled modes, and reserve the pattern for reusable widgets, not fixed one-offs.

01 The compound component pattern 18 min 02 Sharing state with component context 19 min 03 Controlled vs uncontrolled 19 min

Render props & headless

Render props and headless components separate behavior from presentation; the custom hook is their modern successor for logic reuse — you get state, handlers, and accessibility, and supply your own markup.

01 Render props 18 min 02 Headless components 19 min 03 Hooks as the headless pattern 19 min

Custom hooks

A custom hook names and isolates a slice of stateful logic for reuse and testing — extract on real duplication or a clear concept, design its deps and cleanup as a contract, and don't extract a single-caller wrapper.

01 Extracting a custom hook 18 min 02 Hook design and dependencies 19 min 03 When not to extract a hook 18 min

State colocation & lifting

Put state as low as it can go and lift only when truly shared; derive what you can instead of storing it; and keep shareable, navigational state in the URL.

01 Colocation and lifting 18 min 02 Derive, don't store 18 min 03 URL as state 18 min

Context, done right

Context fits low-frequency, widely-read state; split fat contexts and separate state from dispatch to shrink the re-render blast radius; pair it with a reducer for cross-cutting state with real transitions.

01 Context for low-frequency state 18 min 02 Splitting contexts 18 min 03 Context with a reducer 20 min

External state & stores

Reach for an external store only when lifting and context stop scaling; use selectors to subscribe to just the slice you need (and avoid tearing), and useSyncExternalStore to bridge any external source safely.

01 When to reach for a store 19 min 02 Selectors and tearing 18 min 03 useSyncExternalStore 19 min

Effects, disciplined

useEffect is for synchronizing with external systems, not reacting to state; most effects can be deleted (derive instead), and every one that stays must clean up and avoid stale closures.

01 Effects are for synchronization 19 min 02 You might not need an effect 19 min 03 Cleanup and stale closures 19 min

Render performance

Don't memoize by default — profile first; memo, useMemo, and useCallback only help as a system, and stable, unique keys prevent both wasted renders and state-corruption bugs.

01 When to memoize 18 min 02 memo, useMemo, useCallback 19 min 03 Keys and lists 18 min

Server/client boundary

Server Components are the default; push 'use client' to the interactive leaves, pass only serializable props across the boundary, and keep data access and secrets server-only.

01 Server vs client components 18 min 02 'use client' and serializable props 19 min 03 server-only and data flowing down 19 min

Suspense & boundaries

Place Suspense close to where data is needed and pair every boundary with an error boundary; use transitions and deferred values to keep the UI responsive under heavy updates.

01 Suspense placement 18 min 02 Error boundaries 19 min 03 Transitions and deferred values 19 min

Forms & actions

Default to uncontrolled inputs with FormData and control only when the value drives the UI; React 19 form actions plus useActionState handle pending and errors, and useOptimistic makes mutations feel instant.

01 Controlled vs uncontrolled forms 18 min 02 Form actions and useActionState 19 min 03 Optimistic UI with useOptimistic 18 min

Data-fetching patterns

Fetch on the server (RSC) for initial data and reach for a query library when you need client cache, dedupe, and mutations; never copy server state into client state, and load independent data in parallel.

01 RSC fetch vs client cache 19 min 02 Query libraries and dedupe 19 min 03 Avoiding request waterfalls 19 min

React anti-patterns

God components, prop drilling, effects that mirror derived state, context misuse, and index keys are the React anti-patterns — fix each with the matching pattern, without over-correcting into a global store or random keys.

01 God components & prop drilling 19 min 02 Effect-as-derived-state 19 min 03 Context misuse & key-as-index 19 min

Capstone: refactor a React feature

Bring it together on a messy React feature: inventory the pattern-smells, refactor incrementally applying composition, hooks, state, and boundaries, and measure that re-renders dropped and the next change got local.

01 Capstone I: the pattern-smell inventory 20 min 02 Capstone II: the incremental refactor 21 min 03 Capstone III: measure before and after 20 min

Next track

Git, from zero to senior

Start having never run `git init`. Finish able to branch, rebase, recover lost work, rewrite history — including changing a commit's author — and run the branching workflow a real team ships on.