Performance Interview Questions

Trace the browser rendering pipeline to see why only two properties can animate on the compositor, and what animating width or top costs instead.

Walk the full pipeline from DOM to screen, see where each property enters, and derive the animation cost hierarchy from first principles.

Learn how content-visibility: auto skips layout and paint for off-screen subtrees, why contain-intrinsic-size is mandatory, and what it costs in searchability.

Understand forced synchronous layout, the read-write interleaving that triggers it, and the batching and containment strategies that eliminate it.

Learn how to control function execution rates using debouncing and throttling for performance optimization.

Learn what causes memory leaks in JavaScript and how to prevent them in web apps and Node.js.

Use event delegation to reduce listeners, support dynamic elements, and improve performance with advanced patterns.

Diagnose memory growth, understand mark-and-sweep, and apply strategies to prevent leaks in web apps and Node services.

Build a lightweight lazy-loading system that defers image downloads until images approach the viewport.

Move CPU-heavy tasks off the main thread with Web Workers, error handling, transferable objects, and fallback strategies.

Learn how to create a custom debounce function that supports leading-edge, trailing-edge, or both firing modes.

Implement efficient infinite scrolling using IntersectionObserver, batching, and virtualized rendering.

Build a high-performance resize handler using timestamp-based throttle and requestAnimationFrame to avoid layout thrashing.

Process large datasets without freezing the UI using setTimeout, requestIdleCallback, or Web Workers.

Understand what the Context API provides, what Redux adds on top of it, and how to decide which to reach for in a given situation.

Understand the heuristics React uses to compare virtual DOM trees efficiently and how keys enable correct list reconciliation.

Understand what the virtual DOM is, how it enables efficient updates, and what its real performance tradeoffs are.

Debouncing delays execution until a user pauses. Build a useDebounce hook with setTimeout and clearTimeout cleanup in useEffect. Use it for search inputs that fetch from an API. Do not debounce client-side filtering — use derived state instead.

React.lazy wraps a dynamic import() so the component code is fetched only when first rendered, not included in the initial bundle. Suspense shows a fallback during the load. Always pair with an ErrorBoundary to handle chunk load failures. React.lazy requires default exports.

React.memo skips re-rendering a component when props are shallowly equal to the previous render. Inline objects and function props silently defeat it — pair with useMemo and useCallback on the parent side. Profile first; memo adds comparison overhead and should be applied surgically.

useMemo caches the return value of a factory function and recomputes only when listed dependencies change. It prevents unrelated state changes from re-triggering expensive computations. It does not make a slow computation fast — when the dependency that drives the expense changes, the work runs regardless.

useMemo caches a computed value; useCallback caches a function reference. useCallback(fn, deps) is equivalent to useMemo(() => fn, deps). useCallback without React.memo on the child adds overhead with no benefit. Both require an accurate dependency array to avoid stale closures.

Use useEffect without a dependency array to run logic after every render, and understand when this pattern is appropriate versus problematic.

Use useReducer, a counter state, or the key prop to force a component to re-render or fully reset without relying on useState directly.

Understand what triggers React re-renders, how to use state and props correctly, and how to prevent unnecessary re-renders.

Design a high-performance virtualized list capable of rendering 100k+ rows with minimal DOM nodes, supporting variable heights, infinite scroll, and windowing strategies.