Компоненты React визуализируются для создания элементов DOM, которые являются основными эффектами компонента. Когда мы добавляем состояние к компоненту, он перерисовывается.
Когда мы хотим запустить эффект после рендеринга, мы запускаем побочный эффект с помощью хука useEffect.
Каковы некоторые случаи побочных эффектов?
Мы будем использовать useEffect при выполнении сетевых запросов, доступе к данным из базы данных, записи в файловую систему, использовании таймера и изменении DOM.
Давайте проверим формат этого хука ниже:
import {useEffect } from 'react'; useEffect(() => { });
Итак, теперь у нас есть базовая структура нашего хука useEffect, но нам нужно еще одно дополнение к нашему коду. Если мы запустим его как есть, то попадем в бесконечный цикл — побочный эффект запускается после каждого рендера, который устанавливает состояние, которое вызывает повторный рендеринг, а затем снова запускает эффект.
Чтобы остановить этот цикл, мы предоставим массив, известный как массив зависимостей, в качестве второго аргумента обработчика эффекта.
import {useEffect } from 'react'; useEffect(() => { }, []);
Мы можем использовать массив зависимостей несколькими способами:
- [ ] : пустой массив запустит побочный эффект только при первом рендеринге нашего компонента.
- [значение1, значение2, значение3] : массив со значением или значениями, используемыми в побочном эффекте, запустит эффект после изменения любого из этих значений.
Это остановит нашу бесконечную выборку и реализует ваш побочный эффект!