ReactJS Interview Prep - Performance Optimization (Part 5)

Question 1

Why should you avoid animating CSS properties like `width`, `height`, `margin`, or `top`/`left`?

Accepted Answer

Correct Answer

Answer

Because they don't look good.

Answer

Because changing layout properties forces the browser to recalculate the Layout (Reflow) of the entire page document, which is a massive CPU bottleneck and causes frame drops (jank).

Answer

Because they are not supported in React.

Answer

Because they require WebGL.

Question 2

What is 'Request Waterfalling' in React data fetching?

Accepted Answer

Correct Answer

Answer

When data flows down through props.

Answer

When API request B cannot start until API request A finishes, because B depends on A's data (or because they are sequentially awaited in a `useEffect`). This drastically increases total load time.

Answer

When the browser drops API requests.

Answer

When Redux actions cascade.

Question 3

How do you solve a Request Waterfall when fetching independent data (e.g., fetching User Profile AND fetching Global Config)?

Accepted Answer

Correct Answer

Answer

Use `setTimeout`.

Answer

Initiate both fetch promises simultaneously outside of an `await`, or use `Promise.all([fetchUser(), fetchConfig()])` so they execute in parallel.

Answer

Use `React.lazy`.

Answer

Use `useCallback`.

Question 4

What is the N+1 query problem, often seen when fetching data for a list in React?

Accepted Answer

Correct Answer

Answer

A mathematics error in Redux.

Answer

Fetching a list of 50 users (1 query), and then mapping over that array in React to fetch the avatar image for EACH user individually (50 queries). This results in 51 total network requests.

Answer

When pagination fails to increment.

Answer

When the API returns too much data.

Question 5

Why is GraphQL often considered a performance upgrade over REST for complex React applications?

Accepted Answer

Correct Answer

Answer

It uses WebSockets.

Answer

It eliminates Over-fetching (downloading a 5MB JSON object when you only needed the user's name) and Under-fetching (requiring 5 separate API calls to assemble the data for one page).

Answer

It is compiled to C++.

Answer

It bypasses the browser cache.

Question 6

What is 'Over-fetching'?

Accepted Answer

Correct Answer

Answer

Clicking a button too many times.

Answer

When an API endpoint returns significantly more data than the React component actually needs to render. E.g., the endpoint returns a 200-property user object, but the UI only displays the `username`.

Answer

When React renders too often.

Answer

When the Virtual DOM is too large.

Question 7

How does React Query's caching mechanism improve perceived performance?

Accepted Answer

Correct Answer

Answer

It uses Service Workers.

Answer

If a user navigates to a dashboard, leaves, and comes back, React Query immediately displays the cached 'stale' data on the screen (zero loading spinner), while silently refetching fresh data in the background.

Answer

It stores data in the Redux store.

Answer

It compresses JSON data.

Question 8

What is the performance implication of attaching a `window.addEventListener('scroll', fn)` inside a React `useEffect`?

Accepted Answer

Correct Answer

Answer

It is highly performant.

Answer

The scroll event fires hundreds of times per second. If the function updates React state, it will trigger hundreds of React renders per second, completely freezing the UI. It MUST be throttled.

Answer

It crashes the server.

Answer

It only works on desktop.

Question 9

What is `requestAnimationFrame` (rAF)?

Accepted Answer

Correct Answer

Answer

A React hook for CSS.

Answer

A browser API that tells the browser you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint (typically synced to 60fps).

Answer

A tool for rendering video.

Answer

A Redux middleware.

Question 10

If you cannot animate `width` or `top`, which CSS properties SHOULD you animate for high performance (e.g., sliding a drawer open)?

Accepted Answer

Correct Answer

Answer

`padding` and `border`.

Answer

`transform` (translate, scale, rotate) and `opacity`. These properties are handled exclusively by the GPU (Compositor thread), bypassing the heavy CPU Layout and Paint phases entirely.

Answer

`color` and `background-color`.

Answer

`z-index` and `display`.

Question 11

What is 'Layout Thrashing'?

Accepted Answer

Correct Answer

Answer

When flexbox is misconfigured.

Answer

When Javascript rapidly alternates between READING a DOM property (like `element.offsetWidth`) and WRITING a DOM property (like `element.style.width = ...`). This forces the browser to synchronously recalculate the layout repeatedly in a single frame.

Answer

When React re-renders too fast.

Answer

When CSS Grid elements overlap.

Question 12

How can the `will-change` CSS property improve React animation performance?

Accepted Answer

Correct Answer

Answer

It tells React to use `React.memo`.

Answer

Setting `will-change: transform` on an element tells the browser ahead of time that the element is going to move. The browser elevates it to its own GPU layer, preventing it from affecting surrounding elements during the animation.

Answer

It prevents CSS inheritance.

Answer

It converts the element to a canvas.

Question 13

What is the purpose of the `React.StrictMode` component wrapper?

Accepted Answer

Correct Answer

Answer

It forces production builds.

Answer

It intentionally double-invokes components, `useState` initializers, and `useEffect` setups IN DEVELOPMENT ONLY. This helps expose hidden side effects, mutability bugs, and memory leaks before they reach production.

Answer

It blocks all console logs.

Answer

It enforces TypeScript typing.

Question 14

How does Service Worker caching (PWA) improve React performance?

Accepted Answer

Correct Answer

Answer

It executes Javascript on the server.

Answer

A Service Worker acts as a local proxy. It can intercept network requests and serve the JS bundle, CSS, and API responses directly from the device's hard drive, allowing the app to load instantly even offline.

Answer

It compresses images natively.

Answer

It replaces the Virtual DOM.

Question 15

What is the danger of caching `index.html` too aggressively via Cache-Control headers?

Accepted Answer

Correct Answer

Answer

It takes up too much server space.

Answer

If `index.html` is cached for a month, the user's browser will NEVER ask the server for updates. Even if you deploy a critical bug fix and new JS bundles, the user will be stuck loading the old site.

Answer

It breaks React Router.

Answer

It corrupts LocalStorage.

Question 16

What does a 'Content Delivery Network' (CDN) do for a React SPA?

Accepted Answer

Correct Answer

Answer

It renders React on the edge.

Answer

It replicates your static build files (`index.html`, JS, CSS, images) across hundreds of servers globally. If a user in Tokyo opens your site, they download the files from a server in Tokyo, not New York, slashing latency.

Answer

It secures the database.

Answer

It manages Redux state.

Question 17

Why is it recommended to place `

Accepted Answer

Correct Answer

Answer

Because scripts must execute last.

Answer

Because scripts are render-blocking. If a `

Answer

Because it prevents XSS.

Answer

Because React requires it.

Question 18

What is the difference between `

Accepted Answer

Correct Answer

Answer

They are identical.

Answer

`async` executes the script the absolute millisecond it finishes downloading, pausing the HTML parser. `defer` waits until the ENTIRE HTML document is fully parsed before executing the script in order.

Answer

`async` is for React, `defer` is for Angular.

Answer

`async` requires a Promise.

Question 19

How does the 'Image Sprite' technique work?

Accepted Answer

Correct Answer

Answer

Converting images to text.

Answer

Combining dozens of small images (like icons or logos) into one single massive image file. You then use CSS `background-position` to show only the specific part of the image needed. It drastically reduces HTTP requests.

Answer

Animating an image.

Answer

Lazy loading images.

Question 20

What is the primary cause of a 'Long Task' in the browser main thread?

Accepted Answer

Correct Answer

Answer

Downloading a large video.

Answer

A JavaScript function (e.g., parsing a massive JSON array, complex mathematical sorting, or heavy React reconciliation) that takes longer than 50 milliseconds to execute, freezing the browser UI during that time.

Answer

A slow CSS transition.

Answer

A delayed API response.

Question 21

How can you offload a massive mathematical calculation (like parsing a 50MB CSV file) so it doesn't freeze the React UI?

Accepted Answer

Correct Answer

Answer

Wrap it in `useMemo`.

Answer

Move the calculation to a Web Worker. Web Workers run in a completely separate background thread from the main UI thread. They calculate the data and post the result back to React without freezing the browser.

Answer

Wrap it in `startTransition`.

Answer

Use Server-Side Rendering.

Question 22

What is the performance benefit of 'Pagination' or 'Infinite Scrolling'?

Accepted Answer

Correct Answer

Answer

It improves SEO.

Answer

It limits the amount of data requested from the server and the number of DOM nodes rendered by React at any given time. Requesting 20 items is infinitely faster than requesting 10,000 items.

Answer

It makes the URL shorter.

Answer

It prevents Redux crashes.

Question 23

If your React application includes a massive library like `three.js` (for 3D rendering), but it is only used on one specific page, what should you do?

Accepted Answer

Correct Answer

Answer

Import it at the top of `App.js`.

Answer

Use route-based Code Splitting (`React.lazy`) for that specific page, so the 1MB `three.js` library is completely excluded from the main bundle and only downloaded when users visit the 3D page.

Answer

Delete the library.

Answer

Use it in a Web Worker.

Question 24

What is 'Optimistic UI' updates?

Accepted Answer

Correct Answer

Answer

Using positive variable names.

Answer

When the user clicks 'Like', you immediately update the React state to show the liked heart (instant UI feedback), and THEN fire the API request in the background. If the request fails, you roll back the state.

Answer

Showing a loading spinner forever.

Answer

Waiting for the server to confirm before painting.

Question 25

What does 'TTFB' stand for and why is it important?

Accepted Answer

Correct Answer

Answer

Time to First Byte. It measures the latency of the server and network. If TTFB is 2 seconds, your React app cannot even begin to download or parse for 2 seconds, destroying all other metrics.

Answer

Time to Final Build.

Answer

Text to Font Binding.

Answer

Thread to Fetch Background.

Academy

ReactJS Interview Prep - Performance Optimization (Part 5)