Hook efekta useEffect u React-u

Za rad sa efektima koristi se hook useEffect. Pogledajmo kako on funkcioniše.

Za početak, importujmo naš hook:

import { useEffect } from 'react';

Kreirajmo komponentu App koja sadrži naslov:

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

export default App;

Pretpostavimo da treba da izvršimo neku radnju posle renderovanja, na primer, da postavimo boju pozadine cele stranice. U ovom slučaju, spoljni sistem će biti DOM pregledača.

Primenimo naš hook:

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

U drugi parametar se prosleđuje niz zavisnosti. U njih spadaju vrednosti koje koriste funkcije komponente. Za sada smo ih ostavili praznim. U ovom slučaju, boja će biti postavljena na zelenu samo jednom, posle renderovanja. U potpunosti ukloniti drugi parametar ne možete, pošto vaša komponenta može da uđe u beskonačnu petlju.

Pomoću hook-a useEffect promenite naslov (title) stranice.