React Cheat Sheets

Visual quick-reference cards for React concepts. Screenshot-ready for your notes app, Notion, or next interview prep session.

Quick Reference

React Hooks Reference

When to use each hook, the signature, and the gotcha that trips people up

useState

const [value, setValue] = useState(initial)

Use when

Local component state that triggers re-renders

⚠

Never mutate directly — always return new values

useEffect

useEffect(() => { ... return cleanup }, [deps])

Use when

Sync with external systems (APIs, subscriptions, timers)

⚠

[] = mount only · [x] = when x changes · no array = every render

useRef

const ref = useRef(initialValue)

Use when

DOM access, mutable values that don't trigger re-renders

⚠

Mutating ref.current does NOT cause a re-render

useMemo

const result = useMemo(() => compute(a, b), [a, b])

Use when

Cache an expensive computed value between renders

⚠

Only helps if compute is actually expensive (>1ms)

useCallback

const fn = useCallback(() => { ... }, [deps])

Use when

Stable function reference for React.memo children

⚠

Only helps when passed to a memoized child

useContext

const value = useContext(MyContext)

Use when

Read context value — re-renders when context changes

⚠

Split contexts by update frequency to avoid over-rendering

useReducer

const [state, dispatch] = useReducer(reducer, init)

Use when

Complex state with multiple transitions or related sub-values

⚠

dispatch is always stable — safe as useEffect dependency

useId

const id = useId()

Use when

Generate unique, stable IDs for accessibility (labels, ARIA)

⚠

Never use as list key — IDs are stable across renders

useTransition

const [isPending, startTransition] = useTransition()

Use when

Mark a state update as non-urgent (keeps UI responsive)

⚠

Only in React 18+. State inside startTransition is interruptible

Lifecycle

Component Lifecycle (Functional)

What happens at each phase and which hooks correspond to each stage

Mount Phase

1. Render— Component function runs, returns JSX

2. Commit— React writes to real DOM

useLayoutEffect3. useLayoutEffect— Fires synchronously, before paint

4. Paint— Browser paints to screen

useEffect5. useEffect— Fires asynchronously after paint

Update Phase

Triggered by— setState · parent re-render · context change

1. Render— Component re-runs with new state/props

2. Diff— React diffs new vs old virtual DOM

3. Commit— Minimal real DOM changes applied

return () =>4. useEffect cleanup— Previous effect's cleanup runs

useEffect5. useEffect— Effect re-runs if deps changed

Unmount Phase

return () =>1. useLayoutEffect cleanup— Synchronous cleanup runs

return () =>2. useEffect cleanup— All effect cleanups run

3. DOM removal— Component removed from DOM

Decision Guide

State Management Decision Tree

Follow this to always pick the right state solution

Is the data fetched from a server?

YES →React Query / RTK Query

Server state: cached, auto-refetched, invalidated on mutation

Does only ONE component need this data?

YES →useState / useReducer

Keep it local — simplest solution

Do 2–3 nearby sibling components need it?

YES →Lift state up

Move to nearest common parent, pass as props

Is it app-wide config (theme, auth, locale)?

YES →React Context

Changes rarely, read by many, no complex updates

Complex UI state shared across many components?

YES →Zustand or Redux Toolkit

Rich update logic, DevTools, middleware needed

Interview Prep

Interview Flash Cards

Common interview questions — screenshot and use for quick review

Virtual DOM vs Real DOM

Core

Virtual DOM is a lightweight JS object tree. React diffs it against the previous version and applies only the minimal real DOM changes.

Controlled vs Uncontrolled

Forms

Controlled: input value driven by React state. Uncontrolled: input stores value in the DOM, accessed via ref.

Why immutable state?

State

React uses reference equality (===) to detect changes. Mutating in place keeps the same reference — React sees no change and skips the re-render.

React.memo vs useMemo

Performance

React.memo memoizes a component (skips re-render if props unchanged). useMemo memoizes a value inside a component.

Key prop rule

Lists

Use stable, unique IDs as keys. Never use array index for dynamic lists that can reorder or filter — it breaks re-render optimization.

useEffect vs useLayoutEffect

Hooks

useEffect: async, after browser paint. useLayoutEffect: sync, before paint. Use useLayoutEffect only for DOM measurement or preventing visual flicker.

When to use Context?

Context

For data many components need that changes rarely (theme, auth, locale). Not for frequently-updating state — it re-renders all consumers.

What triggers a re-render?

Core

1. Own state changes. 2. Parent re-renders (if not memoized). 3. Consumed context changes. Regular variable changes do NOT trigger re-renders.

Error Boundary

Patterns

Class component that catches JS errors in its subtree. Renders fallback UI instead of crashing. Requires getDerivedStateFromError + componentDidCatch.

Test Yourself — Take the Quiz Junior Interview Q&A Senior Interview Q&A

Performance

Performance Quick Reference

Match the symptom to the solution — always profile before optimising

Problem / Symptom	Tool / Fix	Condition
Child re-renders when parent does	`React.memo`	Props must be shallowly stable
Callback prop breaks React.memo	`useCallback`	Wrap callback in useCallback with deps
Object prop breaks React.memo	`useMemo`	Wrap object creation in useMemo
Expensive computation on every render	`useMemo`	Only if >1ms — measure first
100+ item list is slow	`@tanstack/react-virtual`	Virtualise — only render visible rows
Context re-renders too many components	`Split contexts`	Separate by update frequency
Typing input lags during heavy render	`useTransition / useDeferredValue`	Mark heavy update as non-urgent
Slow initial page load	`React.lazy + Suspense`	Code-split by route
Can't tell what's slow	`React DevTools Profiler`	Profile first — never optimise blind