When should we choose to optimise with useMemo?

Optimising with useMemo is only valuable in a few cases:

1
The calculation you’re putting in useMemo is noticeably slow, and its dependencies rarely change.
2
We pass the result of a function as a prop to a component wrapped in memo. We want to skip re-rendering if the value hasn’t changed. Memoization lets your component re-render only when dependencies aren’t the same.
3
The value you’re passing is later used as a dependency of some Hook. For example, maybe another useMemo calculation value depends on it. Or maybe useEffect depends on it

Difficulty: 5/10

Topics: performance optimization, memoization, react hooks

0-2 years experience

1
You have a component that maps over an array to compute a derived total. How would you decide whether to wrap that calculation in useMemo?
2
If the component re‑renders on every parent state change, what effect does adding useMemo have, and what could go wrong if you use it on cheap calculations?

2-5 years experience

1
A table receives a large data set and applies sorting and filtering, making the UI feel sluggish. Walk me through how you'd use useMemo to improve it and what trade‑offs you'd consider.
2
You added useMemo around a derived value but the component still re‑renders unexpectedly. How would you debug the issue and verify the memoization is actually effective?

5-8 years experience

1
Our dashboard renders dozens of widgets, each performing heavy calculations. How would you design a strategy using useMemo (or alternatives) to keep overall render time low while avoiding stale data?
2
When scaling from a few hundred to tens of thousands of rows, what edge cases appear with useMemo—such as dependency pitfalls or memory pressure—and how would you mitigate them?

8+ years experience

1
We're migrating a legacy codebase to a new React architecture and want systematic performance guidelines. How would you define when useMemo should be applied across teams, and what governance or tooling would you put in place to prevent misuse?
2
In a micro‑frontend environment where multiple teams share UI components, how do you balance using useMemo for local optimization against the risk of hidden coupling or versioning issues?

❓What metric would you look at to confirm the memoization helped?
❓Can you describe a dependency that could cause the memoized value to become stale?
❓When might adding useMemo actually hurt performance?