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

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

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

import { useEffect } from 'react';

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

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

export default App;

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

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

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

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

С помощью хука useEffect поменяйте тайтл страницы.