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