Effekt-hooken useEffect i React

For å jobbe med effekter brukes hooken useEffect. La oss se på hvordan den fungerer.

Først importerer vi vår hook:

import { useEffect } from 'react';

La oss opprette en komponent App som inneholder en overskrift:

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

export default App;

Anta at vi må utføre en handling etter rendering, for eksempel sette bakgrunnsfargen på hele siden. I dette tilfellet vil det eksterne systemet være DOM i nettleseren.

La oss bruke vår hook:

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

I den andre parameteren sendes en avhengighetsarray. Den inneholder verdier som brukes av funksjonene i komponenten. Foreløpig har vi latt den stå tom. I dette tilfellet vil fargen bli satt til grønn bare én gang etter rendering. Du kan ikke fjerne den andre parameteren helt, ettersom komponenten din kan gå inn i en uendelig løkke.

Bruk hooken useEffect til å endre tittelen på siden.