Challenge yourself on React useMemo /useCallback

React useMemo vs useCallback Quiz

1. What does useMemo memorize in React?

• a) The function itself
• b) The value returned by the function
• c) The component state
• d) The props passed to a component

2. What is the primary use case for useCallback?

• a) To memorize the result of a function
• b) To prevent a component from re-rendering
• c) To memorize the function itself to avoid unnecessary re-creation
• d) To calculate complex math

3. In which scenario would you use useMemo?

• a) When you want to memorize an expensive computation
• b) When you need to pass a stable function as a prop
• c) When you want to prevent rendering a component
• d) When you want to modify the component’s state

4. What does useCallback return?

• a) A value
• b) A function
• c) A component
• d) An array of dependencies

5. True or False: useMemo prevents the function from being called on every render if dependencies haven’t changed.

6. Which of the following is an example of when you should NOT use useMemo or useCallback?

• a) When the function or calculation is expensive
• b) When the function or calculation is lightweight and not performance-critical
• c) When a function is passed as a prop to a child component
• d) When dealing with large lists that need sorting or filtering

7. What are the dependencies in both useMemo and useCallback used for?

• a) To ensure the function runs on every render
• b) To determine when the memoized value or function should be recalculated
• c) To prevent component mounting
• d) To modify the state of a component

8. Which hook would you use to avoid re-rendering a child component due to a changing function prop?

• a) useMemo
• b) useEffect
• c) useCallback
• d) useState

9. Fill in the blank: useMemo is typically used to optimize , while useCallback is used to optimize .

• a) Expensive calculations, component rendering
• b) Component rendering, memoization
• c) Expensive calculations, function creation
• d) State changes, rendering updates

10. True or False: You should always use useMemo and useCallback to optimize your React components.

Here are the correct answers along with explanations:

1. b) The value returned by the function
   Correct! useMemo memorizes the return value of a function, not the function itself.
2. c) To memorize the function itself to avoid unnecessary re-creation
   Correct! useCallback memorizes the function itself to prevent re-creating the same function unnecessarily.
3. a) When you want to memorize an expensive computation
   Correct! useMemo is typically used to optimize expensive computations by preventing them from running on every render.
4. b) A function
   Correct! useCallback returns a memorized function.
5. True
   useMemo does prevent a function from being called on every render if its dependencies haven’t changed.
6. b) When the function or calculation is lightweight and not performance-critical
   Correct! You should avoid using useMemo or useCallback for lightweight computations as the performance gains wouldn’t be significant.
7. b) To determine when the memoized value or function should be recalculated
   Correct! The dependencies control when the memoized value or function should be recalculated.
8. c) useCallback
   Correct! useCallback is used to prevent re-creating a function, which can avoid unnecessary re-renders in child components.
9. c) Expensive calculations, function creation
   Correct! useMemo optimizes expensive calculations, while useCallback optimizes function creation.
10. False
    Correct! You should not always use these hooks unless there is a clear performance issue. Overusing them can lead to unnecessary complexity.

---