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