React: What is React.memo() and when to use it?

React.memo() is a HOC (Higher-Order Component) that memoizes a component and skips re-rendering if props have not changed.

Simple analogy: Imagine a waiter who asks the chef "What to cook?" every time, even if the order has not changed. React.memo is like a notepad: the waiter checks the notepad and if the order is the same — does not bother the chef.

1// Without memo — re-render on every parent update
2function ExpensiveList({ items }) {
3  console.log("ExpensiveList rendering");
4  return items.map(item => <li>{item.name}</li>);
5}
6
7// With memo — re-render ONLY when items change
8const ExpensiveList = React.memo(function ExpensiveList({ items }) {
9  console.log("ExpensiveList rendering");
10  return items.map(item => <li>{item.name}</li>);
11});

When to use:

• Component renders frequently, but its props rarely change.
• Component is expensive to render (large list, heavy logic).
• You are passing callbacks to a child component.

When NOT to use:

• Props always change (memoization is useless).
• Component is simple and fast (memo adds overhead).

React.memo + useCallback:

1const handleClick = useCallback(() => {}, []);
2<MemoizedButton onClick={handleClick} />  // Will not re-render