Questions
2 of 4
Basics
JSX
Virtual DOM
Reconciliation
State and Props
Components
Class Components
Function Components
Lifecycle functions
Code Sharing
Hooks
useState
useReducer
useMemo
useContext
useCallback
useEffect
Custom Hooks
New Hooks
HOC
Refs
Data Sharing
Events
Context API
Redux
Router
CSR-SSR
React APIs
Performance Optimisation
ReactDOM
Strict Mode
Security
When should we choose to optimise with useMemo?
Difficulty: 5/10
performance optimization, memoization, react hooks
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
Scenario Questions
0-2 years experience
- 1You have a component that maps over an array to compute a derived total. How would you decide whether to wrap that calculation in useMemo?
- 2If 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
- 1A 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.
- 2You 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
- 1Our 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?
- 2When 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
- 1We'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?
- 2In 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?
Follow-up Questions
- 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?