ReactJS Interview Prep - Performance Optimization (Part 4)

Question 1

What does 'Concurrent Rendering' mean in React 18?

Accepted Answer

Correct Answer

Answer

React uses Web Workers to render in the background.

Answer

React can pause, abort, or yield a render in the middle of calculating the Virtual DOM. This allows React to prioritize urgent updates (like typing in an input) over non-urgent updates (like filtering a massive list).

Answer

React renders multiple DOM nodes simultaneously using GPU acceleration.

Answer

React ignores all state updates.

Question 2

How do you explicitly mark a state update as 'non-urgent' in React 18?

Accepted Answer

Correct Answer

Answer

Use `setTimeout(..., 0)`.

Answer

Wrap the state setter function inside the `startTransition` API (or use the `useTransition` hook).

Answer

Pass a `priority="low"` prop.

Answer

Use the `useDeferredValue` hook on the state setter.

Question 3

What is the primary difference between `useTransition` and `useDeferredValue`?

Accepted Answer

Correct Answer

Answer

They are the exact same thing.

Answer

`useTransition` is used to wrap a state *setter* function (an action). `useDeferredValue` is used to wrap a *value* (often passed down as a prop) when you don't have access to the state setter function.

Answer

`useTransition` is for CSS, `useDeferredValue` is for JS.

Answer

`useTransition` works on the server, `useDeferredValue` works on the client.

Question 4

When using `useTransition`, what does the `isPending` boolean return?

Accepted Answer

Correct Answer

Answer

True if the network request is loading.

Answer

True if React is currently working on calculating the non-urgent background render triggered by `startTransition`. You can use this to show a subtle loading spinner.

Answer

True if the component is mounted.

Answer

True if there is an error.

Question 5

If a user types 'A', then rapidly types 'B' into a text input whose state update is wrapped in `startTransition`, what happens under the hood?

Accepted Answer

Correct Answer

Answer

React crashes.

Answer

React starts rendering the heavy list for 'A'. When 'B' is typed, React ABORTS the render for 'A', discards the work, and immediately starts a new render for 'B'.

Answer

React renders 'A', freezes, then renders 'B'.

Answer

React ignores 'B' until 'A' is finished.

Question 6

Is it a good idea to wrap EVERY single state update in `startTransition` to make the app 'faster'?

Accepted Answer

Correct Answer

Answer

Yes, it makes the entire app concurrent.

Answer

No. Transitions have overhead. Wrapping urgent updates (like typing in an input field or opening a modal) in a transition will make the UI feel sluggish and unresponsive.

Answer

Yes, but only in production.

Answer

Yes, React explicitly recommends it.

Question 7

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 8

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 9

What is the primary difference between `useMemo` and `React.memo`?

Accepted Answer

Correct Answer

Answer

They are aliases for the same function.

Answer

`React.memo` is a Higher Order Component that wraps a whole component to prevent re-renders if props don't change. `useMemo` is a hook used inside a component to cache the result of an expensive calculation.

Answer

`useMemo` is for classes, `React.memo` is for functional components.

Answer

`useMemo` caches JSX, `React.memo` caches functions.

Question 10

What is the 'Rule of 3' for applying `React.memo`?

Accepted Answer

Correct Answer

Answer

Only apply it to 3 components per file.

Answer

Apply it if the component renders often, if the component is computationally expensive, AND if the component's props rarely change. If it fails these, memoization is likely slower than just re-rendering.

Answer

Apply it to 3 levels deep.

Answer

Only apply it in React 3.0+.

Question 11

How does `useCallback` prevent unnecessary child re-renders?

Accepted Answer

Correct Answer

Answer

It stops the parent from rendering.

Answer

If a parent passes an inline function `<Child onClick={() => {}} />`, the child sees a new function reference every render and re-renders (even if wrapped in `React.memo`). `useCallback` caches that function reference.

Answer

It caches the child's HTML.

Answer

It turns the function into a string.

Question 12

What is 'State Colocation' and why is it a massive performance optimization?

Accepted Answer

Correct Answer

Answer

Storing all state in one giant Redux store.

Answer

Moving state physically down the component tree as close as possible to where it is actually used. This prevents massive top-level components from re-rendering the entire app for localized state changes.

Answer

Storing state in LocalStorage.

Answer

Sharing state across multiple windows.

Question 13

What is the 'Children Prop Pattern' (or Component Composition) in relation to performance?

Accepted Answer

Correct Answer

Answer

Passing arrays as props.

Answer

Passing heavy components down as the `children` prop. When the wrapper component updates its local state, it re-renders itself, but React knows the `children` prop hasn't changed, skipping their render entirely.

Answer

Rendering children using `.map()`.

Answer

Using Context for children.

Question 14

Why should you never derive state directly inside the render body if the derivation is computationally expensive?

Accepted Answer

Correct Answer

Answer

It causes a syntax error.

Answer

Because it will recalculate on every single render. You must wrap the derivation in `useMemo` so it only recalculates when the source data actually changes.

Answer

It violates ESLint rules.

Answer

It causes an infinite loop.

Question 15

What does the `eslint-plugin-react-hooks` 'exhaustive-deps' rule do, and why is it crucial for performance?

Accepted Answer

Correct Answer

Answer

It prevents infinite loops.

Answer

It ensures you don't miss dependencies in `useEffect`/`useMemo` arrays. Missing a dependency means the memoized value goes stale (bugs). Over-including dependencies means it recalculates too often (bad performance).

Answer

It deletes unused CSS.

Answer

It checks for memory leaks.

Question 16

How does lifting state UP cause performance issues?

Accepted Answer

Correct Answer

Answer

It crashes the server.

Answer

It forces common ancestors to hold the state. When that state changes, the ancestor and ALL its children re-render. Lifting state too high is the leading cause of sluggish React apps.

Answer

It removes the state from the DOM.

Answer

It causes Redux conflicts.

Question 17

What is 'Render Bailing' via state?

Accepted Answer

Correct Answer

Answer

Throwing an error to stop rendering.

Answer

If you call `setCount(0)` when the count is already `0`, React checks `Object.is(old, new)`. Since it is identical, React completely bails out and skips the render phase entirely.

Answer

Hiding the component.

Answer

Using a `return null`.

Question 18

Why do some teams use libraries like `immer` in Redux or Zustand?

Accepted Answer

Correct Answer

Answer

To make the app run on WebAssembly.

Answer

To allow developers to write mutable-looking code (e.g., `state.user.age = 30`) while immer handles creating the deeply nested immutable copies under the hood. This drastically reduces bugs and boilerplate.

Answer

To compile CSS.

Answer

To fetch APIs faster.

Question 19

What is the consequence of importing a massive utility library like `crypto-js` into a Client Component instead of a Server Component in Next.js?

Accepted Answer

Correct Answer

Answer

It will not work.

Answer

The entire `crypto-js` library (often hundreds of kilobytes) is permanently added to the JavaScript bundle downloaded by every user's browser, destroying the app's Time to Interactive (TTI).

Answer

It is perfectly fine.

Answer

It encrypts the HTML.

Question 20

What is 'Prefetching' a route in Next.js?

Accepted Answer

Correct Answer

Answer

Downloading the whole site as a PDF.

Answer

When a `<Link>` tag enters the user's viewport, Next.js automatically downloads the JSON/JS for that route in the background. When the user clicks, the page transition is nearly instantaneous.

Answer

Caching API requests.

Answer

Saving the page to LocalStorage.

Question 21

What is 'Lazy Initialization' of state in `useState`?

Accepted Answer

Correct Answer

Answer

Delaying the render.

Answer

Passing a function to `useState` (e.g., `useState(() => heavyCalculation())`). React will only execute this function once during the initial render, preventing the heavy calculation from running on every subsequent re-render.

Answer

Using `React.lazy` on state.

Answer

Fetching state from an API.

Question 22

What is the primary performance benefit of using SVG sprites or an icon font over individual SVG imports?

Accepted Answer

Correct Answer

Answer

SVGs look better.

Answer

It reduces the number of HTTP requests. Instead of making 50 network requests for 50 icons, the browser makes 1 request for the sprite sheet, drastically speeding up the network waterfall.

Answer

It makes the Virtual DOM faster.

Answer

It allows CSS animations.

Question 23

What does a tool like `purgecss` do?

Accepted Answer

Correct Answer

Answer

It deletes all CSS from the project.

Answer

It analyzes your HTML/JSX files, finds every CSS class you actually used, and permanently deletes all unused CSS classes from libraries like Tailwind or Bootstrap before deploying to production.

Answer

It compresses images.

Answer

It converts CSS to JavaScript.

Question 24

If a user has 'Reduce Motion' enabled in their OS settings, how should a performant React app respond?

Accepted Answer

Correct Answer

Answer

Ignore it.

Answer

Use a CSS media query `(prefers-reduced-motion: reduce)` or a React hook to detect it, and disable all heavy parallax, spinning, or sliding animations to respect the user's battery and vestibular accessibility needs.

Answer

Crash the app.

Answer

Turn off the Virtual DOM.

Question 25

What is the performance implication of using deeply nested styled-components (CSS-in-JS) inside a list of 1000 items?

Accepted Answer

Correct Answer

Answer

There is no implication.

Answer

CSS-in-JS libraries must parse the template literals, generate a unique hash class name, and inject a `<style>` tag into the DOM AT RUNTIME. Doing this 1000 times simultaneously will severely freeze the browser.

Answer

It is faster than standard CSS.

Answer

It breaks the React Profiler.

Academy

ReactJS Interview Prep - Performance Optimization (Part 4)