lesson

React Patterns & Performance

Hooks, state management, memoisation, and rendering optimisation.

React Patterns & Performance

Essential Hooks

Hook	Purpose
`useState`	Local component state
`useEffect`	Side effects (API calls, subscriptions)
`useRef`	Mutable reference that doesn't trigger re-render
`useMemo`	Cache expensive computation results
`useCallback`	Cache function references (for child prop stability)
`useReducer`	Complex state logic (like a mini Redux)
`useContext`	Read context values without prop drilling

When to Memoise

Don't memoise everything. Only use useMemo/useCallback when:

A computation is genuinely expensive (> 1ms)

A function is passed to a React.memo child

A value is in a dependency array of another hook

Rendering Optimisation

Why Components Re-render

A component re-renders when:

Its state changes

Its parent re-renders (props may or may not change)

A context it consumes changes

How to Prevent Unnecessary Re-renders

React.memo(Component) — skip re-render if props are shallowly equal

Move state down — lift state only as high as needed

Split contexts — separate frequently-changing values from stable ones

State Management Decision Tree

Local state only? → useState / useReducer
Shared across siblings? → lift state to parent
Shared across distant components? → Context + useReducer
Global, complex, server-synced? → TanStack Query / SWR (for server state)
Global, complex, client-only? → Zustand / Jotai

React Patterns & Performance

Essential Hooks

When to Memoise

Rendering Optimisation

Why Components Re-render

How to Prevent Unnecessary Re-renders

State Management Decision Tree

Resources