🧠 React.memo — Boost Performance by Preventing Unnecessary Renders

🧠 React.memo — Boost Performance by Preventing Unnecessary Renders

React.memo is a higher-order component that optimizes performance by skipping re-renders of a component if its props haven’t changed.

🎯 Why use React.memo?
• Improves rendering speed
• Saves CPU cycles
• Useful for components that render the same UI most of the time

🔧 Example:

import React from "react";
const Child = React.memo(function Child({ name }) {
console.log("Child rendered");
return <p>Hello, {name}</p>;
});

export default Child;

💡 Usage:
<Child name="Aman" />
If the name prop doesn’t change, Child won’t re-render.

📌 Key points:
• Works only for functional components
• Performs a shallow comparison of props
• Combine with useCallback or useMemo for best results

React.memo is a simple yet powerful tool for optimizing React apps — but use it wisely, only where it’s needed.