ReactJS Interview Prep - Performance Optimization (Part 1)

Question 1

What are the two distinct phases of the React rendering lifecycle?

Accepted Answer

Correct Answer

Answer

The Fetch phase and the Paint phase.

Answer

The Render phase (where React calls your components to figure out what changed in the Virtual DOM) and the Commit phase (where React actually applies those changes to the real DOM).

Answer

The Compile phase and the Execute phase.

Answer

The Mount phase and the Unmount phase.

Question 2

What exactly does it mean when a React functional component 're-renders'?

Accepted Answer

Correct Answer

Answer

The browser repaints the screen.

Answer

React executes the JavaScript function that defines the component from top to bottom, generating a new snapshot of the JSX it wants to display.

Answer

React deletes the component's HTML and recreates it.

Answer

React clears the component's state.

Question 3

By default, if a parent component re-renders, what happens to its child components?

Accepted Answer

Correct Answer

Answer

They only re-render if their props changed.

Answer

They automatically re-render, unconditionally, cascading all the way down the component tree.

Answer

They only re-render if they have local state.

Answer

They never re-render.

Question 4

How do you stop a child component from re-rendering when its parent re-renders?

Accepted Answer

Correct Answer

Answer

Wrap the child in `useMemo`.

Answer

Wrap the child component in `React.memo()`. This tells React to skip rendering the child UNLESS the specific props passed to the child have changed.

Answer

Pass a `preventUpdate` boolean prop.

Answer

Use `shouldComponentUpdate` inside a functional component.

Question 5

How does `React.memo` determine if props have changed?

Accepted Answer

Correct Answer

Answer

Deep equality check using `JSON.stringify`.

Answer

Shallow equality check using `Object.is`. It compares the old prop values to the new prop values strictly by reference.

Answer

It checks if the DOM nodes have changed.

Answer

It uses a hashing algorithm.

Question 6

If you pass an inline object prop to a memoized child (e.g., `<Child config={{ color: 'red' }} />`), what happens when the parent re-renders?

Accepted Answer

Correct Answer

Answer

The child is successfully memoized.

Answer

The child will re-render anyway. The inline object creates a brand new memory reference on every parent render. The shallow equality check fails because `oldConfig !== newConfig`.

Answer

React throws an error.

Answer

The object is automatically frozen.

Question 7

If a child is wrapped in `React.memo`, but its internal `useState` or `useContext` changes, will it re-render?

Accepted Answer

Correct Answer

Answer

No, `React.memo` blocks all renders.

Answer

Yes. `React.memo` ONLY protects against parent-triggered re-renders via props. It has no effect on internal state or context updates, which will always trigger a render.

Answer

Only if the Context is also memoized.

Answer

Yes, but only in Strict Mode.

Question 8

Why shouldn't you wrap every single component in your application with `React.memo`?

Accepted Answer

Correct Answer

Answer

It breaks React Router.

Answer

Because `React.memo` itself has a performance cost (the shallow comparison of props). If a component frequently receives new props anyway, or is very cheap to render, the comparison overhead makes the app SLOWER, not faster.

Answer

It causes memory leaks.

Answer

It prevents CSS animations.

Question 9

What is the purpose of `useCallback` when optimizing a component tree?

Accepted Answer

Correct Answer

Answer

To delay the execution of a function.

Answer

To cache a function reference so it doesn't get recreated on every render. This is crucial when passing callback functions as props to `React.memo`-wrapped child components.

Answer

To bind the `this` keyword.

Answer

To run functions in a web worker.

Question 10

What is 'Reconciliation' in React?

Accepted Answer

Correct Answer

Answer

The process of connecting to a Redux store.

Answer

The algorithmic process React uses (the diffing algorithm) to compare the newly generated Virtual DOM tree with the previous Virtual DOM tree, figuring out exactly which real DOM nodes need to be updated.

Answer

The process of merging CSS classes.

Answer

The process of hydrating server-side HTML.

Question 11

Why is the `key` prop absolutely critical for performance when rendering lists (e.g., using `.map()`)?

Accepted Answer

Correct Answer

Answer

It applies a unique CSS ID to each item.

Answer

During reconciliation, React uses keys to match children in the original tree with children in the subsequent tree. Without stable keys, if an item is inserted at the top of a list, React might destroy and recreate the entire list.

Answer

It prevents XSS vulnerabilities.

Answer

It binds the item to a Redux store.

Question 12

Why is using the array `index` as a `key` a massive performance and rendering anti-pattern?

Accepted Answer

Correct Answer

Answer

Because indexes are not strings.

Answer

If the list is reordered, filtered, or has items inserted/deleted, the indexes shift. React will associate the wrong state with the wrong DOM nodes, causing bizarre UI bugs and massive unnecessary re-renders.

Answer

Because it violates the exhaustive-deps rule.

Answer

Because it throws a fatal error.

Question 13

What does the `useMemo` hook actually do?

Accepted Answer

Correct Answer

Answer

It memoizes a React component.

Answer

It caches the RESULT of an expensive synchronous calculation. It only recalculates the result if the variables in its dependency array change.

Answer

It caches an API request.

Answer

It memoizes an asynchronous function.

Question 14

What happens if you omit the dependency array in `useMemo` (e.g., `useMemo(() => computeHeavyMath())`)?

Accepted Answer

Correct Answer

Answer

It caches the value forever.

Answer

It recalculates on every single render, completely defeating the purpose of the hook and wasting the overhead of calling `useMemo`.

Answer

It throws a syntax error.

Answer

It delays the calculation.

Question 15

Is `useMemo` guaranteed to keep your data cached forever until dependencies change?

Accepted Answer

Correct Answer

Answer

Yes, it is a permanent cache.

Answer

No. React explicitly states that `useMemo` is a PERFORMANCE OPTIMIZATION, not a semantic guarantee. React may choose to clear the cache (e.g., to free memory for offscreen components) and recalculate it.

Answer

Yes, unless the user clears their cookies.

Answer

Only in Production builds.

Question 16

How can 'Component Composition' eliminate the need for `React.memo` entirely in some scenarios?

Accepted Answer

Correct Answer

Answer

By replacing components with Redux.

Answer

By passing expensive child components as the `children` prop. When the parent's state changes, the parent re-renders, but React knows the `children` prop reference hasn't changed, so it completely skips re-rendering the children.

Answer

By wrapping the entire app in a Context.

Answer

It cannot.

Question 17

What is a 'Pure Component' in React?

Accepted Answer

Correct Answer

Answer

A component written without JSX.

Answer

A component that always renders the exact same output given the exact same props and state, and produces no side effects.

Answer

A component that uses no hooks.

Answer

A component that only renders text.

Question 18

Why is defining a component inside another component (e.g., `function Parent() { function Child() { return

} ... }`) a massive performance anti-pattern?

Accepted Answer

Correct Answer

Answer

It violates CSS scope.

Answer

On every render of the Parent, the Child component is completely redefined as a brand new function reference. React sees a new function, destroys the old Child DOM node entirely, and remounts the new one from scratch.

Answer

It causes an infinite loop.

Answer

It cannot access props.

Question 19

What is the React DevTools 'Profiler' tab?

Accepted Answer

Correct Answer

Answer

A tool to measure network speed.

Answer

A tool that records render phases, showing a flamegraph of exactly which components rendered, how long they took (in milliseconds), and crucially, *why* they rendered (e.g., 'Hooks changed', 'Props changed').

Answer

A tool to check CSS performance.

Answer

A tool to debug Redux.

Question 20

In the React Profiler, what does a yellow or red block in the flamegraph indicate?

Accepted Answer

Correct Answer

Answer

A network error occurred.

Answer

That specific component took a relatively long time to render compared to the rest of the tree during that specific commit phase.

Answer

The component threw an exception.

Answer

The component is deprecated.

Question 21

If you pass an anonymous arrow function to a button (e.g., `<button onClick={() => setCount(c + 1)}>`), does this inherently cause bad performance?

Accepted Answer

Correct Answer

Answer

Yes, it should always be avoided.

Answer

No. Creating an arrow function in modern JavaScript is incredibly fast. It only causes a performance issue if passed to a heavy child component that relies on `React.memo` to prevent re-renders.

Answer

Yes, it leaks memory.

Answer

It causes an infinite loop.

Question 22

How do you conditionally apply `React.memo` using a custom comparison function?

Accepted Answer

Correct Answer

Answer

Pass a second argument to `React.memo(Component, arePropsEqual)` which returns true if props are effectively the same.

Answer

Use `useMemo` inside the component.

Answer

You cannot override the comparison.

Answer

Use an `if` statement outside the export.

Question 23

What does it mean to 'Bail out' of a render?

Accepted Answer

Correct Answer

Answer

Throwing an Error Boundary.

Answer

When React determines (via `React.memo`, or identical state updates like `setCount(0)` when count is already 0) that it can completely skip executing a component's render function.

Answer

Stopping a network request.

Answer

Hiding a component with CSS `display: none`.

Question 24

Why might a Context Provider value like `value={{ theme, toggleTheme }}` cause performance issues?

Accepted Answer

Correct Answer

Answer

Context cannot hold functions.

Answer

Because it's an inline object. Every time the Provider's parent renders, a new object reference is created. This forces EVERY component consuming the Context to re-render, even if the actual theme didn't change.

Answer

It exceeds memory limits.

Answer

It violates strict mode.

Question 25

Is the Virtual DOM faster than the Real DOM?

Accepted Answer

Correct Answer

Answer

No, it is technically slower.

Answer

Yes, the Virtual DOM is a lightweight Javascript object. Manipulating it is millions of times faster than manipulating the real browser DOM (which triggers CSS recalculations and repaints).

Answer

They are the exact same speed.

Answer

The Virtual DOM is rendered on the server.

Academy

ReactJS Interview Prep - Performance Optimization (Part 1)