Efektový hook useEffect v Reacte

Pre prácu s efektmi sa používa hook useEffect. Pozrime sa na jeho fungovanie.

Na začiatok importujeme náš hook:

import { useEffect } from 'react';

Vytvorme komponent App, ktorý obsahuje nadpis:

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

export default App;

Predpokladajme, že potrebujeme vykonať nejakú akciu po vykreslení, napríklad nastaviť farbu pozadia celej stránky. V tomto prípade bude externým systémom DOM prehliadača.

Aplikujme náš hook:

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

V druhom parametri sa odovzdáva pole závislostí. Patria do nich hodnoty používané funkciami komponentu. Zatiaľ sme ich nechali prázdne. V tomto prípade sa farba nastaví na zelenú iba raz po vykreslení. Druhý parameter nemôžeme úplne odstrániť, pretože váš komponent by mohol vstúpiť do nekonečného cyklu.

Pomocou hooku useEffect zmeňte titulok stránky.