When is memoization needed in React? useMemo, useCallback, React.memo.

Memoization in React is used to optimize performance by avoiding unnecessary re-computations or re-renders.

• useMemo — memoizes the result of a computation. It is used when there are expensive calculations dependent on certain dependencies.

• useCallback — memoizes the function itself so that its reference does not change between renders if dependencies haven't changed. This is useful when passing functions to child components optimized with React.memo.

• React.memo — wraps a component and prevents it from re-rendering if props haven't changed (shallow comparison).

Example:

const ExpensiveComponent = React.memo(({ onClick }) => {
  console.log('Render ExpensiveComponent');
  return <button onClick={onClick}>Click me</button>;
});

function Parent({ value }) {
  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []);

  const computedValue = useMemo(() => {
    // expensive calculation
    return value * 2;
  }, [value]);

  return (
    <div>
      <div>{computedValue}</div>
      <ExpensiveComponent onClick={handleClick} />
    </div>
  );
}

Here, useMemo prevents re-computation, useCallback keeps the function reference stable, and React.memo prevents unnecessary re-rendering of the child component.