React Hooks useCallback Hook 2 — Questions and Answers
Question 1: In the following code, what is `handleClick`? const handleClick = useCallback(() => { doSomething(id); }, [id]);
- A new function created on every render
- A memoized function that only changes when `id` changes (Correct answer)
- A function that runs immediately when `id` changes
- An asynchronous function wrapped in useCallback
Correct answer: A memoized function that only changes when `id` changes
handleClick is a memoized function that React will keep the same reference for as long as `id` does not change between renders.
Question 2: Which hook import is required to use useCallback?
- import { useCallback } from 'react-dom'
- import { useCallback } from 'react' (Correct answer)
- import useCallback from 'react'
- import { memoCallback } from 'react'
Correct answer: import { useCallback } from 'react'
useCallback is a named export from the 'react' package and must be imported with destructuring.
Question 3: You have a parent component that re-renders frequently. A child component uses React.memo and receives a function prop. Without useCallback, what happens?
- The child never re-renders because React.memo blocks all updates
- The child re-renders on every parent render because the function prop is a new reference each time (Correct answer)
- The child only re-renders when its own state changes
- React automatically memoizes function props passed to React.memo components
Correct answer: The child re-renders on every parent render because the function prop is a new reference each time
React.memo performs a shallow comparison; since a new function is created on each parent render, it's a different reference, causing the child to re-render despite React.memo.
Question 4: When should you NOT use useCallback?
- When passing functions to child components wrapped in React.memo
- When defining simple inline functions that are not passed as props or dependencies (Correct answer)
- When the function depends on changing state or props
- When you want consistent function references across renders
Correct answer: When defining simple inline functions that are not passed as props or dependencies
useCallback adds overhead; for simple inline functions not used as props or hook dependencies, the memoization cost outweighs any benefit.
Question 5: How can you use useCallback with an async function?
- useCallback does not support async functions
- Wrap the async function directly: useCallback(async () => { await fetch(...); }, [deps]) (Correct answer)
- You must use useEffect instead for async callbacks
- Use useCallback with a .then() chain instead of async/await
Correct answer: Wrap the async function directly: useCallback(async () => { await fetch(...); }, [deps])
You can pass an async function directly to useCallback; it works the same way — the returned memoized callback will be an async function.
Question 6: What React DevTools feature helps identify if useCallback is preventing unnecessary re-renders?
- The Console tab showing hook logs
- The Profiler tab which records rendering times and highlights which components re-rendered (Correct answer)
- The Network tab showing component requests
- The Elements tab showing component props
Correct answer: The Profiler tab which records rendering times and highlights which components re-rendered
The React DevTools Profiler records render times and shows which components re-rendered and why, helping verify whether useCallback optimizations are working.
Question 7: If a useCallback dependency is missing from the dependency array, what ESLint rule will warn you?
- react/no-missing-deps
- exhaustive-deps (from eslint-plugin-react-hooks) (Correct answer)
- react-hooks/callback-deps
- no-unused-vars
Correct answer: exhaustive-deps (from eslint-plugin-react-hooks)
The exhaustive-deps rule from the official eslint-plugin-react-hooks package warns when dependencies used inside a hook callback are missing from the dependency array.
React Hooks useCallback Hook 2
In the following code, what is `handleClick`?
const handleClick = useCallback(() => { doSomething(id); }, [id]);