Расскажите про мемоизацию в React: useMemo, useCallback и React.memo. Как они работают и зачем нужны?

В React мемоизация помогает оптимизировать производительность, предотвращая ненужные повторные вычисления и рендеры.

• useMemo — мемоизирует результат вычисления функции. Используется, когда нужно запомнить сложное вычисление и пересчитывать его только при изменении зависимостей.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

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

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

• React.memo — это HOC (Higher Order Component), который мемоизирует сам компонент. Он предотвращает повторный рендер компонента, если пропсы не изменились.

const MemoizedComponent = React.memo(MyComponent);

Вместе эти инструменты помогают уменьшить количество лишних рендеров и вычислений, что особенно важно в больших приложениях с тяжелыми компонентами или сложными вычислениями.