Custom Hooks in React
15 questions · 12 min · Medium
Performance Optimization in React Quiz
Test your knowledge of performance optimization in React, including React.memo, useMemo, useCallback, lazy loading, code splitting, virtualization, reconciliation, profiling, and preventing unnecessary re-renders.
- 15
- Questions
- 12 min
- Time limit
- Medium
- Difficulty
No sign-up needed · Last updated:
Score: 0 00:00
Save your score
Create a free account to keep your scores and track your progress. It is optional.
Questions to review
Related quizzes
React Component Lifecycle & useEffect Quiz – 20 Questions with Answers
20 questions · 15 min · Medium
Context API in React
15 questions · 12 min · Medium
Conditional Rendering in React
15 questions · 12 min · Medium
Components & Props in React Quiz – 15 Questions with Answers
15 questions · 12 min · Medium
Lists and Keys in ReactJS Quiz
15 questions · 12 min · Medium
All 15 questions and answers Spoilers: this shows the questions and answers. Try the quiz first! Open
-
1. What is the primary purpose of React.memo?
- A. To store application data permanently
- B. To prevent all component updates
- C. To skip re-rendering a component when its props have not changed according to the comparison
- D. To replace the useState hook
Show answer
C. To skip re-rendering a component when its props have not changed according to the comparison
React.memo memoizes a component and can skip rendering it again when its props compare equal. It does not prevent updates caused by the component's own state or consumed context.
-
2. Which React hook memoizes the result of an expensive calculation between renders?
- A. useMemo
- B. useEffect
- C. useRef
- D. useContext
Show answer
A. useMemo
useMemo caches a calculation result and recomputes it when its dependencies change, which can help avoid expensive repeated calculations.
-
3. What is the main purpose of the useCallback hook?
- A. To fetch data automatically
- B. To create a new DOM element
- C. To prevent a component from mounting
- D. To cache a function definition between renders while its dependencies remain unchanged
Show answer
D. To cache a function definition between renders while its dependencies remain unchanged
useCallback returns a cached function reference until one of its dependencies changes. It is useful when function identity matters, such as when passing callbacks to memoized children.
-
4. Which React feature allows a component to be loaded only when it is needed?
- A. React.Fragment
- B. React.lazy
- C. React.StrictMode
- D. React.createContext
Show answer
B. React.lazy
React.lazy allows a component to be loaded dynamically. It is commonly combined with Suspense to display a fallback while the component's code loads.
-
5. What is code splitting in React applications?
- A. Dividing CSS rules into separate selectors
- B. Splitting every component into individual HTML files
- C. Breaking JavaScript into smaller bundles that can be loaded when needed
- D. Removing all third-party dependencies
Show answer
C. Breaking JavaScript into smaller bundles that can be loaded when needed
Code splitting reduces the amount of JavaScript that must be downloaded initially by separating code into smaller chunks that can be loaded on demand.
-
6. Which React tool helps developers inspect component rendering performance and identify expensive updates?
- A. React Profiler
- B. React Router
- C. React Fragment
- D. React Portal
Show answer
A. React Profiler
The React Profiler helps analyze rendering activity and measure how much time React spends rendering components.
-
7. Why can defining a new object or function inline on every render reduce the effectiveness of React.memo?
- A. React automatically converts all objects to strings
- B. Inline values prevent state updates
- C. React cannot render objects as props
- D. New object and function references may fail shallow prop comparison
Show answer
D. New object and function references may fail shallow prop comparison
Objects and functions created during rendering usually have new references. A memoized child may therefore render again even if the values appear equivalent.
-
8. What is list virtualization used for in React?
- A. To convert arrays into objects
- B. To render only the visible portion of a large list and a small surrounding range
- C. To make every list item a separate page
- D. To prevent users from scrolling
Show answer
B. To render only the visible portion of a large list and a small surrounding range
Virtualization reduces the number of DOM elements for large lists by rendering the visible items and, commonly, a small overscan range.
-
9. How can React keys improve the correctness of list updates?
- A. By making every component render only once
- B. By automatically memoizing all props
- C. By helping React identify list items across renders
- D. By preventing arrays from changing
Show answer
C. By helping React identify list items across renders
Stable, unique keys help React match items across renders so that insertions, deletions, and reordering can be handled correctly.
-
10. Which practice can help improve the initial loading performance of a React application?
- A. Lazy loading components that are not immediately needed
- B. Importing every application feature into the initial bundle
- C. Rendering thousands of hidden DOM elements
- D. Repeating expensive calculations on every render
Show answer
A. Lazy loading components that are not immediately needed
Lazy loading and code splitting can reduce the initial JavaScript payload by postponing the loading of nonessential components.
-
11. What happens when a component's state is updated using its state setter?
- A. The entire browser must restart
- B. All React components are always unmounted
- C. The state changes without any possible render
- D. React schedules an update, and the component may render again
Show answer
D. React schedules an update, and the component may render again
Updating state schedules React to process the update. React may render the component again and can skip work in some cases, such as when the new state is identical according to Object.is.
-
12. Why should expensive calculations be measured before adding memoization with useMemo?
- A. Memoization is required for every JavaScript expression
- B. Memoization adds complexity and overhead, and the calculation may not be expensive enough to benefit
- C. useMemo always makes calculations slower
- D. React does not support memoization
Show answer
B. Memoization adds complexity and overhead, and the calculation may not be expensive enough to benefit
Memoization is most useful when it avoids meaningful repeated work. Profiling helps determine whether the optimization is worthwhile.
-
13. What is the purpose of the dependency array in useMemo and useCallback?
- A. To specify the HTML elements a component should render
- B. To declare every CSS class used by the component
- C. To determine when the cached calculation or function should be recomputed or recreated
- D. To prevent the component from receiving props
Show answer
C. To determine when the cached calculation or function should be recomputed or recreated
React compares dependencies with their previous values using Object.is. When a dependency changes, the memoized calculation is recomputed or the cached callback is replaced.
-
14. Which technique can help reduce unnecessary re-renders caused by frequently changing context values?
- A. Split unrelated context values into separate providers where appropriate
- B. Put every application value into one frequently changing context
- C. Remove all component props
- D. Replace all context values with direct DOM manipulation
Show answer
A. Split unrelated context values into separate providers where appropriate
Separating unrelated context values can limit which consumers are notified when a value changes. Context consumers still update when the context they use changes.
-
15. Which statement best describes React performance optimization?
- A. Every component must use React.memo
- B. useCallback should be added to every function
- C. All state should be moved to a global store
- D. Measure performance, identify bottlenecks, and apply targeted optimizations
Show answer
D. Measure performance, identify bottlenecks, and apply targeted optimizations
Effective optimization starts with profiling and focuses on actual bottlenecks instead of adding memoization or complexity everywhere.