React

What re-render actually means, why keys exist, and when memo is a tool — not a personality trait.

intermediate

React mental model: UI as a function of state, declarative trees, one-way data flow, and re-render triggers.

beginner

JSX compiles to createElement or jsx() calls: elements as objects, props and children, and why type plus key drive identity.

beginner

Function components as UI functions of props and state: hooks, purity under concurrent render, and how they differ from classes.

beginner

Practical useState patterns: functional updates, objects versus atoms, lazy init, immutable lists, and when to use useReducer.

beginner

The useEffect dependency array is a contract: Object.is compares, exhaustive-deps, stale closures, and what not to put in effects.

intermediate

useLayoutEffect runs before paint: measure and mutate DOM without flicker, SSR warnings, and why useEffect is usually enough.

advanced

Mutable boxes that survive renders — DOM refs, instance variables, avoiding re-renders, and the ref-vs-state decision.

beginner

When memoization helps — referential equality, expensive pure work, memo children, dependency arrays, and the cost of caching everything.

intermediate

React.memo skips re-renders when props are Object.is-equal: when it helps, when unstable props make it useless, and cost.

intermediate

Why React keys exist — identity across reconciliations, index key bugs, remounting with key, and how to choose stable ids.

beginner

React form inputs as source of truth — controlled value/onChange, uncontrolled defaultValue/ref, hybrid pitfalls, and when each wins.

beginner

Share state by moving it to the closest common parent: when to lift, how to pass setters, and when context is better.

beginner

Stop copying props into state: derive during render, reset with keys, and the rare cases where mirrored state is intentional.

intermediate

React prefers composition over inheritance: children, special slots, and why extend MyComponent is a dead end.

beginner

Using children and slot props for flexible APIs: wrappers, compound components, and when to prefer explicit props.

beginner

Render props share code via a function prop that returns React nodes: classic Mouse, vs custom hooks today.

intermediate

HOCs wrap components to inject props: the classic pattern, displayName, ref issues, and why hooks replaced most uses.

intermediate

React context for dependency injection — createContext, Provider, useContext, default values, and when context is the wrong tool.

beginner

Context re-renders all consumers on value change: split providers, memoize values, and when a store is better.

advanced

When useReducer beats useState — action tables, pure reducers, dispatch stability, context pairing, and migration patterns.

intermediate

Class error boundaries catch render errors in the tree, show fallback UI, and what they do not catch: events, async, own render.

intermediate

Suspense coordinates loading UI for lazy components and data: boundaries, fallbacks, and what it does not catch.

advanced

Render children into a different DOM node with createPortal: modals, tooltips, and the event bubbling surprise.

intermediate

Group children without an extra DOM node: short syntax, keyed fragments for lists, and when a real wrapper is better.

beginner

Why React Strict Mode double-invokes effects in development: finding missing cleanup, pure render, and what production does.

intermediate

Client-side routing updates the URL and UI without full reloads: history API, link interception, and data loading.

beginner

React.lazy and Suspense split bundles: dynamic import, loading fallbacks, error boundaries, and route-level splits.

intermediate

Controlled vs uncontrolled inputs, form state, validation UX, and when native form submit is enough.

beginner

Optimistic UI updates the screen before the server confirms: apply, rollback on error, and concurrent-safe patterns.

advanced

Render only visible rows for large lists: windowing mental model, libraries, keys, and accessibility tradeoffs.

advanced

forwardRef and ref props let parents access a child’s DOM node: input focus, measuring, and the ref-as-prop modern pattern.

intermediate

useImperativeHandle customizes the instance value exposed to parent refs: narrow APIs, when to avoid, and forwardRef pairing.

advanced

Extract reusable stateful logic with use* hooks — API design, composition, testing seams, and footguns that recreate render bugs.

intermediate

Why hooks must be top-level and only in React functions — call order, the linter, and the bugs that break when you cheat.

beginner

Keep state as close as possible to where it is used: colocation, lifting when shared, and re-render blast radius.

intermediate

When useEffect runs, how cleanup works, what belongs in the dependency array, and the bugs from treating it like componentDidMount.

intermediate

Stop threading props through intermediates: children slots, inversion of control, and when context is the right escape hatch.

intermediate

Props are inputs from the parent; state is data the component owns over time. How to choose, lift, and avoid the usual traps.

beginner

Concurrent React: interruptible rendering, transitions, Suspense, and why render purity matters more than ever.

advanced

useTransition marks state updates as non-urgent: keep input snappy while heavy UI catches up, with isPending.

advanced

useDeferredValue lags a value behind urgent state so heavy children render with lower priority without dual setState.

advanced

flushSync forces React to flush updates synchronously: measuring DOM after setState, and why overuse hurts.

advanced

Use the React DevTools Profiler to find wasted renders: record, ranked chart, commit flamegraph, and what to fix first.

intermediate

Keys control identity during reconciliation: stable ids, index key bugs, and intentional remounts when state must reset.

intermediate

Multi-step wizards: lift durable answers, key step UI, validation per step, and URL-backed step state.

intermediate

Practical React a11y: labels, focus management, keyboard, live regions, and composition patterns that stay accessible.

intermediate

Test React components by user behavior: Testing Library queries, user-event, async, and what not to assert.

intermediate

React Server Components run on the server: zero client JS for their logic, async data, and composition with client leaves.

advanced

Where to put use client: push interactivity to leaves, serializable props, and children as server slots.

advanced

Why server HTML must match the client’s first render: common causes, useId, dates, and suppressHydrationWarning.

advanced

A practical React performance checklist: measure first, fix data flow, then memo, virtualize, and split code.

intermediate

dangerouslySetInnerHTML bypasses React escaping: XSS risks, sanitization, and safer alternatives.

intermediate

Layout components structure pages with slots and children: shells, stacks, and keeping presentational layout free of business state.

beginner

Typing React props in TypeScript: interfaces, children, events, discriminated unions, and component props helpers.

beginner

How React 18+ batches setState in events, timeouts, and promises: when updates flush and why double setState still works.

intermediate

useId generates stable unique IDs for label/input wiring that work with SSR and hydration.

beginner

useSyncExternalStore API deep dive: subscribe, getSnapshot, server snapshot, and mutation rules.

advanced

Subscribe to non-React stores without tearing: the problem with useEffect + useState, and useSyncExternalStore.

advanced

Reset component state by changing key: when remount is cleaner than effects that sync props into useState.

intermediate

Keep local state glued to the right item when lists reorder: stable keys, position traps, and drag-and-drop gotchas.

intermediate

Debounce a changing value in React without firing effects on every keystroke. Cleanup, leading vs trailing, and the stale timer that updates unmounted state.

intermediate

Keep last render’s value in a ref. Why an effect-after-paint is correct, and the first-render undefined that interviewers wait for you to name.

beginner

Sync state to localStorage with JSON, SSR fallback, cross-tab storage events, and parse errors that should not crash the tree.

intermediate

Close a popover when the pointer lands outside its ref. Capture phase, touch, Escape as a sibling, and ignoring the first open click.

intermediate

Fetch in an effect with a signal, ignore aborted errors, and prevent the slow response from winning a race after the url changes.

intermediate

Load the next page when a sentinel enters the viewport. IntersectionObserver, hasMore, in-flight guards, and the footer that never intersects.

intermediate

Subscribe to matchMedia, return a boolean, and avoid hydration mismatch by deferring the first client read or accepting a default.

intermediate

A setInterval that sees the latest callback without restarting the timer when the callback identity changes. Dan Abramov’s ref pattern, named.

intermediate

Copy text with navigator.clipboard, fallback execCommand, transient copied state, and permissions that fail in insecure contexts.

beginner

Attach a window, document, or element listener with a stable handler ref so you do not rebind on every render. Capture option and target changes.

intermediate

A boolean and a stable toggle. useReducer or a lazy setter keeps the function identity, so children memoized on toggle do not re-render for free.

beginner

Throttle a changing value in React: at most one update per interval, trailing flush, cleanup, and how this differs from useDebouncedValue.

intermediate

Detect idle users: reset a timer on input events, fire idle after timeout, and decide whether mount starts the timer immediately.

intermediate

navigator.onLine plus online and offline events. SSR should not read the navigator, and the event pair is what keeps the flag honest.

beginner

Read innerWidth and innerHeight in an effect, throttle with rAF, and return zeros on the server so hydration does not invent a desktop width.

beginner

Diff previous props in a ref and log only the keys that actually changed. A debug hook, not a production profiler, and Object.is is the compare.

intermediate