What is React.memo?

React.memo is a Higher-Order Component (HOC) in React that memoizes functional components, preventing unnecessary re-renders when props haven’t changed.

• 🧠 Think of it as: PureComponent but for functional components.
• 🔥 Performance Boost: Helps optimize re-renders for components that receive the same props frequently.

🛠️ Basic Syntax:

• MyComponent will only re-render if its props change.

🧩 Example Without React.memo (Unnecessary Re-renders):

import React, { useState } from 'react';

const Child = ({ name }) => {
console.log('Child re-rendered'); // Logs on every parent render
return <h2>Hello, {name} 👋</h2>;
};

const Parent = () => {
const [count, setCount] = useState(0);

return (
<div>
<h1>Count: {count}</h1>
<button onClick={() => setCount(count + 1)}>Increment ➕</button>
<Child name="Naveen" />
</div>
);
};

export default Parent;

🛑 Issue:

• Every time you click “Increment”, the Child re-renders—even though its name prop hasn’t changed.

✅ Optimized with React.memo:

import React, { useState } from 'react';

const Child = React.memo(({ name }) => {
console.log('Child re-rendered'); // Only logs when `name` changes
return <h2>Hello, {name} 👋</h2>;
});

const Parent = () => {
const [count, setCount] = useState(0);

return (
<div>
<h1>Count: {count}</h1>
<button onClick={() => setCount(count + 1)}>Increment ➕</button>
<Child name="Naveen" />
</div>
);
};

export default Parent;

🚀 What Changed?

• React.memo wraps the Child component.
• Now, Child only re-renders if the name prop changes.
• Clicking the button increments the counter but doesn’t re-render Child.

⚡ When to Use React.memo?

• ✅ Components that render frequently with the same props.
• ✅ Components that are expensive to render (e.g., heavy UI logic).
• ✅ Pure components with simple props.

⚠️ When NOT to Use React.memo?

• ❌ For components with dynamic or complex props (e.g., functions or objects that change references).
• ❌ If the re-render cost is negligible—over-optimizing can backfire.

🧠 Advanced: Using React.memo with areEqual Function

To control re-renders more precisely, pass a custom comparison function.

const Child = React.memo(({ user }, prevProps) => {
return prevProps.user.id === user.id;
});

const Parent = () => {
const [user, setUser] = useState({ id: 1, name: 'Naveen' });

return <Child user={user} />;
};

Here, Child will only re-render if the user.id changes, ignoring changes in other properties.

🚀 Pro Tip:

• Pair React.memo with useMemo or useCallback for props that are functions or objects to avoid reference changes.
• Use it wisely! Overusing React.memo can lead to premature optimizations.