What Is React Memo? Complete Example Guide With Usage Demo

What Is React Memo?

React.memo is a higher-order component that helps optimize functional components by preventing unnecessary re-renders when props do not change.

---

Basic Syntax

const MemoizedComponent = React.memo(Component);

---

Example

import React, { useState } from "react";

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

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

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

✅ Child only re-renders if the name prop changes, not when count changes.

---

Key Points

• Optimizes functional components
• Prevents unnecessary re-renders
• Works only with props (not state)
• Combine with useCallback for better performance

---

Conclusion

React Memo is a simple performance optimization tool to reduce rendering overhead and make React apps faster.

---

Citations

https://savanka.com/category/learn/react/
https://www.w3schools.com/REACT/DEFAULT.ASP