Discuss 'useCallback' hook

In JavaScript, a function() {} or () => {} always creates a different function, similar to how the {} object literal always creates a new object. Normally, this wouldn’t be a problem, but it means that props receiving this function will never be the same, and your memo optimization won’t work. This is where useCallback comes in handy:

1
useCallback is a React Hook that lets you cache a function definition between re-renders.
2
By default, when a component re-renders, React re-renders all of its children recursively.

Usage

1
Skipping re-rendering of components: to cache the functions that you pass to child components. As function is defined on every render thus rendering all children in the component tree recursively.
2
Updating state from a memoised callback
3
Preventing an Effect from firing too often: When a function is passed as a dependency of an effect hook.
4
Optimising a custom Hook: If you’re writing a custom Hook, it’s recommended to wrap any functions that it returns into useCallback

During subsequent renders, it will either return an already stored function from the last render (if the dependencies haven’t changed) or return the function you have passed during this render.

Difficulty: 5/10

Topics: memoization, dependency array, performance

Scenario Questions

0-2 years experience

1
You have a parent component that passes a callback prop to a child that renders a list. How would you use useCallback to prevent the child from re‑rendering unnecessarily?
2
If you forget to include a value in the dependency array of useCallback, what could happen when that value changes?
3
Show me how you'd wrap an event handler with useCallback in a functional component that fetches data on button click.

2-5 years experience

1
We added useCallback to memoize a fetch function, but the component still makes API calls on every render. Walk me through how you'd debug this.
2
When would you decide not to use useCallback even if a child component is wrapped with React.memo?
3
Explain the trade‑offs of using useCallback for a large list of items where each item receives its own memoized handler.

5-8 years experience

1
In a complex dashboard with dozens of widgets, each receiving callbacks via context, how would you structure useCallback usage to keep re‑renders minimal while avoiding stale closures?
2
Describe how you’d profile the performance impact of useCallback across a high‑traffic page and decide whether to keep or remove it.
3
If a library you depend on expects stable function references but you also need to capture changing props, how would you design the hook usage to satisfy both?

8+ years experience

1
Our team is migrating a legacy codebase that heavily recreates functions each render. How would you create a shared utility or pattern around useCallback to improve maintainability across multiple squads?
2
When designing a component library that will be used by many teams, what guidelines would you set for when to expose props that require callers to wrap callbacks with useCallback?
3
Consider a micro‑frontend architecture where callbacks are passed across bundle boundaries. What are the implications of useCallback on bundle size and runtime behavior, and how would you address them?

Follow-up Questions

❓What would you look for in the React DevTools to confirm the memoization is working?
❓How does useCallback differ from useMemo in this context?
❓Can you think of a scenario where useCallback could actually degrade performance?