React Hooks useCallback Hook 1 — Questions and Answers
Question 1: What does the useCallback hook primarily do in React?
- It memoizes a callback function so it only changes if its dependencies change (Correct answer)
- It automatically calls a function every render
- It replaces the need for event handlers in functional components
- It creates a new function on every render for performance
Correct answer: It memoizes a callback function so it only changes if its dependencies change
useCallback returns a memoized version of the callback that only changes when one of its dependencies has changed, preventing unnecessary re-renders.
Question 2: What is the correct syntax for using useCallback?
- useCallback(fn)
- useCallback(fn, [deps]) (Correct answer)
- useCallback([deps], fn)
- useCallback(fn, deps, options)
Correct answer: useCallback(fn, [deps])
useCallback takes a callback function as its first argument and a dependency array as its second argument.
Question 3: When is it most beneficial to use useCallback?
- When you want to run a function immediately on mount
- When passing a callback function as a prop to a child component wrapped in React.memo (Correct answer)
- When you need to access the DOM directly
- When replacing useState for complex state logic
Correct answer: When passing a callback function as a prop to a child component wrapped in React.memo
useCallback is most useful when passing callbacks to child components wrapped in React.memo, preventing unnecessary re-renders when the parent re-renders.
Question 4: What happens if you pass an empty dependency array [] to useCallback?
- The callback is recreated on every render
- The callback is never called
- The callback is memoized once and never changes (Correct answer)
- useCallback throws an error
Correct answer: The callback is memoized once and never changes
An empty dependency array means the memoized callback has no dependencies, so it's created once on mount and remains the same reference throughout the component's lifetime.
Question 5: What is the key difference between useCallback and useMemo?
- useCallback is for class components; useMemo is for functional components
- useCallback memoizes a function itself; useMemo memoizes the return value of a function (Correct answer)
- useCallback can only handle async functions; useMemo handles sync functions
- There is no difference; they are interchangeable
Correct answer: useCallback memoizes a function itself; useMemo memoizes the return value of a function
useCallback(fn, deps) is equivalent to useMemo(() => fn, deps) — useCallback returns the function, while useMemo returns the computed result of calling the function.
Question 6: Which of the following is a common problem that useCallback helps solve?
- Memory leaks from asynchronous operations
- Unnecessary re-renders of child components due to new function references on each render (Correct answer)
- Stale state values inside event handlers
- Blocking the main thread during expensive computations
Correct answer: Unnecessary re-renders of child components due to new function references on each render
Without useCallback, a new function reference is created on every parent render, causing child components (even those using React.memo) to re-render unnecessarily.
Question 7: What is a 'stale closure' problem in the context of useCallback?
- A callback that is never garbage collected
- When a memoized callback captures outdated values from a previous render because dependencies were omitted (Correct answer)
- When useCallback is called inside a loop or condition
- A callback that executes after the component unmounts
Correct answer: When a memoized callback captures outdated values from a previous render because dependencies were omitted
A stale closure occurs when you omit a value from the dependency array that the callback uses, so the callback holds a reference to the old value from a previous render.
React Hooks useCallback Hook 1
What does the useCallback hook primarily do in React?