ReactJS Interview Prep - Performance Optimization

Question 1

How does `React.memo` improve performance in a React application?

Accepted Answer

Correct Answer

Answer

It serves as a React Hook that memoizes expensive calculations inside a component.

Answer

It deeply memoizes local component state to prevent it from being garbage collected.

Answer

It is an optimization exclusively available for traditional class components.

Answer

It is a higher-order component that prevents unnecessary re-renders if a component's props have not changed.

Question 2

What does the concept of 'Code Splitting' refer to in the context of React performance?

Accepted Answer

Correct Answer

Answer

A core feature of Redux for separating reducers.

Answer

The practice of writing smaller, highly granular component functions.

Answer

Loading JavaScript bundles dynamically and incrementally rather than as one massive file.

Answer

Separating large CSS files into component-level modules.

Question 3

How does 'Lazy Loading' specifically optimize a React application?

Accepted Answer

Correct Answer

Answer

By loading certain components or resources only when they are actually needed (e.g., when they enter the viewport).

Answer

By intentionally slowing down the rendering engine to prevent mobile devices from overheating.

Answer

By utilizing CSS animations to fade elements in slowly.

Answer

By enforcing that all components load simultaneously during the initial mount.

Question 4

What problem does 'List Virtualization' (or windowing) solve in React?

Accepted Answer

Correct Answer

Answer

It allows Webpack to compress array data more efficiently.

Answer

It forces the browser to render all list rows in background memory simultaneously.

Answer

It improves performance by only rendering the specific list rows that are currently visible on the screen.

Answer

It implements 3D Virtual Reality interfaces within React DOM.

Question 5

What is the primary distinction between the `useMemo` and `useCallback` hooks?

Accepted Answer

Correct Answer

Answer

`useMemo` caches functions, while `useCallback` caches values.

Answer

Neither hook actually caches anything; they are just syntactic sugar for `useState`.

Answer

They are completely identical and can be used interchangeably in any scenario.

Answer

`useMemo` caches the result of an expensive calculation, while `useCallback` caches a function definition.

Question 6

Which combination of techniques is most effective for preventing unnecessary child component re-renders?

Accepted Answer

Correct Answer

Answer

Removing all `key` props from mapped lists.

Answer

Manually calling `forceUpdate()` inside the child component.

Answer

Passing inline anonymous functions directly via props.

Answer

Wrapping the child in `React.memo` and ensuring stable prop references using primitives or `useCallback`/`useMemo`.

Question 7

What is the primary role of the `<Suspense>` component in React?

Accepted Answer

Correct Answer

Answer

It is exclusively used to catch and handle errors from data fetching.

Answer

It entirely halts the application's event loop to prioritize synchronous tasks.

Answer

It serves as a specialized middleware specifically for Redux actions.

Answer

It lets you specify a fallback UI (like a loading spinner) to display while its children are loading asynchronously.

Question 8

How does 'Tree Shaking' impact a React application's bundle size?

Accepted Answer

Correct Answer

Answer

It analyzes the code and eliminates unused exports (dead code), effectively reducing the final JavaScript bundle size.

Answer

It only minifies and compresses CSS files, having no impact on JavaScript.

Answer

It is completely irrelevant to performance and only helps organize project files.

Answer

It deliberately increases bundle size to include comprehensive debugging maps.

Question 9

Why are Throttling and Debouncing commonly used in React?

Accepted Answer

Correct Answer

Answer

To generate complex CSS animations natively.

Answer

To synthetically increase the frame rate of the browser's render cycle.

Answer

To act as modern alternatives to the `useEffect` hook.

Answer

To limit the execution rate of a function (like a search API call) that is tied to rapid events like scrolling or typing.

Question 10

What is the specific purpose of the React Profiler?

Accepted Answer

Correct Answer

Answer

It is an automated testing library similar to Jest.

Answer

It measures how often a React application renders and identifies the 'cost' of those renders to find bottlenecks.

Answer

It automatically deploys the application to production environments.

Answer

It serves as an AI tool that writes optimized React code automatically.

Question 11

How does React 18's 'Automatic Batching' feature improve overall performance?

Accepted Answer

Correct Answer

Answer

It automatically groups multiple state updates (even inside promises and timeouts) into a single re-render.

Answer

It automatically minifies and compresses CSS and JS files on the fly.

Answer

It batches multiple asynchronous API network requests into a single HTTP request.

Answer

It physically combines multiple separate component files into one monolithic file.

Question 12

In the context of performance, why is passing anonymous functions directly in props generally discouraged?

Accepted Answer

Correct Answer

Answer

They inherently cause severe memory leaks over time.

Answer

They are syntactically invalid and will throw strict-mode errors.

Answer

A brand new function reference is created on every render, which can break memoization in child components.

Answer

They permanently block the main browser thread during execution.

Question 13

How can splitting a large React Context into multiple smaller Contexts improve performance?

Accepted Answer

Correct Answer

Answer

It directly reduces the total size of the final JavaScript bundle.

Answer

It allows the server to perform faster server-side rendering (SSR).

Answer

It prevents components from re-rendering if they only consume a specific piece of state that hasn't actually changed.

Answer

It eliminates the need for any backend database integration.

Question 14

Why is using an array index as a 'key' in a mapped React list potentially bad for performance?

Accepted Answer

Correct Answer

Answer

It throws a hard compilation error in modern React.

Answer

If the list order changes, it confuses React's reconciliation algorithm, leading to incorrect DOM updates and unnecessary re-renders.

Answer

It makes the list items completely impossible to target with CSS.

Answer

It allocates too much memory per item in the virtual DOM.

Question 15

How does the `useTransition` hook assist with React performance optimization?

Accepted Answer

Correct Answer

Answer

It efficiently applies CSS hardware-accelerated transitions to DOM elements.

Answer

It allows you to prioritize urgent UI updates (like typing) while deferring non-urgent rendering tasks (like filtering a massive list).

Answer

It pre-loads the assets for the next page route in the background.

Answer

It automatically converts legacy class components into functional components.

Question 16

What specific performance optimization does the `useDeferredValue` hook offer?

Accepted Answer

Correct Answer

Answer

It forcibly pauses the JavaScript execution thread for a set amount of time.

Answer

It creates a stale copy of a value to render immediately, while computing the fresh value in the background.

Answer

It acts exactly like a native `setTimeout` but without the callback syntax.

Answer

It intelligently defers the loading of off-screen image assets.

Question 17

How does Server-Side Rendering (SSR) typically improve the perceived performance of a React app?

Accepted Answer

Correct Answer

Answer

It moves all JavaScript execution to the backend, sending absolutely no JS to the client.

Answer

It deeply compresses the React library source code.

Answer

It delivers a fully rendered HTML page to the client faster, significantly reducing the Time to First Paint (TTFP).

Answer

It relies exclusively on WebSockets for faster client-server data transfer.

Question 18

What is the primary performance benefit of implementing a Web Worker in a React application?

Accepted Answer

Correct Answer

Answer

It manipulates and renders the Virtual DOM significantly faster.

Answer

It offloads heavy, CPU-intensive computations to a background thread, preventing the main UI thread from freezing.

Answer

It intercepts and compresses API network responses automatically.

Answer

It serves as a persistent, ultra-fast local database for Redux state.

Question 19

How did the `shouldComponentUpdate` lifecycle method optimize performance in legacy Class components?

Accepted Answer

Correct Answer

Answer

It automatically memoized all incoming props.

Answer

It allowed developers to return a boolean to manually skip the rendering process if props or state had not meaningfully changed.

Answer

It forced the component to update synchronously and instantly.

Answer

It automatically converted the component into a more efficient functional component.

Question 20

In the context of optimizing media in a React application, what does 'lazy loading' images accomplish?

Accepted Answer

Correct Answer

Answer

It automatically reduces the native resolution and quality of the image.

Answer

It forces the browser to only download images when they are about to enter the visible viewport, saving bandwidth and improving initial load time.

Answer

It dynamically converts all standard images to the highly compressed WebP format.

Answer

It securely caches all images directly into the browser's localStorage.

Question 21

Why might passing a newly created inline object as a prop (e.g., `style={{ color: 'red' }}`) cause performance issues?

Accepted Answer

Correct Answer

Answer

React explicitly does not support passing objects as props.

Answer

It triggers a fatal syntax error when running in Strict Mode.

Answer

It creates a new memory reference on every render, which defeats the optimization checks of `React.memo`.

Answer

It automatically triggers an asynchronous background API call.

Question 22

How does 'Tree Shaking' directly improve the performance of a React application?

Accepted Answer

Correct Answer

Answer

It 'shakes' the DOM tree to identify and remove unused HTML nodes at runtime.

Answer

It statically analyzes the codebase and removes unused code (dead code) from the final JavaScript bundle during the build process.

Answer

It automatically balances the component tree structure to avoid deep, inefficient nesting.

Answer

It minifies and purges unused CSS selectors.

Question 23

How does deep or excessive component nesting negatively affect React performance?

Accepted Answer

Correct Answer

Answer

It has absolutely no effect on performance in modern React versions.

Answer

It arbitrarily speeds up the Virtual DOM diffing process by isolating changes.

Answer

It significantly increases the time it takes for React to reconcile the Virtual DOM, as it must traverse a deeper, heavier tree.

Answer

It aggressively prevents necessary garbage collection, causing memory leaks.

Question 24

What fundamental problem do Concurrent Features in React 18 (like Suspense and `useTransition`) aim to solve?

Accepted Answer

Correct Answer

Answer

They are designed to completely replace external state management libraries like Redux.

Answer

They solve lingering cross-browser compatibility rendering issues.

Answer

They allow React to pause, resume, or abandon rendering work in the background to keep the main thread highly responsive to user input.

Answer

They enforce that all initial rendering logic must happen purely on the server.

Question 25

When dynamically importing a component using `React.lazy`, what is required to prevent the application from crashing while it loads?

Accepted Answer

Correct Answer

Answer

A standard Class-based `ErrorBoundary` component.

Answer

Wrapping the lazy component inside a `<Suspense>` boundary to provide a fallback UI.

Answer

Setting a manual `setTimeout` delay directly within the dynamic import statement.

Answer

Wrapping the imported component definition inside a `useMemo` hook.

Academy

ReactJS Interview Prep - Performance Optimization