React.memo Component Memoization
Last updated: 2026-11-02
React.memo Component Memoization
Wrapping a component in React.memo lets it skip a re-render when its props stay equal in a shallow comparison, reusing the previous output as is. It suits child components that are expensive to render and receive stable props, and the benefit is biggest when the parent refreshes often, for example while typing or moving the mouse. Because the comparison is shallow, a new object or function in the props defeats the cache, so memo usually has to be paired with useMemo or useCallback.
| Group | Effects & Performance |
|---|---|
| Kind | API |
| Since | React 16.6 |
ℹ️ 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 MemoList = memo(function List({ items, onSelect }) {
return items.map(it => <Row key={it.id} item={it} onSelect={onSelect} />)
})
// equal props after a shallow comparison mean the render is skipped
// the second argument can customize the comparison: memo(Cmp, (prev, next) => equal)⚙️ Parameters
| Component | The component to wrap, usually a presentational component that is expensive to render. |
|---|---|
| areEqual (optional) | A custom comparison function (prevProps, nextProps) => boolean; returning true means the props are equal and the render is skipped. |
Returns：Returns a memoized copy of the component, used exactly like the original one.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
Clicking the button repeatedly only updates the counter text and the console stops printing "The list rendered" — the items reference never changes, so memo lets the whole list skip the re-render.💡 Key Points
🏷️ More Effects & Performance
💡 Related Cases
📚 Related Tutorials
❓ FAQ
