Performance
508 bites tagged Performance — interview questions with model answers, and 60-second explainers.
How would you use DocumentFragment to optimize adding 1,000 list items?
Tests DOM reflow/repaint costs and off-DOM batching. A strong answer: create a DocumentFragment, build the 1,000 nodes off-DOM, then append once to trigger a single reflow. Red flag: claiming it saves memory or confusing it with innerHTML batching.
Offload CPU-intensive work to a Web Worker and explain communication.
This tests main-thread blocking and worker messaging. A strong answer covers: new Worker(url), moving logic to a worker file, sending data via postMessage(), and receiving results via onmessage. A red flag is suggesting DOM use or shared memory from workers.
Describe the difference between DOMContentLoaded and window.load
This tests critical rendering path knowledge. DOMContentLoaded fires after HTML parsing and deferred scripts, while load waits for all subresources; use the former to bind UI early. Defaulting to load, which stalls interactivity until images finish.
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.
How to implement a derived Redux slice performantly and maintainably?
This tests minimal state and memoized selector design. Use Reselect's createSelector to compute data from multiple slices, keeping state minimal and avoiding redundant work. A red flag is storing derived values in Redux or recalculating without memoization.
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 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.
Why did React replace the Stack Reconciler with Fiber?
Tests React scheduling limits. Good answers note the old reconciler was synchronous and recursive, blocking the main thread, while Fiber enables incremental rendering and interruptible work. Red flag: citing Hooks or vague speed claims without frame budgets.
How can you use Edge Middleware for auth and trade-offs versus getServerSideProps?
Middleware checks cookies/JWT for fast Edge rewrites/redirects; getServerSideProps uses full Node.js for heavy sessions with colder starts. Auth placement judgment. Claiming Edge Middleware can query a database directly.
Implement a custom next/image loader for a self-hosted service
Tests next/image loader contract and URL construction. A strong answer defines a function taking src, width, and quality; returns a URL string for your service; and wires it via the loader prop or loaderFile config.
Explain how next/image's sizes prop works for responsive performance
This tests your knowledge of the browser responsive image algorithm. The sizes prop declares the rendered width at each breakpoint so the browser can select the smallest adequate srcset candidate.
What are the benefits of next/image over a standard img tag?
Tests knowledge of Next.js image infrastructure. Strong answers mention automatic optimization, lazy loading, blur placeholders for layout shift, and responsive srcset. Red flag: calling it a zero-impact wrapper or a styling component.
Explain atomic state management and how it differs from Redux
This tests bottom-up vs top-down architecture. Good response contrasts atom graphs with Redux's monolithic store, notes atoms avoid extra rerenders sans selectors, and flags granular subscriptions.
How do you select a single property and prevent extra re-renders?
Tests selector granularity and reference equality in subscriptions. Great answer: return a primitive via a focused selector; for objects, memoize with createSelector or pass shallowEqual. Red flag: reaching for useMemo or React.memo before fixing the selector.
Explain list virtualization and when it beats React.memo
This tests whether you know React.memo skips re-renders but leaves off-screen nodes in the DOM. A strong answer describes virtualization mounting only visible items to cut memory use. A red flag is claiming memoization fixes jank or saves memory for big lists.
How would you avoid new functions per list item without useCallback?
Tests stable handler patterns for large lists. Answer: define one handler outside the map, attach it to every item, and read the id from a data-id attribute via currentTarget.dataset.id. Or use event delegation on the parent. Red flag: useCallback in loop.
React Profiler long render duration: causes and next steps?
Tests interpreting actualDuration vs baseDuration. Outline: close values on updates mean broken memoization—add memo or useMemo; high baseDuration alone means an inherently slow subtree. Red flag: proposing fixes before comparing these two Profiler metrics.
How do React.lazy and dynamic import() enable code splitting?
It tests your grasp of React code-splitting and the Suspense contract. A strong answer states that lazy defers loading until first render via dynamic import, and Suspense shows a fallback while the Promise resolves.
When can overusing useMemo hurt performance and what are the trade-offs?
Memoizing cheap work wastes cycles, increases memory use, and burdens dependency tracking. Awareness that useMemo has memory and comparison overhead. Claiming useMemo is free or automatically blocks child re-renders.
How would you use React Profiler to find unnecessary re-renders?
This tests the Profiler for wasted renders. A good answer covers wrapping a subtree in Profiler, comparing actualDuration to baseDuration on updates, and checking for missing memoization. Red flag: mentioning only the browser extension without timing metrics.
Child re-renders with unchanged props: function identity and useCallback fix
This tests reference equality and React memoization. A strong answer says inline functions recreate on every parent render, breaking React.memo, and uses useCallback with a correct dependency array. A red flag is ignoring identity or omitting dependencies.
Explain the difference between React.memo and useMemo
React.memo skips re-renders when props match; useMemo caches a computed value between renders. whether you distinguish component-level memo from value caching. saying they are interchangeable or both stop re-renders.
Get Performance bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.