Подводные камни UseEffect для React-программистов

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

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

Не поймите меня неправильно, я люблю крючки, и у меня есть много нестандартных, которыми я часто пользуюсь. Но, к сожалению, на работе я часто вижу, как новые React-программисты изо всех сил пытаются понять, почему useEffectвызывает бесконечные циклы или как правильно обращаться с его массивом зависимостей.

Вот наиболее распространенные трудности, с которыми вы можете столкнуться при использовании useEffect.

Позвольте ESLint помочь вам

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

Иногда useEffectведет себя непредсказуемо из-за некорректных зависимостей. Чтобы избежать таких ситуаций, используйте eslint-plugin-react-hooks , потому что мы не хотим лгать о зависимостях.

Например, у меня есть элементарный компонент, который получает текст из реквизита и пытается получить статьи по заданному тексту. Я хочу получить данные при первом монтировании компонента. Для этого мне нужен useEffectпустой массив зависимостей.

Вызов getArticlesиз useEffectсоздает предупреждение, потому что getArticlesиспользует значение из реквизита.

Перебор.

Итак, мы не лжем о зависимостях и соглашаемся добавить в список все необходимые переменные и функции. И что мы получаем?

О, еще одно предупреждение!

Итак, из-за нашего сообщения наша функция воссоздается при каждом повторном рендеринге, который может вызвать useEffectхук; это не то, что нам нужно, поэтому вопрос — как это исправить?

Здесь у нас есть следующие варианты:

1. Чтобы определить функцию внутри useEffect.
2. Чтобы обернуть функцию в useCallbackхук.

Бесконечная петля

К сожалению, такая ситуация случается очень часто. Например, внутри useEffectмы пытаемся изменить какое-то значение в состоянии на основе его предыдущего значения и должны добавить это значение в массив зависимостей.

И затем мы получаем бесконечный цикл, потому что useEffectон запускается после каждого повторного рендеринга и обнаруживает, что значение из состояния изменено, поэтому он пытается изменить его повторно. Звучит просто и логично, но для многих программистов это ловушка.

Что мы можем сделать?

1. Обновите состояние через функцию из useStateхука useEffectбез каких-либо зависимостей.
2. Используйте отправку из useReducerхука для обновления состояния.

Самый простой способ контролировать состояние компонента — использовать useStateхук, но если ваше состояние становится более сложным, вам нужно попробовать useReducerвместо этого. Синтаксис очень похож на useState, но у вас есть функция, в которой вы можете определить, как будет меняться состояние компонента в разных случаях.

Во-первых, проще определить, как меняется состояние в зависимости от действий. Во-вторых, использовать dispatchфункцию, которая не меняется при ререндерах. Это полезно, когда вы используете массивы зависимостей.

Важно помнить

1. useRefи dispatchне меняться во время ререндеринга. Вот почему вы можете безопасно использовать их, useEffectне useCallbackбеспокоясь о провокации ненужных повторных рендеров.
2. Вы можете иметь столько useEffectкрючков, сколько вам нужно; лучше не усложнять и не пытаться уместить всю возможную логику в один ход. Тяжело читать и тестировать.
3. Последовательность useEffectхуков import. Они будут срабатывать один за другим.
4. Функции и переменные, определенные вне компонента (а не из реквизита), никогда не вызовут useEffectхук, и вам не нужно добавлять их в массив зависимостей.
5. Если вашему useEffectхуку нужна функция в массиве зависимостей, и вы не можете определить ее в useEffectтеле, оберните ее с помощью useCallback. Если это исходит из реквизита, это обертывание должно быть выполнено там, где функция определена.

Также ознакомьтесь с документацией React . Эта версия фантастична. Вы можете найти много полезной информации.

Это все об управлении useEffectзависимостями. Я надеюсь, что эти советы будут полезны.