React Patterns

Master the architectural blueprints of scalable React applications — hooks, composition ideas, and interview-ready demos below.

Category mastery

2 of 8 patterns mastered

Core concepts

EasyNot started

React cheatsheet

Quick reference for JSX, hooks, and common interview topics — pairs with the interactive demos below.

React cheatsheet

Quick reference for JSX, hooks, and common interview topics. Pairs with the interactive demos below.

Components & JSX

Props are read-only; destructure in the signature: function Card({ title }: Props).
Conditional UI: {cond && <A />}, {cond ? <A /> : <B />}.
Lists: stable key (id, not index when items reorder or insert).
Children: React.ReactNode — slot content between tags.

Hooks (when to use)

useState — local UI state.
useReducer — related state with explicit transitions.
useEffect — sync with external systems (fetch, subscriptions, non-React APIs). Include all reactive values you read in deps; cleanup to unsubscribe / cancel.
useLayoutEffect — DOM measure/layout before paint (rare).
useMemo — expensive pure computations.
useCallback — stable function refs for memoized children or effect deps.
useRef — mutable value, DOM nodes, timers, latest value without re-render.

Forms & data

Controlled: value + onChange (React owns state).
Uncontrolled: defaultValue + ref to read.
Prefer React Query / SWR (or framework loaders) over raw useEffect + fetch for caching and deduping.

Performance & context

React.memo — skip re-render when props are shallow-equal (child must be pure).
Split state so frequent updates don't re-render heavy subtrees.
Avoid new object/array/function props every render when passed to memo children.
Context — good for rarely changing globals (theme, auth); avoid as a general state bus.

TypeScript snippets

type Props = { title: string; onSave?: () => void }
Events: React.ChangeEvent<HTMLInputElement>, React.MouseEvent<HTMLButtonElement>.

Common pitfalls

Missing or wrong effect dependencies → stale data or infinite loops.
Storing derived state in useState + syncing with useEffect — derive during render instead.
Mutating state/props in place — always new references for objects/arrays when updating.

MediumIn progress

useFetch

Custom hook pattern for fetching JSON with loading and error states, cancellation-safe updates.

useFetch

Custom hook that fetches data and tracks loading / error / data state. Cancels in-flight requests on URL change or unmount.

Fetching https://jsonplaceholder.typicode.com/todos/1…

EasyMastered

useDebounce

Delays updating a value until input is stable — avoids noisy API calls on every keystroke.

useDebounce

Returns a value that only updates after the input has been stable for 400ms. Prevents API calls on every keystroke.

delay =ms

live value:—

debounced:—

MediumMastered

useCallback + memo

Memoizes function references so memoized children skip needless re-renders when deps are unchanged.

useCallback + memo

useCallback memoizes a function reference. Combined with React.memo, it prevents child re-renders when only unrelated parent state changes.

Parent renders:1

✓ useCallback — stable reference

renders:1

✗ no useCallback — new reference each render

renders:1

MediumIn progress

useRef

Mutable refs across renders — timers, DOM nodes, and tracking values without triggering re-renders.

useRef

useRef returns a mutable object (.current) that persists across renders without triggering one. Ideal for timers, DOM nodes, and previous-value tracking.

00:00.00

elapsed (ref):0ms — stored in useRef, not state

component renders:0 — only when setDisplay is called

HardNot started

Lazy loading + throttle

Images load near the viewport; scroll handlers are throttled to reduce expensive layout reads.

Lazy Loading + Throttle

Images load only when cards get near the viewport. Scroll checks are throttled to reduce expensive layout reads.

Landscape 1 • pending

Landscape 2 • pending

Landscape 3 • pending

Landscape 4 • pending

Landscape 5 • pending

Landscape 6 • pending

Landscape 7 • pending

Landscape 8 • pending

Landscape 9 • pending

Landscape 10 • pending

Landscape 11 • pending

Landscape 12 • pending

HardIn progress

Event loop order

Execution order between synchronous code, microtasks (promises), and macrotasks (timeouts).

Event Loop Order

Demonstrates JS execution order between synchronous code, microtasks, and macrotasks.

Click "Run demo" to see ordering.

MediumNot started

Dropdown + portals

Positions menus from viewport space and escapes overflow clipping via createPortal.

useDropdown — portal positioning

Positions a dropdown above or below the trigger based on available viewport space, and escapes overflow: hidden containers via a createPortal.

Dropdown escapes the clipping box ✓

This box has overflow: hidden. Toggle portal to see clipping vs escape.

placement:—