React Mastery / React Core Concepts

Memo

🧠 What is React.memo()?

React.memo() is a tool in React that helps your app run faster by stopping a component from re-rendering if its props didn’t change.

Think of it like this:

“If you gave me the same props as before, I’ll just show you the same result, no need to redo the work.”

✅ When to Use It?

Use React.memo() when:

  • Your component is re-rendering often

  • But the props usually stay the same

  • And the component is a functional component

🧩 Basic Example

  • The first time: it renders ✅

  • Next time: if you pass the same name, it will not re-render 🚫

  • If the name changes, then it will re-render ✅

⚠️ Why it might still re-render?

Even if the data looks the same, React might still think it's different.

Example:

<MyComponent user={{ name: "Alex" }} />

This creates a new object every time, so React thinks props changed, and re-renders the component.

✅ How to fix that?

We have already covered this topic in the previous chapter. Kindly go through it for a better understanding.