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

Что такое useCallback?

useCallback — это один из хуков React, который хранит определение функции в кеше (памяти) между каждым повторным рендерингом, который может произойти.

Как это использовать?

Нам нужно передать две вещи:

  1. Определение функции, которую вы хотите кэшировать (запоминать) между повторными рендерингами.
  2. Список зависимостей, включая каждое значение в вашем компоненте, которое используется внутри вашей функции.

Как это работает?

В первом рендере функция, которую мы передали, является возвращаемой функцией, которую мы получим от useCallback.

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

Зачем нам это нужно?

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

Пожалуйста, не путайте это с useMemo. Я собираюсь написать еще одну статью для useMemo, идея здесь та же, но единственное отличие состоит в том, что useCallback возвращает функцию, а useMemo возвращает значение.

Решения наиболее часто встречающихся проблем:

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

Что вы можете сделать, так это создать компонент для одного элемента и использовать там useCallback it, как в примере ниже.

Надеюсь, это было ясно для вас, по каждому вопросу не стесняйтесь писать мне!!