React.memo() is used to:

Prevent unnecessary component re-rendering

It improves:

  • Performance
  • Speed
  • Large project efficiency

Best Use Cases

Use memo() for:

  • Sidebar
  • Navbar
  • Table rows
  • Cards
  • Charts
  • Forms
  • Dashboard widgets

Without Memo

function UserCard({ name }) {
 console.log("UserCard Render");
 return <h1>{name}</h1>;
}
export default UserCard;

Problem:

Component re-renders every parent update

With Memo

import React, { memo } from "react";
const UserCard = memo(({ name }) => {
 console.log("UserCard Render");
 return <h1>{name}</h1>;
});
export default UserCard;

Now component renders only when props change.

Parent Example

import { useState } from "react";
import UserCard from "./UserCard";
function App() {
 const [count, setCount] = useState(0);
 return (
   <>
     <button onClick={() => setCount(count + 1)}>
       Count {count}
     </button>
     <UserCard name="Mahendra" />
   </>
 );
}
export default App;


Without memo Output

Button click →
UserCard Render

Every click re-renders child.

With memo Output

Button click →
No UserCard re-render

Because props did not change.