Učinek useEffect v Reactu

Za delo z učinki se uporablja kljuka useEffect. Poglejmo, kako deluje.

Najprej uvozimo našo kljuko:

import { useEffect } from 'react';

Ustvarimo komponento App, ki vsebuje naslov:

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

export default App;

Recimo, da moramo narediti neko dejanje po upodabljanju, na primer, nastaviti barvo ozadja celotne strani. V tem primeru bo zunanji sistem DOM brskalnika.

Uporabimo našo kljuko:

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

V drugem parametru se posreduje matrika odvisnosti. Vključujejo vrednosti, ki jih uporabljajo funkcije komponente. Za zdaj smo jih pustili prazne. V tem primeru se bo barva nastavila na zeleno samo enkrat po upodabljanju. Popolnoma odstraniti drugi parameter ni mogoče, ker lahko vaša komponenta vstopi v neskončno zanko.

S kljuko useEffect spremenite naslov strani.