Что такое useMemo, useCallback и React.memo? Когда лучше использовать?

React.memo — это HOC (Higher Order Component), который мемоизирует функциональный компонент, предотвращая его повторный рендер, если пропсы не изменились. Это помогает оптимизировать производительность, особенно для тяжелых компонентов.

Пример:

const MyComponent = React.memo(function MyComponent(props) {
  // компонент перерисуется только если props изменятся
  return <div>{props.value}</div>;
});

useCallback — хук, который мемоизирует функцию, возвращая ту же ссылку на функцию между рендерами, если зависимости не изменились. Это полезно, когда функцию передают в дочерние компоненты, чтобы не вызывать лишние перерисовки.

Пример:

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

Используется, когда нужно передать callback в оптимизированный дочерний компонент (например, обернутый в React.memo), чтобы избежать ненужных обновлений из-за изменения ссылки на функцию.