Хук эфекту 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 змяніце тайтл старонкі.