React Advanced Topics 2 — Questions and Answers
Question 1: What is the primary purpose of React.memo?
- To memoize the result of an expensive function
- To prevent a function component from re-rendering when its props are unchanged (Correct answer)
- To cache API responses across renders
- To persist state across component unmounts
Correct answer: To prevent a function component from re-rendering when its props are unchanged
React.memo is a higher-order component that skips re-rendering when props are shallowly equal.
Question 2: What does the useCallback hook return?
- A memoized version of the callback function (Correct answer)
- A new function on every render
- The result of calling the function
- A ref to the function
Correct answer: A memoized version of the callback function
useCallback returns a memoized callback that only changes when its dependencies change.
Question 3: When should you use useMemo?
- To memoize an expensive computed value between renders (Correct answer)
- To replace useState entirely
- To trigger side effects
- To create a context provider
Correct answer: To memoize an expensive computed value between renders
useMemo caches a computed value so it is only recalculated when dependencies change.
Question 4: What is the purpose of the key prop when rendering lists?
- To style each list item
- To help React identify which items changed, added, or removed (Correct answer)
- To set the index of the item
- To make items clickable
Correct answer: To help React identify which items changed, added, or removed
Keys give elements a stable identity so React can efficiently reconcile list changes.
Question 5: What problem does the useRef hook commonly solve?
- Holding a mutable value that persists without causing re-renders (Correct answer)
- Subscribing to a Redux store
- Memoizing component output
- Replacing useEffect
Correct answer: Holding a mutable value that persists without causing re-renders
useRef returns a mutable object whose .current persists across renders without triggering re-renders.
Question 6: What is an Error Boundary in React?
- A hook that catches promise rejections
- A component that catches JavaScript errors in its child tree and renders a fallback (Correct answer)
- A CSS class for invalid forms
- A built-in router guard
Correct answer: A component that catches JavaScript errors in its child tree and renders a fallback
Error Boundaries are class components that catch render-phase errors below them and show fallback UI.
Question 7: Why might overusing useMemo and useCallback hurt performance?
- They block the main thread permanently
- They add memoization overhead and memory cost that can outweigh the savings (Correct answer)
- They disable React's concurrent features
- They prevent state updates
Correct answer: They add memoization overhead and memory cost that can outweigh the savings
Memoization itself has a cost, so applying it unnecessarily can be slower than recomputing.
React Advanced Topics 2
What is the primary purpose of React.memo?