ReactJS Interview Prep - Performance Optimization (Part 3)

Question 1

What happens if you render a simple React list (using `.map()`) with 10,000 items in it?

Accepted Answer

Correct Answer

Answer

React automatically optimizes it.

Answer

The browser will likely freeze or crash. React will create 10,000 Virtual DOM nodes, and the browser will create 10,000 Real DOM nodes, consuming massive amounts of CPU and memory.

Answer

React restricts lists to 1000 items.

Answer

It renders instantly because of the Virtual DOM.

Question 2

What is 'List Virtualization' (or Windowing)?

Accepted Answer

Correct Answer

Answer

Rendering the list in a WebGL canvas.

Answer

A technique where you only render the exact DOM nodes that are currently visible in the user's viewport (e.g., 20 items). As the user scrolls, the nodes are dynamically replaced with new data, keeping the DOM node count extremely small.

Answer

Storing the list in Redux.

Answer

Using CSS `display: none` on hidden items.

Question 3

Why is using CSS `display: none` or `visibility: hidden` NOT the same as Virtualization?

Accepted Answer

Correct Answer

Answer

Because it breaks accessibility.

Answer

Because the hidden items are still physically present in the DOM. The browser still has to parse them and hold them in memory, meaning you still suffer the performance penalty of 10,000 nodes.

Answer

Because it is not supported in React.

Answer

There is no difference.

Question 4

What are Core Web Vitals (CWV)?

Accepted Answer

Correct Answer

Answer

React's internal performance metrics.

Answer

A set of standardized metrics established by Google that measure real-world user experience for loading performance, interactivity, and visual stability. They directly impact SEO rankings.

Answer

CSS properties for animation.

Answer

Webpack configuration flags.

Question 5

What does LCP stand for, and what does it measure?

Accepted Answer

Correct Answer

Answer

Lowest Component Performance.

Answer

Largest Contentful Paint. It measures loading performance by marking the exact time it takes for the largest text block or image (the 'hero' element) to become visible within the viewport.

Answer

List Component Paint.

Answer

Late CSS Parsing.

Question 6

How can you drastically improve the LCP of a React application?

Accepted Answer

Correct Answer

Answer

Wrap the app in Redux.

Answer

Use Server-Side Rendering (SSR) to send the hero image/text immediately in the HTML, optimize the hero image format (WebP), and preload the hero image.

Answer

Use `React.lazy` on the hero component.

Answer

Use `useEffect` for all rendering.

Question 7

What does CLS stand for, and what does it measure?

Accepted Answer

Correct Answer

Answer

Component Lifecycle State.

Answer

Cumulative Layout Shift. It measures visual stability. It calculates how much the page layout unexpectedly jumps around as asynchronous elements (images, ads, fonts) load in.

Answer

Cascading Layout Styles.

Answer

Client Load Speed.

Question 8

How do you prevent Cumulative Layout Shift (CLS) when loading images dynamically in React?

Accepted Answer

Correct Answer

Answer

Use CSS `position: absolute`.

Answer

Always explicitly set the `width` and `height` attributes (or CSS aspect-ratio) on `<img>` tags, or provide placeholder skeletons. This reserves the exact space in the layout before the image even downloads.

Answer

Wait for all images to load before rendering.

Answer

Use `useLayoutEffect` to resize the window.

Question 9

What does INP stand for (the metric that replaced FID)?

Accepted Answer

Correct Answer

Answer

Internal Network Protocol.

Answer

Interaction to Next Paint. It measures the latency of every single interaction (clicks, taps, keyboard inputs) across the entire lifespan of the page, checking how long it takes for the UI to visually respond.

Answer

Initial Node Parsing.

Answer

Inline Navigation Paint.

Question 10

How do you improve a poor INP (Interaction to Next Paint) score caused by heavy React rendering?

Accepted Answer

Correct Answer

Answer

Upgrade to a faster server.

Answer

Optimize components with `React.memo`, avoid massive synchronous state updates, and utilize React 18 Concurrent features (`useTransition`) to yield to the browser so it can paint the click state before doing heavy work.

Answer

Use Redux for all state.

Answer

Turn off CSS animations.

Question 11

What is the `content-visibility` CSS property, and how does it help React performance?

Accepted Answer

Correct Answer

Answer

It hides elements from screen readers.

Answer

Setting `content-visibility: auto` on offscreen sections tells the browser to skip rendering and layout calculations for that section entirely until it scrolls near the viewport, acting like native virtualization.

Answer

It makes text transparent.

Answer

It is a Webpack plugin.

Question 12

What is 'Debouncing' in the context of a React search input?

Accepted Answer

Correct Answer

Answer

Preventing the component from bouncing during animations.

Answer

A technique that delays the execution of a function (like an API call) until the user has stopped typing for a specific amount of time (e.g., 300ms).

Answer

Caching the search results.

Answer

Converting the input to lowercase.

Question 13

What is the difference between 'Debouncing' and 'Throttling'?

Accepted Answer

Correct Answer

Answer

They are the exact same thing.

Answer

Debouncing executes a function only AFTER the user stops the action. Throttling ensures a function is executed at a strict regular interval (e.g., exactly once every 100ms) AS LONG AS the action is ongoing.

Answer

Debounce is for APIs, Throttle is for React state.

Answer

Debounce is synchronous, Throttle is asynchronous.

Question 14

When implementing a debounced function in a React functional component, what common mistake do developers make?

Accepted Answer

Correct Answer

Answer

They use Redux.

Answer

They define the debounced function directly inside the render body. Because the component recreates the function on every render, the internal timer resets, and the debounce completely fails.

Answer

They use `setTimeout` instead of `setInterval`.

Answer

They use `useTransition`.

Question 15

How can Image Lazy Loading be implemented natively in modern browsers without third-party React libraries?

Accepted Answer

Correct Answer

Answer

It is impossible without libraries.

Answer

By simply adding the `loading="lazy"` attribute to the standard HTML `<img>` tag. The browser will automatically defer downloading the image until it nears the viewport.

Answer

By using CSS `background-image`.

Answer

By using an Intersection Observer hook exclusively.

Question 16

What is an `IntersectionObserver` used for in React performance optimization?

Accepted Answer

Correct Answer

Answer

To check if two elements overlap in CSS.

Answer

A browser API used to detect when an element enters or leaves the user's viewport. It is highly performant and used to build infinite scroll, custom lazy-loading, and triggering scroll animations.

Answer

To monitor network requests.

Answer

To observe Redux state changes.

Question 17

If a React application uses heavy SVG files as icons, what is the best way to optimize them?

Accepted Answer

Correct Answer

Answer

Convert them all to JPEG.

Answer

Inline them directly into the JSX so they can be styled with CSS, but use a bundler plugin (like SVGR) to compress them, remove unused XML tags, and implement an icon sprite sheet if there are hundreds of them.

Answer

Base64 encode them into Redux.

Answer

Render them inside an iframe.

Question 18

What is the 'Web Vitals' extension or Lighthouse tool used for?

Accepted Answer

Correct Answer

Answer

To write React tests.

Answer

To audit your application's performance, accessibility, SEO, and Core Web Vitals (LCP, CLS, INP) in a simulated network environment, providing an actionable score and improvement tips.

Answer

To compile SCSS to CSS.

Answer

To check for unused Redux actions.

Question 19

Why must performance profiling (Lighthouse, React Profiler) ALWAYS be done on a Production build of a React app?

Accepted Answer

Correct Answer

Answer

Because the Development server doesn't run on localhost.

Answer

Development builds include massive amounts of overhead: source maps, Strict Mode double-invocations, prop-type checking, and unminified code. Profiling a Dev build will give completely false, slow metrics.

Answer

Production builds are slower.

Answer

Because Redux DevTools disables profiling.

Question 20

What is 'Font subsetting' and how does it help React load times?

Accepted Answer

Correct Answer

Answer

Using smaller font sizes in CSS.

Answer

Taking a massive font file (which contains characters for 50 languages) and creating a smaller version that ONLY contains the characters actually used by your app (e.g., just Latin characters), reducing the file size by 80%.

Answer

Loading fonts asynchronously via Redux.

Answer

Using system fonts only.

Question 21

What is 'Throttling' the network in Chrome DevTools used for?

Accepted Answer

Correct Answer

Answer

Preventing DDoS attacks.

Answer

Simulating a slow mobile connection (e.g., 'Fast 3G' or 'Slow 3G') and CPU slowdown to experience how the React app performs on low-end devices, exposing bottlenecks missed on high-end developer machines.

Answer

Bypassing CORS restrictions.

Answer

Testing WebSocket connections.

Question 22

How does Next.js handle image optimization natively via the `<Image>` component?

Accepted Answer

Correct Answer

Answer

It doesn't, it just renders an HTML `<img>` tag.

Answer

It automatically resizes, compresses, and converts images to modern formats (like WebP/AVIF) on the server, and automatically applies lazy-loading and CLS prevention placeholders on the client.

Answer

It stores images in a blockchain.

Answer

It converts images to SVG.

Question 23

What is a 'Memory Leak' in a React SPA?

Accepted Answer

Correct Answer

Answer

When local storage exceeds 5MB.

Answer

When components allocate memory (e.g., setting up an event listener, a `setInterval`, or a WebSocket) but fail to clean them up when the component unmounts. Over time, the browser consumes all RAM and crashes.

Answer

When Redux actions are too large.

Answer

When the Virtual DOM parses CSS.

Question 24

How do you detect a Memory Leak in a React app using Chrome DevTools?

Accepted Answer

Correct Answer

Answer

By looking at the Network tab.

Answer

By using the 'Memory' tab to take Heap Snapshots at different times (e.g., before and after opening/closing a modal multiple times) and comparing them to see if detached DOM nodes or arrays are failing to garbage collect.

Answer

By checking the Lighthouse score.

Answer

By inspecting Redux.

Question 25

Which of the following is a classic sign that a React application has severe performance architecture issues?

Accepted Answer

Correct Answer

Answer

The bundle size is 50kb.

Answer

Typing a single character into a controlled text input causes a noticeable visual delay/lag before the character appears on the screen.

Answer

The app uses Redux Toolkit.

Answer

Images load lazily as you scroll.

Academy

ReactJS Interview Prep - Performance Optimization (Part 3)