28) React.memo

What is React.memo
React.memo is a higher-order component that prevents unnecessary re-renders by memoizing a functional component and re-rendering it only when its props change.
React.memo is a performance optimization in React that prevents unnecessary re-renders of functional components.
React.memo is a higher-order component (HOC) that,
i) memoizes a component
ii) re-renders it only when its props change

Problem Without React.memo

const Child = (props) => {
  console.log("Child Rendered");
  return <h2>{props.name}</h2>;
}

const Parent = () => {
  const [count, setCount] = useState(0);

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

Here, When you click on button,
Parent component will get re-renders, also the Child component gets re-renders (even though props didn’t change).

Solution: React.memo

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

Here, When you click on button,
Parent component will get re-renders but due to React.memo the Child re-renders ONLY if name props gets changed.

How React.memo Works
Performs shallow comparison of props
If props are equal → skips rendering
If props change → re-renders

Use it when,
i) Component re-renders frequently
ii) Props rarely change
iii) Rendering is expensive
Avoid when,
i) Component is small/simple
ii) Props change often
iii) Adds unnecessary complexity

React.memo vs useMemo vs useCallback
i) What it memoizes
React.memo - Component
useMemo - Value
useCallback - Function
ii) Use case
React.memo - Prevent re-render
useMemo - Cache result
useCallback - Stable function reference

Key Benefits
i) Improves performance
ii) Reduces unnecessary renders
iii) Optimizes large applications