❄️ Оптимизация производительности в React

Разберем три инструмента, которые помогают избежать лишних вычислений и ререндеров: useMemo, useCallback и React.memo.

1️⃣ useMemo

❕Хук для мемоизации результатов вычислений

Когда использовать
➖ Для тяжелых вычислений (например, фильтрация, сортировка, преобразование данных).

2️⃣ useCallback

❕Хук, который мемоизирует функции.

Когда использовать
➖ Для колбэков, передаваемых в дочерние компоненты, особенно если они оптимизированы с помощью React.memo.
➖ Для колбэков, которые зависят от изменяющихся данных в useEffect.

3️⃣ React.memo

❕ HOC-компонент, который предотвращает лишние ререндеры функциональных компонентов.
Компонент рендерится только, если его пропсы изменились.

Когда использовать
➖ Для компонентов, которые рендерятся часто, но их пропсы изменяются редко.

❄️ Когда не использовать?
Использование этих инструментов должно быть обоснованным, чтобы не сделать только хуже!
Иногда они могут добавить больше накладных расходов, чем пользы

#React