SamwithCode

React Memo Prevent Unnecessary Re-Render in Raect js 2025

React.memo in React JS 2025 – Prevent Unnecessary Re-Render

In React, React.memo is a higher-order component that helps you prevent unnecessary re-renders of functional components. It memoizes the rendered output, and only re-renders the component if the props change.

✅ When to Use React.memo:

  • When your component renders the same UI for the same props.
  • When performance is important (for large lists or deeply nested structures).
  • When parent components re-render frequently.

💡 Example: Without and With React.memo

// Without React.memo
const Child = ({ name }) => {
  console.log("Child render");
  return 
Hello {name}
;
};

export default Child;

// With React.memo
const Child = React.memo(({ name }) => {
  console.log("Child render");
  return 
Hello {name}
;
});

export default Child;

📌 Example with Parent

import React, { useState } from "react";
import Child from "./Child";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    

      
      
Count: {count}

      
    

  );
}

🔍 Output

Now, even if the parent component re-renders (due to count update), the child will not re-render unless its props change.

🚫 Warning:

  • Only use React.memo when necessary—it adds a bit of complexity.
  • Doesn’t work on deeply nested props unless you use custom comparison functions.