Effekt hook useEffect i React

Til arbejde med effekter anvendes hook useEffect. Lad os se på dens funktion.

Til at starte med importerer vi vores hook:

import { useEffect } from 'react';

Lad os oprette en komponent App, der indeholder en overskrift:

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

export default App;

Antag, at vi skal udføre en handling efter rendering, for eksempel indstille baggrundsfarven på hele siden. I dette tilfælde vil det eksterne system være DOM i browseren.

Lad os anvende vores hook:

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

I den anden parameter sendes en matrix af afhængigheder. Disse inkluderer værdier, der bruges af funktionerne i komponenten. For nu har vi ladet den være tom. I dette tilfælde vil farven kun blive indstillet til grøn én gang efter rendering. Du kan ikke fjerne den anden parameter helt, da din komponent kan gå i en uendelig løkke.

Ved hjælp af hook useEffect skal du ændre sidens titel.