Q100- What is React.memo() and when should it be used?

React.memo() is a higher-order component (HOC) that memoizes a functional component, preventing it from re-rendering unnecessarily when its props haven’t changed.

It is similar to PureComponent for class components.

---

Why Use React.memo()

• Improves performance by avoiding expensive re-renders
• Useful for functional components that render often or receive large props
• Works only for props comparison, not for state or context changes

---

Basic Example

import React from "react";

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

function Parent() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <Child name="Alice" /> {/* Will not re-render when count changes */}
      <button onClick={() => setCount(count + 1)}>Increment {count}</button>
    </div>
  );
}

export default Parent;

Explanation:

• Clicking the button updates count in Parent
• Child does not re-render because its name prop didn’t change
• Console logs confirm fewer renders → better performance

---

Advanced: Custom Comparison

• By default, React.memo() does shallow comparison of props
• Can provide a custom comparison function if needed:

const Child = React.memo(
  ({ user }) => <p>{user.name}</p>,
  (prevProps, nextProps) => prevProps.user.id === nextProps.user.id
);

• Only re-renders if user.id changes

---

⚡ When to Use

• Components that render frequently
• Components with heavy computations or large trees
• Components that receive props which rarely change

Avoid using blindly—overuse can add unnecessary complexity.

---

⚡ In short:

React.memo() optimizes functional components by memoizing them, re-rendering only when props change, improving performance in React apps with expensive or frequent re-renders.