Question 1

Explain why React's list diffing algorithm is O(n) rather than the theoretical O(n^3) tree diff, and what role the key prop plays in that. What actually goes wrong at runtime when you use an array index as a key for a reorderable list?

Accepted Answer

Covers the two heuristics React uses: same type at same position stays, and keys short-circuit cross-position matching. Explains that index-as-key causes wrong component state to be kept alive (e.g., controlled input values, animation state) when items are inserted or reordered because React maps the same key to a different data item.

Question 2

You have a useEffect that sets up a WebSocket listener. Inside the handler, you read a piece of state that always shows its initial value even after the state has changed. Walk me through why this happens and at least two different ways to fix it.

Accepted Answer

Explains that the closure captures the value of state at the time the effect ran, and because the dependency array was empty the effect never re-ran. Fixes include adding state to the dependency array (and re-subscribing), using a ref to hold the latest value, or using the functional updater form of setState.

Question 3

A page has an LCP of 4.2 seconds. Walk me through the systematic process you would use to identify the bottleneck, assuming you have access to Chrome DevTools, WebPageTest, and the CrUX report. What are the most common LCP culprits in a React app served from a CDN?

Accepted Answer

Should identify the four LCP sub-parts from the Performance panel: TTFB, resource load delay, resource load duration, and element render delay. Common React culprits include render-blocking JS bundles delaying FCP, hero images not preloaded, images not sized correctly (causing layout to wait), and SSR hydration blocking paint.

Question 4

You have a context that holds both a user object and a theme string. Any component consuming the context re-renders when either value changes. A form deep in the tree subscribes only to theme but re-renders on every user update. What is happening and what are two different architectural fixes?

Accepted Answer

Context compares value by reference; if the provider re-renders with a new object literal the reference changes even if the data is the same. Fixes: split into separate UserContext and ThemeContext so consumers only subscribe to what they need, or use useMemo on the context value to stabilize the reference. Should also mention React.memo on consumers and the use-context-selector pattern.

Question 5

You are building a custom dropdown component because the native select element cannot be styled to match the design. Walk me through which ARIA attributes you would add, why you would add them, and what keyboard interaction pattern is required to make it accessible.

Accepted Answer

Trigger button gets aria-haspopup=listbox and aria-expanded. The listbox container gets role=listbox. Each option gets role=option with aria-selected. Focus management: Arrow keys move focus through options, Enter selects, Escape closes and returns focus to trigger. Should mention the ARIA Authoring Practices Guide combobox pattern versus listbox pattern.

Question 6

Give me a concrete rule of thumb for choosing between CSS Grid and Flexbox, then describe a layout where using Flexbox would be wrong and Grid is the right tool, and another where the opposite is true.

Accepted Answer

Rule of thumb: Flexbox is one-dimensional (a row or a column), Grid is two-dimensional. Grid is right for a page-level layout with named areas or a card grid that needs both row and column alignment. Flexbox is right for a navigation bar where items should stretch to fill available space along one axis and wrap naturally.

Question 7

Explain the difference between useMemo and useCallback, when each is actually worth using, and describe a situation where adding useMemo makes performance worse rather than better.

Accepted Answer

useMemo memoizes a computed value; useCallback memoizes a function reference. useCallback is mainly useful when passing stable function references to memoized children (wrapped in React.memo) to prevent re-renders. useMemo is useful for expensive computations. Using them everywhere adds overhead: every render must compare deps array and store the memoized value. Should profile before adding memoization.

Question 8

You have designed a complex loading-to-success animation for a fintech product. What does a good engineering handoff include?

Accepted Answer

A good handoff includes the states, triggers, timing, easing curves, delays, interruption rules, and reduced-motion variant. It should specify which elements are layout-affecting and which should animate on transform or opacity for performance. Provide a prototype or exported values, but do not assume a video is enough for implementation. Include acceptance criteria so QA can tell whether the motion is correct. Candidates who understand handoff speak in implementation-ready constraints while still protecting the intention of the motion.

Question 9

Walk me through what happens inside React's Fiber reconciler when setState is called on a deeply nested component. How does it decide which parts of the tree to re-render, and how does it differ from the old stack reconciler?

Accepted Answer

Strong answers cover the two-phase commit model (render/reconcile phase vs. commit phase), how Fiber represents each component as a linked list of work units, time-slicing via the scheduler, and how priority lanes determine which updates are processed first. Should contrast with the old synchronous stack reconciler that could not be interrupted.

Question 10

You need to write a utility type UnwrapPromise that extracts the resolved value type of a Promise. Walk me through how you would use a conditional type with the infer keyword to implement this, and what happens when T is a nested Promise like Promise>.

Accepted Answer

Strong answer writes T extends Promise<infer U> ? U : T and notes this only unwraps one level. Extends to recursive conditional type for deep unwrapping. Should also mention how distributive conditional types work when T is a union.

Question 11

Explain what a block formatting context is and how creating one on a container causes it to stretch around floated children instead of collapsing. What are three different CSS properties that trigger a new BFC, and what side effects do they have?

Accepted Answer

Covers that a BFC is a self-contained layout region where floats and clear interact only within it. Triggering properties include overflow: hidden (clips content), display: flow-root (no side effects, purpose-built), and contain: layout. Should note that float: left/right and position: absolute/fixed also trigger BFC.

Question 12

Describe three concrete situations in a typical React page that each produce CLS, and for each one explain the correct fix. What is the layout shift score formula in terms of impact fraction and distance fraction?

Accepted Answer

Common causes: images and iframes without explicit width/height or aspect-ratio causing reflows when they load; dynamic content (ads, banners, toast notifications) inserted above existing content; web fonts causing FOUT that changes text metrics. Score = impact fraction times distance fraction summed across animation frames.

Question 13

Your app has an INP of 380ms measured in CrUX. Walk me through how you would use the PerformanceObserver API and Long Animation Frame API to identify which interactions are slow, and then explain the main categories of fix.

Accepted Answer

Should explain that INP measures the worst interaction latency (input delay plus processing time plus presentation delay). Tooling: PerformanceObserver with 'event' entry type, Long Animation Frames (LoAF) in Chrome 123+. Fixes fall into: reducing input delay (avoid long tasks before event fires), reducing processing time (break up synchronous work, defer non-visual updates), and reducing presentation delay (avoid forced style recalcs after state updates).

Question 14

Explain what happens at the webpack level when you use dynamic import() in a React app with React.lazy. How does webpack decide chunk boundaries, what goes into the async chunk versus the main bundle, and what network request does the browser make at runtime?

Accepted Answer

Covers that webpack statically analyzes import() calls to produce async chunks. The main bundle gets a small chunk loader stub; when the lazy component is needed the browser fetches the chunk file by its content-hashed name. Shared dependencies between chunks go into a shared chunk via SplitChunksPlugin. Should mention that React.lazy wraps this in a Suspense boundary that renders the fallback while the chunk loads.

Question 15

Starting from the moment the browser receives the first bytes of an HTML document, walk me through every major step in the rendering pipeline up to pixels on screen. Where in this pipeline does JavaScript execution fit, and what does render-blocking actually mean?

Accepted Answer

Covers: bytes to characters to tokens to DOM nodes (HTML parser), parallel CSS parsing building CSSOM, render tree = DOM + CSSOM, layout (geometry calculations), paint (draw calls), compositing (GPU layers). Parser-inserted scripts block HTML parsing because they may call legacy DOM mutation APIs synchronously. CSS blocks rendering because render tree requires CSSOM. Async and defer scripts do not block parsing.

Question 16

You are starting a mid-sized React app with complex async flows and developer teams who need clear data mutation trails. Walk me through the tradeoffs between Zustand and Redux Toolkit that would inform your choice, including devtools, middleware, and team ergonomics.

Accepted Answer

RTK gives a structured pattern (slices, thunks, RTK Query), strong devtools with time-travel, and an opinionated approach that scales with large teams. Zustand is minimal boilerplate, easy to colocate with components, great for smaller or mid-size apps, but provides weaker conventions so large teams can diverge. Should cover RTK Query vs. React Query for server state.

Question 17

Your API returns a response that is either a success with a data payload or an error with a code and message. How would you model this with a TypeScript discriminated union, and how does TypeScript's type narrowing work inside if statements that check the discriminant?

Accepted Answer

Define two interfaces sharing a common literal-typed field like status: 'success' or status: 'error'. In a conditional that checks result.status === 'success', TypeScript narrows to the success branch with data available. Should mention exhaustive checking with a never type in a switch default branch.

Question 18

Explain what React Server Components are, how they differ from traditional SSR, what they cannot do that Client Components can, and what concrete benefit they provide over fetching data in a useEffect.

Accepted Answer

RSCs run only on the server and never ship their own JavaScript to the client, reducing bundle size. They can directly access databases and secrets. They cannot use browser APIs, event handlers, or stateful hooks. Versus useEffect data fetching: no waterfall between render and fetch, no loading spinner for the initial shell, and the serialized React tree is streamed incrementally.

Question 19

Walk me through how Next.js 13+ App Router uses React Suspense to stream HTML to the browser. What HTTP mechanism is used, what renders first, and how does hydration work for content that arrives later in the stream?

Accepted Answer

Next.js uses HTTP chunked transfer encoding. The shell (layout, static content, Suspense fallbacks) is sent immediately. When an async segment resolves, Next.js sends a script tag that inlines the RSC payload and JavaScript that swaps the fallback for the real content. Hydration of each chunk happens incrementally as chunks arrive.

Question 20

A designer gives you a blue button with white text. What WCAG 2.1 success criteria apply to the text contrast and to the button focus indicator? How do you compute the contrast ratio and what are the thresholds for AA versus AAA?

Accepted Answer

Text contrast is SC 1.4.3 (AA 4.5:1 for normal text, 3:1 for large text) and 1.4.6 (AAA 7:1). Focus indicator is SC 2.4.11 in WCAG 2.2 requiring minimum area and contrast. Contrast ratio formula: (L1 + 0.05) / (L2 + 0.05) where L1 and L2 are relative luminance values computed from sRGB.

Question 21

Why is a scroll event listener a poor choice for implementing image lazy loading, and how does IntersectionObserver solve the problem? What browser-native alternative exists today and when would you still write a custom observer?

Accepted Answer

Scroll listeners fire on the main thread on every scroll event, causing jank because they block rendering. IntersectionObserver is asynchronous: the browser tracks intersection state in the compositor and delivers batched callbacks to the main thread only when visibility thresholds are crossed, so the cost is paid far less frequently than on every scroll tick. Native loading=lazy on img and iframe is now supported widely and handles the common case. Custom observers are needed for more complex triggers like a percentage of element visible, or for non-image elements like analytics exposure tracking.

Question 22

Explain the philosophical difference between React Testing Library and Enzyme. What does test behavior, not implementation mean in practice, and give me an example of a test that Enzyme would pass but that hides a real user-facing bug.

Accepted Answer

Enzyme gives direct access to component internals (instance, state, shallow rendering of child components). This lets tests pass after refactoring that breaks the real UI. RTL queries mirror how a user perceives the DOM (by label, role, text), so tests only pass if the rendered output is correct from the user's perspective. Example: Enzyme shallow render passes even if a child component that renders the actual button is broken.

Question 23

Explain what tree shaking is, how bundlers detect dead code exports in ES modules, and why the same technique does not work reliably with CommonJS require() modules.

Accepted Answer

Tree shaking relies on static import/export syntax so bundlers can build a module dependency graph at compile time and remove exports that are never imported. CommonJS require() is dynamic (can be conditional, computed) so the bundler cannot statically determine which exports are used. Should mention that side-effect annotations in package.json sideEffects: false allow more aggressive tree shaking.

Question 24

Your Next.js app logs a hydration mismatch warning in the console. Walk me through what hydration mismatch means, the most common causes in a server-rendered React app, and how you would systematically find and fix the offending component.

Accepted Answer

Hydration mismatch means the HTML rendered on the server differs from what React expects to render on the client during the reconciliation pass. Common causes: Date.now() or Math.random() called during render, conditional rendering based on window/localStorage that only exists client-side, browser extensions injecting DOM nodes. Fix: use useEffect for client-only state, useId for stable IDs, suppressHydrationWarning as a last resort.

Question 25

Explain the difference between a task queue and the microtask queue in the browser event loop. Where do Promises, setTimeout, requestAnimationFrame, and queueMicrotask fit? What renders between a task and the next microtask?

Accepted Answer

Each event loop iteration processes one task, then drains the entire microtask queue before moving on. Promise .then callbacks go into the microtask queue. setTimeout creates a task. requestAnimationFrame callbacks run before the render step which happens after microtasks and before the next task. Nothing renders between a promise chain; the browser only gets a chance to render between tasks.

Question 26

Describe how you would instrument a React app to collect LCP, CLS, and INP from real users and send the data to an analytics endpoint. What API do you use and what gotchas should you watch out for when reporting CLS in particular?

Accepted Answer

Use the web-vitals npm package which wraps PerformanceObserver entries for each metric. CLS gotcha: the value accumulates over the page lifetime so you should report onCLS with reportAllChanges: true or report on page hide/visibility change. Use sendBeacon inside the pagehide listener to reliably flush data before the page is torn down.

Question 27

You need to render a list of 100,000 items in React. Explain what windowing or virtualizing means, why it improves performance, and what libraries you would evaluate. What are the main challenges when items have variable heights?

Accepted Answer

Windowing renders only the DOM nodes visible in the viewport plus a small overscan. This keeps the DOM node count constant regardless of data size. Libraries: react-virtual (TanStack Virtual), react-window, react-virtuoso. Variable heights require measuring rendered items (using a ResizeObserver after rendering) and maintaining an estimate map, which complicates scroll position calculation.

Question 28

Explain what a React error boundary is, how to implement one, what types of errors it catches, and what types of errors it does not catch. What would you do to handle an async error from a fetch call inside a component?

Accepted Answer

Error boundaries are class components with componentDidCatch and static getDerivedStateFromError. They catch rendering errors and errors in lifecycle methods. They do not catch errors in async code (promises, setTimeout), event handlers, or errors inside the boundary itself. For async errors: store the error in state and throw it in the render method, or use the React 19 use() hook with Suspense.

Question 29

What is the TypeScript strict flag and what specific checks does it enable? Give me two concrete examples of bugs that strict mode catches at compile time that would otherwise be runtime errors.

Accepted Answer

strict enables: noImplicitAny, strictNullChecks, strictFunctionTypes, strictPropertyInitialization, and others. strictNullChecks bug example: accessing .length on a value that could be undefined. noImplicitAny catches function parameters that have an implicit any type. Should mention that enabling strict on an existing codebase often surfaces hundreds of latent bugs.

Question 30

Describe your testing strategy for a React feature. How do you decide what to cover with Playwright end-to-end tests versus React Testing Library component tests versus unit tests for pure functions? What is the main cost of each layer?

Accepted Answer

The testing pyramid: unit tests for pure utility functions (fast, no DOM overhead); RTL for component behavior from a user perspective (catches rendering and interaction bugs without a browser); Playwright for critical user journeys end-to-end (catches integration and routing bugs but slow and flaky). Main costs: E2E = slow CI, brittle locators; RTL = mocking network; unit = misses integration bugs.

Questions

Why does React's diffing algorithm need the key prop?Role-specificmediumVery common

As asked

Sample answer outline

Expect these follow-ups

Debugging a stale closure bug inside useEffectRole-specificmediumVery common

As asked

Sample answer outline

Expect these follow-ups

How would you diagnose and fix a poor LCP score?Role-specifichardVery common

As asked

Sample answer outline

Expect these follow-ups

Why does React Context cause unnecessary re-renders and how do you fix it?Role-specificmediumVery common

As asked

Sample answer outline

Expect these follow-ups

When do you use ARIA roles versus semantic HTML elements?Role-specificmediumVery common

As asked

Sample answer outline

Expect these follow-ups

When do you reach for CSS Grid versus Flexbox?Role-specificeasyVery common

As asked

Sample answer outline

Expect these follow-ups

When should you actually use useMemo and useCallback?Role-specificmediumVery common

As asked

Sample answer outline

Expect these follow-ups

Hand off motion specs to engineeringRole-specificeasyCommon

As asked

Sample answer outline

Expect these follow-ups

How does React's Fiber reconciler decide what to re-render?Role-specifichardCommon

As asked

Sample answer outline

Expect these follow-ups

Using infer inside TypeScript conditional typesRole-specifichardCommon

As asked

Sample answer outline

Expect these follow-ups

How does a block formatting context actually isolate floats?Role-specificmediumCommon

As asked

Sample answer outline

Expect these follow-ups

What causes cumulative layout shift and how do you prevent it?Role-specificmediumCommon

As asked

Sample answer outline

Expect these follow-ups

How do you diagnose and fix a high INP score?Role-specifichardCommon

As asked

Sample answer outline

Expect these follow-ups

How does webpack split code at dynamic import boundaries?Role-specificmediumCommon

As asked

Sample answer outline

Expect these follow-ups

Trace the browser rendering pipeline from HTML bytes to pixelsRole-specificmediumCommon

As asked

Sample answer outline

Expect these follow-ups

Zustand versus Redux Toolkit: when would you choose each?Role-specificmediumCommon

As asked

Sample answer outline

Expect these follow-ups

Using discriminated unions to model API response variantsRole-specificmediumCommon

As asked

Sample answer outline

Expect these follow-ups

What is the mental model for React Server Components?Role-specifichardCommon

As asked

Sample answer outline

Expect these follow-ups

How does Next.js App Router implement streaming SSR?Role-specifichardCommon

As asked

Sample answer outline

Expect these follow-ups

How do WCAG contrast requirements work for interactive components?Role-specificeasyCommon

As asked

Sample answer outline