Если вы никогда не слышали о useCallback() и useEffect(), я настоятельно рекомендую вам проверить официальные документы, перечисленные ниже.

В итоге:

useEffect()

useEffect() - это React Hook, который позволяет вам обрабатывать побочные эффекты в ваших функциональных компонентах React.

Вы можете использовать его для всего, что не влияет напрямую на ваш код UI / JSX (это может в конечном итоге повлиять на него, например, если вы получаете данные с какого-то сервера, но для текущего цикла рендеринга этого не произойдет).

useEffect() позволяет зарегистрировать функцию, которая выполняется ПОСЛЕ текущего цикла рендеринга.

useEffect() запускается после каждого цикла рендеринга (т. Е. Всякий раз, когда ваш функциональный компонент запускается / рендерится повторно), если вы не передадите второй аргумент в массив зависимостей эффекта.

При наличии такого массива зависимостей useEffect() будет только повторно запускать функцию, которую вы передали в качестве первого аргумента, при изменении одной из зависимостей.

useCallback()

useCallback() часто используется вместе с useEffect() , потому что он позволяет предотвратить повторное создание функции. Для этого важно понимать, что функции - это просто объекты JavaScript.

Следовательно, если у вас есть функция (A) внутри функции (B), внутренняя функция (= A) будет воссоздана (т.е. создается совершенно новый объект) всякий раз, когда выполняется внешняя функция (B).

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

Пример:

Обычно это не проблема, что innerFunction воссоздается для каждого цикла рендеринга.

Но это становится проблемой, если innerFunction является зависимостью от useEffect():

Почему приведенный выше код проблематичен?

Эффект запускается повторно всякий раз, когда innerFunction изменяется. Как уже говорилось, он воссоздается всякий раз, когда MyComponent перестраивает

Поскольку функции являются объектами, а объекты - ссылочными типами, это означает, что эффект будет запускаться повторно для каждого цикла рендеринга.

Это все еще может быть не большой проблемой, но это так, если innerFunction делает что-то, что заставляет MyComponent перестраиваться (т.е. если он либо делает что-то, что изменяет свойства или состояние).

Теперь у вас будет бесконечный цикл!

useCallback() поможет вам предотвратить это.

Оборачивая его вокруг объявления функции и определяя зависимости функции, он гарантирует, что функция будет воссоздана заново, только если ее зависимости изменились.

Следовательно, функция больше НЕ перестраивается при каждом цикле рендеринга = ›Вы выходите из бесконечного цикла!