React Performance Quiz

Question 1

What should you do before adding memoisation?

Accepted Answer

Measure with the Profiler and browser performance tools to find the real bottleneck

Answer

Wrap every component in memo as a precaution

Answer

Upgrade React

Answer

Reduce the number of components

Question 2

What does React.memo compare?

Accepted Answer

Each prop, shallowly, using Object.is

Answer

The rendered output

Answer

The component's state

Answer

The entire component tree

Question 3

Why does memo do nothing for this child?

Accepted Answer

Both props are created fresh on every parent render, so they never compare equal

Answer

memo only works on class components

Answer

The child has no state

Answer

memo requires a custom comparison function

Question 4

What is the difference between useMemo and useCallback?

Accepted Answer

useMemo caches a computed value, useCallback caches a function

Answer

useMemo is for effects, useCallback is for events

Answer

useCallback runs after render

Answer

There is no difference

Question 5

When is useMemo worth adding?

Accepted Answer

When the calculation is genuinely expensive, or the identity of the result matters to a memoised child or an effect

Answer

Around every calculation in a component

Answer

Only inside custom hooks

Answer

Whenever a component has more than three props

Question 6

Which approach avoids re-rendering an expensive subtree without any memoisation?

Accepted Answer

Passing it as children so it is created by a component that does not re-render

Answer

Adding a key to it

Answer

Rendering it inside an effect

Answer

Wrapping it in a fragment

Question 7

What does list virtualisation do?

Accepted Answer

Renders only the rows currently visible plus a small buffer

Answer

Caches each row with memo

Answer

Moves rendering to a web worker

Answer

Compresses the list data

Question 8

Where does code splitting give the biggest win?

Accepted Answer

At route boundaries and around heavy dependencies such as chart or editor libraries

Answer

Splitting every individual component

Answer

Splitting CSS files

Answer

Splitting the React runtime itself