Хук за ефекти 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 променете заглавието на страницата.