Что произойдет, если передавать новую функцию в мемоизированный компонент?

Как работает React.memo

React.memo — это компонент высшего порядка, который запоминает результат рендера и пропускает повторный рендер, если props не изменились. Сравнение props выполняется поверхностно (shallow comparison) по ссылкам. Если передать новую функцию, её ссылка будет отличаться от предыдущей, и React.memo посчитает, что props изменились, что приведет к ререндеру.

Пример проблемы

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

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <>
      <p>{count}</p>
      <Child onClick={() => setCount(c => c + 1)} />
    </>
  );
}

Каждый раз при вызове setCount родитель ререндерится, создается новая стрелочная функция для onClick, и Child тоже ререндерится, несмотря на React.memo.

Решение с useCallback

function Parent() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    setCount(c => c + 1);
  }, []);
  return (
    <>
      <p>{count}</p>
      <Child onClick={handleClick} />
    </>
  );
}

useCallback возвращает одну и ту же ссылку на функцию, пока не изменятся зависимости (в данном случае пустой массив). Теперь React.memo видит, что onClick не изменился, и пропускает ререндер Child.

Вывод

Передача новой функции в мемоизированный компонент сводит на нет пользу от мемоизации. Используйте useCallback для стабилизации ссылок на функции, передаваемые в качестве props, особенно если компонент тяжелый или часто ререндерится.