✅ What is React.memo?

React.memo is a higher-order component (HOC) used for performance optimization in React. It memoizes the rendered output of a functional component and skips re-rendering if the component receives the same props as the previous render. In simple terms, if props don’t change, React reuses the previous result instead of rendering again.

🔹 Why Use React.memo?

By default, when a parent component re-renders, all its child components also re-render, even if their props haven’t changed. This can cause unnecessary re-renders, especially for presentational or pure UI components. React.memo prevents this by doing a shallow comparison of props and skipping renders when nothing has changed.

🚀 Syntax

const MemoizedComponent = React.memo(MyComponent);

🔧 Example 1: Without React.memo

import React, { useState } from "react";

function Child({ name }) {
  console.log("Child component re-rendered!");
  return <h2>Hello, {name}</h2>;
}

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

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

export default App;

Issue: Even when only count changes, the Child component re-renders unnecessarily.

🔄 Example 2: With React.memo

import React, { useState } from "react";

const Child = React.memo(function Child({ name }) {
  console.log("Child component re-rendered!");
  return <h2>Hello, {name}</h2>;
});

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

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

export default App;

Result: Clicking the button re-renders only App. Child does not re-render because its prop name remains the same.

🧠 Key Concepts of React.memo

Memoization: Remembers the last rendered output and reuses it if props are unchanged
Shallow Comparison: Compares primitive values directly and object references by reference
Custom Comparison: Allows you to control when a component should re-render

🔧 Example 3: Custom Comparison Function

const Child = React.memo(
  function Child({ user }) {
    console.log("Child rendered!");
    return <h2>Hello, {user.name}</h2>;
  },
  (prevProps, nextProps) => prevProps.user.name === nextProps.user.name
);

Here, the component re-renders only when user.name changes, even if a new user object is passed.

📌 When to Use React.memo

For pure functional components with the same output for the same props
For components that are expensive to render
When components re-render frequently without prop changes

✅ Best Practices

Use React.memo selectively, not everywhere
Combine it with useCallback and useMemo to stabilize props
Best suited for presentational components
Avoid premature optimization—measure before applying

📚 React.memo vs PureComponent

React.memo: Used with functional components, shallow comparison of props
PureComponent: Used with class components, shallow comparison of props and state

🧾 Conclusion

React.memo is a simple yet powerful tool to avoid unnecessary re-renders in React applications. When used correctly—especially with stable props—it can significantly improve performance. However, it should be applied thoughtfully, focusing on components where rendering cost and frequency justify memoization.

React.memo in React Explained with Examples