Хук эффекта useEffect в React

Для работы с эффектами применяется хук useEffect. Давайте посмотрим на его работу.

Для начала импортируем наш хук:

App.jsximport { useEffect } from 'react';

Создадим компонент App, содержащий заголовок:

App.jsxfunction App() {
  return (
    <div>
      <h1>React App</h1>
    </div>
  );
}

export default App;

Предположим, что нам надо сделать какое-то действие после рендеринга, например, установить цвет фона всей страницы. В данном случае внешней системой будет DOM браузера.

Применим наш хук:

App.jsxfunction App() {
  useEffect(() => {
    document.body.style.backgroundColor = 'green';
  }, []);
  
  ...
}

Во втором параметре передается массив зависимостей. В них входят значения, используемые функциями компонента. Пока мы оставили их пустыми. В этом случае цвет установится в зеленый только один раз после рендеринга. Совсем убрать второй параметр нельзя, так как ваш компонент может войти в бесконечный цикл.