De Effect Hook useEffect in React

Voor het werken met effecten wordt de hook useEffect gebruikt. Laten we eens kijken naar hoe het werkt.

Laten we eerst onze hook importeren:

import { useEffect } from 'react';

Laten we een App component maken dat een titel bevat:

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

export default App;

Stel dat we een actie moeten uitvoeren na het renderen, bijvoorbeeld de achtergrondkleur van de hele pagina instellen. In dit geval is het externe systeem de DOM van de browser.

Laten we onze hook toepassen:

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

In de tweede parameter wordt een array van afhankelijkheden doorgegeven. Hierin zitten waarden die worden gebruikt door de functies van het component. Voorlopig hebben we deze leeg gelaten. In dit geval wordt de kleur slechts één keer groen ingesteld na het renderen. Je kunt de tweede parameter niet helemaal weglaten, omdat je component dan in een oneindige lus kan terechtkomen.

Verander de paginatitel met behulp van de hook useEffect.