Компоненты React визуализируются для создания элементов DOM, которые являются основными эффектами компонента. Когда мы добавляем состояние к компоненту, он перерисовывается.

Когда мы хотим запустить эффект после рендеринга, мы запускаем побочный эффект с помощью хука useEffect.

Каковы некоторые случаи побочных эффектов?

Мы будем использовать useEffect при выполнении сетевых запросов, доступе к данным из базы данных, записи в файловую систему, использовании таймера и изменении DOM.

Давайте проверим формат этого хука ниже:

import {useEffect } from 'react';
useEffect(() => {

});

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

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

import {useEffect } from 'react';
useEffect(() => {

}, []);

Мы можем использовать массив зависимостей несколькими способами:

  • [ ] : пустой массив запустит побочный эффект только при первом рендеринге нашего компонента.
  • [значение1, значение2, значение3] : массив со значением или значениями, используемыми в побочном эффекте, запустит эффект после изменения любого из этих значений.

Это остановит нашу бесконечную выборку и реализует ваш побочный эффект!