React Frontend Developer

Question 1

Почему Хук useMemo в React не используется для замены shouldComponentUpdate?

Accepted Answer

Хук useMemo используется для оптимизации производительности, запоминая результат вычисления и избегая его повторного выполнения при неизменных зависимостях. Однако он не предназначен для управления рендерингом компонентов, как это делает shouldComponentUpdate, который отвечает за решение о необходимости обновления компонента.

Question 2

Отличие useMemo от useCallback.

Accepted Answer

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

Question 3

Для чего нужны useMemo и useCallback? Как работает мемоизация?

Accepted Answer

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

Question 4

В чем разница между useMemo и useCallback?

Accepted Answer

useMemo мемоизирует вычисляемое значение.useCallback мемоизирует функцию.Оба хука зависят от массива зависимостей.Они используются для оптимизации перерендеров.

Question 5

Какие есть издержки у чрезмерного использования useMemo и useCallback?

Accepted Answer

useMemo и useCallback сами по себе имеют стоимость. Они усложняют код и увеличивают когнитивную нагрузку. При неправильном использовании они не дают выигрыша в производительности. Иногда они даже замедляют приложение. Эти хуки нужно применять осознанно и точечно.

Question 6

В чём разница между мемоизацией значений и мемоизацией функций?

Accepted Answer

Мемоизация значений (useMemo) сохраняет результат вычисления, чтобы не пересчитывать его без нужды. Мемоизация функций (useCallback) сохраняет ссылку на функцию, чтобы она не создавалась заново. В React это важно из-за shallow сравнения props и зависимостей. Оба инструмента полезны, когда вычисления дорогие или когда ссылка влияет на ререндер дочерних компонентов.

Question 7

Почему передача нового объекта в массив зависимостей useMemo при каждом рендере не даёт эффекта мемоизации?

Accepted Answer

useMemo сравнивает зависимости с помощью Object.is, то есть по ссылке. Если в массив зависимостей передаётся новый объект, созданный при каждом рендере, его ссылка будет отличаться от предыдущей. React считает, что зависимости изменились, и пересчитывает мемоизированное значение, что сводит на нет эффект мемоизации.

Question 8

Как передать примитивные значения из объекта в массив зависимостей useMemo вместо ссылки на объект?

Accepted Answer

Вместо передачи объекта целиком, нужно передавать его примитивные свойства по отдельности. Например, вместо useMemo(() => fn(obj), [obj]) используйте useMemo(() => fn(obj.a, obj.b), [obj.a, obj.b]). Это гарантирует, что useMemo пересчитает значение только при изменении конкретных примитивов, а не при создании нового объекта с теми же значениями.

Question 9

Чем поможет useMemo при оптимизации компонента с частыми обновлениями состояния?

Accepted Answer

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

Question 10

Как понять, достаточно ли сложный кейс, чтобы применить useMemo или useCallback?

Accepted Answer

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

Вопросы React Frontend Developer