useMemo Memoized Computation
Last updated: 2026-11-02
useMemo Memoized Computation
useMemo caches the result of a computation: while the dependencies stay the same it returns the previous result and skips the expensive filtering, sorting or mapping, and it also keeps the reference of an object or array stable, which pairs with a dependency array and memoized child components. It is a performance tool, not a semantic guarantee: React is free to discard the cache, so the result must stay correct even when the memo is recomputed from scratch.
| Group | Effects & Performance |
|---|---|
| Kind | Hook |
| Since | React 16.8 |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
const result = useMemo(() => {
return computeHeavy(list, keyword) // the expensive computation
}, [list, keyword]) // no recomputation while the deps stay the same⚙️ Parameters
| factory | A function without arguments that returns the value to cache. It only runs again when the dependencies change. |
|---|---|
| deps | The dependency array: any change recomputes the value; an empty array computes it only on mount. |
Returns：Returns the cached result of the factory; while the dependencies do not change it returns the very same reference as last time.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
Typing a keyword filters the list in real time; clicking "Toggle theme" only swaps the background color and does not filter again (the useMemo cache is doing its job).💡 Key Points
🏷️ More Effects & Performance
💡 Related Cases
📚 Related Tutorials
❓ FAQ
