Discuss 'useMemo' hook.
useMemo is a React Hook used to cache the result of a costly calculation between re-renders.
- 1
Skipping expensive recalculations
- 2
Skipping re-rendering of components
- 3
Memoizing a dependency of another Hook
- 4
Memoizing a function
- 1
It should be pure, should take no arguments, and should return a value of any type.
- 2
React will call this function during the initial render.
- 3
React will return the same value on the next renders if the dependencies have not changed since the last render.
- 4
Otherwise, it will call the calculatevalue function, return its result, and store it so it can be reused later.
- 5
By default, React re-renders all of its children recursively when a component re-renders. useMemo can also help you optimise the performance of re-rendering child components.
- 1
The list of all reactive values that are referenced inside the calculateValue code.
- 2
Reactive values include props, state, and all the variables and functions declared directly inside your component body.
- 3
Dependencies should also be memoised if they might be created on every render : const dependencyVariable={x:3, y:5}
Scenario Questions
- 1
How would you use useMemo to avoid recalculating a filtered list each time the component re-renders?
- 2
What happens if you omit the dependency array when calling useMemo?
- 3
Can you write a short snippet where useMemo wraps a heavy computation and explain why it helps?
- 1
We added a useMemo around a derived state, but the UI still feels sluggish. What could be causing that?
- 2
Why might a useMemo that depends on an object prop not memoize as expected, and how would you fix it?
- 3
When a component receives frequent prop updates, how do you decide which values belong in the useMemo dependency array?
- 1
Design a reusable Table component that memoizes row rendering. What trade‑offs do you consider between useMemo and React.memo?
- 2
During a code review you see a useMemo with a large dependency list causing unnecessary recomputations. How would you refactor it?
- 3
At scale, how does excessive useMemo affect memory usage and what strategies would you use to monitor or limit its impact?
- 1
Our monorepo has many legacy components using useMemo inconsistently. How would you create a migration plan to standardize memoization practices across teams?
- 2
When building a cross‑team shared data‑visualization library, how do you decide which calculations should be memoized with useMemo versus using a selector library like reselect?
- 3
Discuss the impact of useMemo on server‑side rendering and hydration performance, and how you'd guide teams to handle it.
Follow-up Questions
- ❓What are the risks of overusing useMemo?
- ❓How does useMemo differ from useCallback in practice?
- ❓Can you describe a scenario where removing useMemo actually improved performance?