Расскажи про мемоизацию в React: useMemo, useCallback, React.memo. Когда их использовать?

Мемоизация в React — это оптимизация, позволяющая избежать ненужных перерасчётов и повторных рендеров, сохраняя результаты вычислений или функции между рендерами.

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

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

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

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

• React.memo — HOC, который мемоизирует сам компонент, предотвращая его повторный рендер, если пропсы не изменились (по поверхностному сравнению).

const MemoizedComponent = React.memo(MyComponent);

Когда использовать:

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

Важно не злоупотреблять мемоизацией, так как она сама по себе имеет накладные расходы. Используйте её там, где есть реальные проблемы с производительностью.