React Performance MCQs - useMemo, useCallback, React.memo and Reconciliation (Set 2)

Q1. What does wrapping a component in React.memo do?

a) It prevents the component from ever re-rendering

b) It memoises every function inside the component

c) It skips re-rendering the component when its props are shallowly equal to the previous props

d) It caches the component's state

Q2. Child is wrapped in React.memo, but the parent renders <Child onSelect={() => setId(1)} />. Why does Child still re-render every time?

a) React.memo does not work with functions

b) Because setId is async

c) Because Child has no key

d) A new arrow function is created on every parent render, so the onSelect prop is never equal

Q3. Which statement about useMemo and useCallback is correct?

a) useCallback(fn, deps) is equivalent to useMemo(() => fn, deps)

b) Both run on every render without caching

c) They can only be used inside class components

d) useMemo memoises functions and useCallback memoises values

Q4. By default, what happens to child components when a parent re-renders?

a) Only children whose props changed re-render

b) All children re-render, whether or not their props changed

c) Children never re-render

d) Only the first child re-renders

Q5. A component wrapped in React.memo calls useContext(ThemeContext). The context value changes. What happens?

a) It re-renders, because context changes bypass React.memo

b) It does not re-render because of React.memo

c) It unmounts

d) Only its children re-render

Q6. A provider renders <Ctx.Provider value={{ user, logout }}>. What problem does this cause?

a) None

b) logout is called on every render

c) The context becomes read-only

d) A new object is created on every render, so every consumer re-renders even when user has not changed

Q7. During reconciliation, the element at the same position changes from <div> to <section>. What does React do?

a) Updates only the tag name

b) Unmounts the old subtree and mounts a new one, losing state inside it

c) Ignores the change

d) Throws a hydration error

Q8. You render <ProfileForm key={userId} />. What happens when userId changes?

a) React remounts ProfileForm with fresh state

b) The form keeps its old state

c) React throws a duplicate key warning

d) Only the props update

Q9. A table needs to show 50,000 rows smoothly. What is the most effective technique?

a) Render the rows in a single string

b) Wrap each row in React.memo

c) Use useLayoutEffect

d) Virtualise the list so only the visible rows are rendered (for example with react-window or TanStack Virtual)

Q10. Which is true about React.lazy?

a) It takes a function that returns a dynamic import resolving to a module with a default export, and must be rendered inside Suspense

b) It works with named exports directly

c) It delays rendering by a fixed time

d) It is only for server components

Q11. Typing in a search box feels laggy because a large filtered list re-renders on each keystroke. Which hook lets you mark the list update as non-urgent so typing stays responsive?

a) useRef

b) useTransition

c) useEffect

d) useId

Q12. What does useDeferredValue do?

a) It returns a version of a value that may lag behind, so expensive parts of the UI can render with the old value while urgent updates go first

b) It caches values across sessions

c) It debounces network requests

d) It delays a state update by a fixed number of milliseconds

Q13. In React 18 and later, which state updates are batched into a single re-render?

a) Only updates inside React event handlers

b) Updates inside event handlers, promises, timeouts and native event handlers

c) Only updates inside useEffect

d) No updates are batched

Q14. Which tool shows which components rendered, why, and how long each render took?

a) ESLint

b) Lighthouse

c) React DevTools Profiler

d) Webpack Bundle Analyzer

Q15. A slow component is passed as children to a wrapper that has frequently changing state, for example <Hover><SlowTree /></Hover>. Does SlowTree re-render when Hover's state changes?

a) No, because the SlowTree element was created by the parent and its reference does not change when Hover re-renders

b) Only in StrictMode

c) Yes, always

d) Only if SlowTree uses context

Q16. What does the React Compiler do?

a) Converts class components to hooks

b) Compiles React into WebAssembly

c) Replaces the virtual DOM

d) Automatically memoises components and values at build time, reducing the need for manual useMemo, useCallback and React.memo