Question 1

How do you identify and fix Unnecessary Re-renders with the React DevTools Profiler?

Accepted Answer

Record an interaction with the Profiler and inspect the Flamegraph to see which components rendered and how long they took; check the "Why did this render?" panel.

Question 2

What is Virtualization (Windowing), and how do you use TanStack Virtual to display huge lists?

Accepted Answer

It renders only DOM items currently visible in the Viewport, keeping the DOM small and the browser responsive even with millions of rows.

Question 3

What does React.memo cost, and why should you not use it by default on every component?

Accepted Answer

React.memo adds a Shallow Compare of every prop on each render; if props always change or the component is simple, that comparison is extra work without benefit.

Question 4

How does dynamic Code Splitting affect Core Web Vitals (LCP, FID/INP, CLS)?

Accepted Answer

It reduces the initial JavaScript bundle, speeding up code parsing and loading in the browser, improving LCP and INP, and preventing Main Thread Blocking.

Question 5

What is Layout Thrashing, and how do you avoid it in React components?

Accepted Answer

It occurs when DOM measurements (such as offsetHeight) alternate with DOM style changes in a fast loop, forcing the browser to repeat expensive layout calculations (Reflow).

Question 6

How do you use Web Workers to move heavy calculations out of the Main Thread in React applications?

Accepted Answer

Use Web Workers to process large datasets and decode files on a separate background thread, keeping the UI smooth and responsive at 60fps.

Question 7

What image-loading techniques prevent Cumulative Layout Shift (CLS) in React applications?

Accepted Answer

Set fixed width and height or aspect-ratio in CSS, use lazy loading with loading="lazy", and provide modern formats such as WebP and AVIF.

Question 8

How do you find common Memory Leaks in React applications with Chrome's Memory Tab?

Accepted Answer

Take and compare Heap Snapshots before and after opening and closing app screens, looking for Detached DOM Nodes or unreleased components.

Question 9

How do you avoid creating new objects and references (Inline Objects & Arrays) in a component body during Render?

Accepted Answer

Define constants outside the component function if they do not depend on Props, or use useMemo to keep the same reference for objects that depend on props and are passed to child components.

Question 10

What are the benefits and challenges of Transitions for splitting work in React 18?

Accepted Answer

Transitions keep the interface responsive during heavy work; the challenge is handling temporary Pending States and understanding concurrent UI update ordering.