Массив зависимостей в хуке useEffect

Передаваемое значение имеет большее значение, чем вы думаете

Хуки React упростили то, как мы пишем код. Хук useEffect вместе с useState помогает функциональному компоненту обрабатывать состояния, устраняя необходимость в компонентах класса.

Понимание хука useEffect поможет нам избежать ошибок, которые могут заставить нас часами ломать голову.

Массив зависимостей

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

useEffect(() => {
    // Callback function
}, [dependencyArray])

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

1. Пропуск аргумента:

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

useEffect(() => {
    // Runs in each re-render of the component
})

2. Пустой массив ( [] )

Пустой массив просто означает, что в нем нет зависимостей, которые вызовут обратный вызов. Наш код внутри обратного вызова запустится один раз, когда компонент будет зарегистрирован, и все. Хук useEffect действует как метод componentDidMount, если в качестве массива зависимостей передается пустой массив.

useEffect(() => {
    // Runs only when the component is registered
}, [])

3. Массив зависимостей ( [переменная1, переменная2] )

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

Часто к ним относятся состояния, созданные с помощью хука useState.

const [x, setX] = useState();
const [y, setY] = useState();
useEffect(() => {
    // Runs if x or y changes
}, [x, y])

Заключение

Надеюсь, это дало вам некоторое представление о том, как хук useEffect работает на основе второго параметра, и почему нам важно это понять.