Без сомнения, вторым по важности и полезности хуком React является useEffect. Эффектный хук — это способ выполнения побочных эффектов в функциональных компонентах. Как я упоминал в предыдущей статье, будучи новичком, я недавно начал изучать JavaScript и React, поэтому, чтобы понять, как хуки помогают и улучшают жизнь программистов, я должен попытаться понять, как это работает раньше. В данном случае особенно важно, как работает жизненный цикл класса React, потому что Effect Hook сочетает в себе componentDidMount, componentDidUpdate и componentWillUnmount. И как работают побочные эффекты с очисткой и без нее.
Эффектный хук — больше действий в одном
Effect Hook объединяет 3 метода жизненного цикла в одном. Но как он на это способен?
Монтаж и демонтаж компонента
Монтаж
Простая версия useEffect запускается после завершения рендеринга. React выполняет код в useEffect после обновления DOM и выполняет его каждый раз при рендеринге компонента. Если нам нужно выполнить очистку после размонтирования нашего компонента, мы можем добавить функцию для выполнения этой очистки в качестве возвращаемого значения.
Размонтирование
В отличие от componentWillUnmount в классе, React Effect Hook использует возвращаемую функцию, которая выполняется при размонтировании компонента. Это не обязательно должно называться функцией, но это может быть даже функция стрелки. Так или иначе, эта функция очищает работающее приложение и избавляет нас от ошибок утечки памяти и множества головных болей. Поскольку в React Docs эта часть довольно аскетична, я нашел очень простую статью на dev.to (https://dev.to/otamnitram/react-useeffect-cleanup-how-and-when-to-use-it-2hbm ) Мартина Мато с этим примером:
Там мы видим, что добавленная переменная «mounted» предоставляет информацию о фактическом состоянии компонента, и если компонент размонтирован, он запустит функцию очистки, которая установит для этой переменной значение «false» и перестанет выполнять заданный код.
Обновление компонента
Как я писал ранее, useEffect выполняется при каждом рендере. Это может привести к зацикливанию рендеринга или, в лучшем случае, к выполнению useEffect, когда он не нужен, и напрасной трате вычислительных ресурсов. И это как раз та ситуация, когда на сцену выходит второй необязательный аргумент useEffect. Второй аргумент — это массив зависимых переменных и функций. Чтобы запускать useEffect только один, вы можете оставить этот массив пустым. В других случаях мы можем указать, или ESLint заставит использовать переменные или функцию, изменения которых вызовут повторное выполнение useEffect. Но useEffect запускается только при изменении этих значений, поэтому он будет запускаться реже, чем при каждом рендеринге.
Вывод
Когда мы поняли, как React работает с жизненным циклом компонента, React Effect Hook стал одним из самых больших друзей программиста. Большим преимуществом перед методами жизненного цикла React Component Class является единство, простота и неповторяющийся код. В то время как в классе нам нужны три метода, с эффектом хука у нас есть только один. И это одна из главных целей хуков, облегчение нашей жизни.
