Как работает хук useEffect в ReactJS

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

Основной синтаксис

Базовый синтаксис перехватчика useEffect состоит из двух аргументов: функции обратного вызова и необязательного массива зависимостей.

useEffect(() => {
  // This code will run after every render.
});

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

Второй аргумент, массив зависимостей, определяет, когда должен запускаться код useEffect. Он содержит список зависимостей, которые вызывают эффект при их изменении. Если массив зависимостей пуст, эффект запускается только один раз, после первоначального рендеринга.

Вот простой пример, иллюстрирующий эти концепции:

import React, { useState, useEffect } from "react";

const ExampleComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // This effect runs after every render.
    console.log('Effect ran');
  });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default ExampleComponent;

Понимание хука useEffect

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

Случай 1: Массив без зависимостей

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

useEffect(() => {
  // This effect runs on every render.
  // Caution: May cause performance issues.
  fetchData();
});

Случай 2: Пустой массив зависимостей

Если массив зависимостей пуст, код useEffect выполняется только один раз, после первоначального рендеринга. Это полезно для выполнения однократных задач по настройке.

useEffect(() => {
  // This effect runs once after the initial render.
  initialize();
}, []);

Случай 3: Массив зависимостей с состоянием

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

Внимание. Установка состояния выполняет поверхностное, а не глубокое сравнение, поэтому следует учитывать, что обновление переменных состояния в случае массивов/объектов с одинаковой ссылкой не вызовет перехват useEffect. лучше использовать оператор распространения для обновления переменных состояния в случае массивов/объектов.

useEffect(() => {
  // This effect runs when 'data' changes.
  fetchData();
}, [data]);


const addData = () => {
    data.push("new element");
    setData(data); // Updating 'data' state with the same reference.
    // useEffect will not trigger except for the first time.
}

const addData2 = () => {
    data.push("new element"); // Updating 'data' state with the same reference.
    setData([...data]);  // Updating 'data' state with the new reference.
    // useEffect will be triggered.
};

Заключение

Хук useEffect — это фундаментальный инструмент для управления побочными эффектами и обработки событий жизненного цикла компонентов в функциональных компонентах React. Понимание его поведения и разумное его использование может привести к созданию более эффективных и удобных в обслуживании приложений React.

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

Спасибо за прочтение!