Back to Glossary

React.memo

React.memo

Intermediatereact1 min read
memoreact memomemoized componentpure componentshouldcomponentupdate
Official DocsSign in to save & take notes

Definition

A React HOC that prevents a component from re-rendering if its props haven't changed.

مكوّن عالي الترتيب (HOC) في React يمنع مكوّنًا من إعادة التصيير إذا لم تتغير الـprops.

Why It Matters

For a list of 155+ glossary term cards that all receive similar props, React.memo ensures only changed cards re-render when filters change.

لقائمة من 155+ بطاقة مصطلح تتلقى جميعها props متشابهة، React.memo يضمن إعادة تصيير البطاقات المتغيرة فقط عند تغيير الفلاتر.

Full Definition

React.memo wraps a component and memoizes it. The component only re-renders when its props change (by shallow comparison). Used for pure presentational components that receive the same props frequently, like list items in a large list. Best combined with useCallback for event handlers passed as props. Without memo, every parent state change re-renders all children.
React.memo يلفّ مكوّنًا ويحفظه في الذاكرة المؤقتة. يُعيد المكوّن تصييره فقط عند تغيير الـprops (بالمقارنة السطحية). يُستخدم للمكونات التقديمية النقية التي تتلقى نفس الـprops بشكل متكرر.

Example Usage

“const TermCard = React.memo(function TermCard({ term }: { term: GlossaryTerm }) { return <Link href={`/glossary/${term.slug}`}>...</Link>; });”

“const TermCard = React.memo(function TermCard({ term }: { term: GlossaryTerm }) { return <Link href={`/glossary/${term.slug}`}>...</Link>; });”

Knowledge Graph

AI Builder Tips

Sign in for more features

Avoid these mistakes when using React.memo:

1

Wrapping every component in memo — it adds overhead

2

Passing object/function props without memoizing them — they always fail shallow comparison

Sign in to unlock guided AI explanations from AI Teacher.

Generate a Prompt

Copy this prompt and use it directly with any AI model — no setup needed.

Ready-to-Use Prompt
Help me build a project using React.memo.

Explain:
1. What is React.memo and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Wrapping every component in memo — it adds overhead, Passing object/function props without memoizing them — they always fail shallow comparison
5. Best practices and production tips

Official Resources

Official Documentation
Browse all AI termsCreate free account