Der useEffect-Effekt-Hook in React

Für die Arbeit mit Effekten wird der Hook useEffect verwendet. Schauen wir uns seine Funktionsweise an.

Importieren wir zunächst unseren Hook:

import { useEffect } from 'react';

Erstellen wir eine App-Komponente, die eine Überschrift enthält:

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

export default App;

Nehmen wir an, wir müssen eine Aktion nach dem Rendering durchführen, zum Beispiel die Hintergrundfarbe der gesamten Seite setzen. In diesem Fall wäre das externe System das DOM des Browsers.

Wenden wir unseren Hook an:

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

Im zweiten Parameter wird ein Abhängigkeitsarray übergeben. Darin enthalten sind Werte, die von den Funktionen der Komponente verwendet werden. Wir haben es vorerst leer gelassen. In diesem Fall wird die Farbe nur einmal nach dem Rendering auf Grün gesetzt. Den zweiten Parameter ganz wegzulassen ist nicht möglich, da Ihre Komponente sonst in eine Endlosschleife geraten könnte.

Ändern Sie mit dem useEffect-Hook den Seitentitel.