When should we use useCallback hook?

Caching a function with useCallback is only valuable in a few cases:

1
You pass it as a prop to a component wrapped in memo. You want to skip re-rendering if the value hasn’t changed. Memoisation lets your component re-render only if dependencies change.
2
The function you’re passing is later used as a dependency of some Hook. For example, another function wrapped in useCallback depends on it, or you depend on this function from useEffect.

Difficulty: 6/10

Topics: performance optimization, memoization, dependency arrays

0-2 years experience

1
You have a functional component that renders a list of items and passes a click handler to each item. How would you use useCallback to avoid unnecessary re-renders of the list items?
2
If you forget to include a dependency in the dependency array of useCallback, what could happen to the behavior of your component?

2-5 years experience

1
In a feature where a parent component fetches data and passes a memoized callback to a child that triggers a filter, the UI becomes sluggish. Walk me through how you would decide whether to keep, remove, or adjust the useCallback usage.
2
You notice that a child component wrapped with React.memo still re-renders on every parent render despite using useCallback for its props. What debugging steps would you take to find the cause?

5-8 years experience

1
Our dashboard renders hundreds of widgets, each receiving callbacks from a central store. How would you design the callback memoization strategy to keep render performance acceptable at scale?
2
Explain the trade‑offs of using useCallback versus moving the function definition to a separate module and importing it, especially when dealing with hot‑module replacement in development.

8+ years experience

1
We are migrating a large legacy codebase to a new architecture that emphasizes immutable data and memoized selectors. How would you establish guidelines for when to apply useCallback across many teams to avoid both over‑memoization and missed optimizations?
2
Consider a micro‑frontend setup where multiple independently deployed React apps share a common UI library. What policies would you put in place regarding useCallback usage to ensure consistent performance and avoid bundle bloat?

❓Can you give an example where useCallback actually degrades performance?
❓How does useCallback interact with useEffect dependency arrays?
❓What are the risks of omitting a dependency in the useCallback dependency list?