Когда использовать useMemo и useCallback: краткое руководство для поклонников React

Если вы разработчик React, возможно, вы уже сталкивались с обсуждениями React useMemo vs useCallback в Интернете и в конечном итоге запутались еще больше, чем когда-либо прежде. Может быть очень сложно понять разницу между useMemo и useCallback. Все нормально! Поначалу может быть сложно разобраться с React-Hooks, но в дальнейшем они могут оказаться чрезвычайно полезными.

В этой статье мы покажем вам разницу между useCallback и useMemo и когда использовать useCallback и useMemo.

Разница между useMemo и useCallback

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

Что такое React-хуки?

Хуки — это новые функции, представленные в React, которые позволяют использовать useState и другие функции React без написания класса. Хуки — это методы и функции, которые «прицепляются» к функциям состояния и жизненного цикла React.

useCallback против useMemo

Хук useCallback используется всякий раз, когда дочерний компонент выполняет повторную визуализацию снова и снова без особой необходимости. Когда вы используете useCallback, вы можете предотвратить этот ненужный повторный рендеринг, возвращая тот же экземпляр этой функции, который передается, вместо того, чтобы каждый раз создавать новый экземпляр. Это может значительно сэкономить время (и деньги, потраченные на часы разработки). Передача массива зависимостей с помощью обратного вызова memoized приведет к созданию мемоизированной версии, которая будет изменена только при изменении зависимости.

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

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

• ПРОЧИТАЙТЕ БОЛЬШЕ – Как и почему вы должны организовать свои файлы
• 9 лучших способов использовать электронные гаджеты в классе

Когда использовать useCallback против useMemo

Итак, когда следует использовать useCallback, а когда лучше всего использовать useMemo? Давайте посмотрим на пример. Если ресурсоемкий и ресурсоемкий код принимает аргументы и возвращает значение, useMemo — лучший вариант. Таким образом, вы можете продолжать ссылаться на значение между рендерингами, не перезапуская код и не тратя впустую свое время и вычислительную мощность.

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

Что такое useEffect?

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

Этот хук показывает React, что компонент должен выполнить действие после рендеринга. При обновлении DOM переданный вами эффект будет сохранен. Вы также можете выполнить выборку данных для достижения этого результата.

Короче говоря, useCallback, useMemo и useEffect связаны с повышением производительности между повторным рендерингом компонентов в приложениях React.

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

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

• ЧИТАЙТЕ БОЛЬШЕ – Как выбрать лучшую CMS
• Каковы плюсы и минусы криптографических методов?

Вывод

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

• Оба принимают функцию и массив зависимостей
• useMemo запоминает возвращаемое значение, useCallback запоминает функцию.

Разница между useMemo и useCallback довольно очевидна! Эти инструменты могут сэкономить время и деньги, но только в том случае, если они используются в надлежащем контексте и среде.

Я надеюсь, что это руководство помогло вам узнать о том, когда использовать useMemo и useCallback: краткое руководство для поклонников React . Если вы хотите что-то сказать, дайте нам знать через разделы комментариев. Если вам понравилась эта статья, поделитесь ею и подпишитесь на WhatVwant в Facebook, Twitter и YouTube, чтобы получать дополнительные технические советы.

Когда использовать useMemo и useCallback — часто задаваемые вопросы