React
262 bites tagged React — interview questions with model answers, and 60-second explainers.
Tearing and useSyncExternalStore in concurrent React
Tearing is inconsistent UI when an interruptible render reads a changed external store mid-pass; useSyncExternalStore subscribes and forces consistent snapshots, re-rendering synchronously on change. Concurrency consistency guarantees.
Testing a component that consumes React Context
Render inside the Context.Provider with a value, or omit it to exercise the default; use a custom render wrapper for reuse. Knowing context needs a Provider in tests.
What is JSX and how does the browser run it?
JSX is XML-like syntax compiled to React.createElement calls; it differs from HTML via className and camelCase; browsers never see JSX, only transpiled JS. Grasp of JSX as syntactic sugar.
Agent planning beyond a ReAct loop
ReAct adapts step by step but costs many calls, plan-then-execute drafts a full plan upfront for fewer calls but is brittle to surprises, hierarchical decomposition splits goals… trade-offs among reactive and planned agent strategies.
Architecting a themeable React component library
A ThemeProvider supplying tokens through Context, components reading them, and CSS variables for performance. theming React components via Context. prop-drilling the theme or putting fast-changing state in Context.
Auto-generating component API docs from source
Extract types via react-docgen-typescript, surface in Storybook ArgsTable, enrich with JSDoc. keeping prop docs in sync with code. maintaining a hand-written prop table that silently drifts.
Building a flexible Card with optional content
Use optional props or named slots for image, title, and text, conditionally render present ones, and prefer composition for ordering. flexible component APIs via props or composition.
Composing Input and Button into a SearchForm
Wrap Input and Button in a form, expose value/placeholder props, emit onSearch on submit, keep it controlled. basic composition and component API design. duplicating Input and Button logic instead of reusing them.
The polymorphic 'as' prop pattern
Render the element from an as prop, infer props from the chosen element, and forward refs. Building reusable components with correct typing and ref forwarding. ignoring types or dropping the ref.
Controlled vs uncontrolled Modal component
Uncontrolled is convenient but inflexible, controlled gives parent full power and predictability, and a hybrid supports both. API design judgment for component state ownership. claiming controlled is always better.
Designing a Card component API
Simple props for title and image, but children or slots for arbitrary content instead of a string prop, keeping it composable. clean component API design. passing HTML as a string or via dangerouslySetInnerHTML.
Virtual DOM Diffing: Minimal DOM Surgery
Virtual DOM diffing finds the smallest real DOM ops to sync a lightweight tree with new state. Frameworks batch rapid UI changes instead of repainting everything. The footgun is treating the diff as free; missing keys in lists force expensive reconciliation.
Matt Pocock's Free React TypeScript Tutorial
Matt Pocock's free React TypeScript tutorial teaches typing for hooks, props, events via hands-on exercises. Covers ComponentProps, useRef, and reading React's type defs to debug errors. Bookmark this if your team is adopting TypeScript.
Next.js 16.2 brings 67-100% faster server Fast Refresh
Next.js 16.2 Turbopack brings Server Fast Refresh to Node.js, cutting reload times 67-100% and compile times 400-900%. Only changed modules reload, not whole chains. WASM Workers, SRI, and dynamic import tree shaking land; upgrade to cut dev latency.
Next.js 16.2 adds agent-native dev tooling
Next.js 16.2 bundles version-matched docs with create-next-app, hitting 100% on framework evals versus 79% without. Browser errors now forward to terminal and a dev server lock file prevents agent confusion. Upgrade if you use AI coding agents.
What drives your choice between Zustand and Redux Toolkit at scale?
What it tests: matching state philosophy to constraints, not hype. Outline: weigh Zustand's minimal footprint against Redux Toolkit's DevTools and structured async patterns. Red flag: claiming one is always better regardless of team size or debugging needs.
How do you ensure a complex form is fully accessible?
Pair labels to inputs, move focus to first error on submit, and link aria-invalid to aria-describedby. Mastery of semantic HTML, focus control, and ARIA for validation.
What is the Virtual DOM and why does React use it?
This tests reconciliation as declarative abstraction, not raw speed. Good answers define VDOM as in-memory UI synced to the real DOM, explain declarative state mapping, and note fibers enable incremental rendering.
Explain the difference between Server and Client Components in Next.js
Server components run on the server with no client JS and access backends directly; client components ship JS and handle state. your understanding of rendering boundaries in the Next.js App Router.
How do React Profiler flame and ranked charts pinpoint bottlenecks?
Flame chart width and color show duration with children; ranked chart sorts by self-time to surface the top component. Distinguishing flame chart subtree cost from ranked chart self-time. Calling them identical.
Compare CSS Modules and runtime CSS-in-JS libraries across DX, performance, and dynamic styling
This tests build-time vs runtime style architecture trade-offs. A strong answer contrasts CSS Modules' static extraction with CSS-in-JS's prop-driven runtime injection, covers dynamic styling patterns, and weighs SSR and bundle costs.
What limits React inline styles and when are they still appropriate?
This tests React styling trade-offs. Outline: no pseudo-classes, media queries, or keyframes; maintenance and perf costs; good for dynamic state styling, prototyping, FOUC prevention, and small components. Red flag: claiming they are always bad or free.
How would you implement a custom useDebounce hook using useState and useEffect?
It tests effect cleanup and stale closure awareness. Use useState for the debounced value, useEffect to set a setTimeout when the input changes, and return a cleanup calling clearTimeout. Omitting cleanup leaks timers and fires stale values.
How does React's scheduler prioritize updates with Fiber?
Tests cooperative scheduling. Cover Fiber's incremental units, the Scheduler's time-slicing loop, and Lanes where SyncLane and InputContinuousLane outrank DefaultLane. Red flag: claiming React uses a separate thread or that batching alone handles priority.
Get React bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.