useMemo и useCallback — хуки React для оптимизации производительности, но они решают разные задачи:
Расскажи подробнее про useMemo и useCallback: в чём между ними разница и когда их применять?
useMemo и useCallback — хуки React для оптимизации производительности, но они решают разные задачи:
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
useMemo и useCallback — хуки React для оптимизации производительности, но они решают разные задачи:
- useMemo запоминает результат вычисления функции и пересчитывает его только при изменении зависимостей. Используется, когда нужно избежать дорогостоящих вычислений при каждом рендере.
- useCallback запоминает саму функцию и возвращает её же, если зависимости не изменились. Это полезно, когда функцию передают в дочерние компоненты, чтобы избежать лишних перерендеров из-за изменения ссылки на функцию.
Нужно использовать их только там, где есть реальная выгода:
- Если вычисления или создание функций простые и не влияют на производительность, их применять не стоит — это добавит лишний код и усложнит поддержку.
- Если передаёте колбэки в оптимизированные дочерние компоненты (например, с
React.memo),useCallbackпоможет избежать лишних рендеров. - Если есть тяжёлые вычисления,
useMemoпоможет кешировать результат.
Пример:
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => { doSomething(a); }, [a]);
Итого, не нужно использовать их повсеместно, а только там, где есть доказанная необходимость в оптимизации.