Effekthooken useEffect i React

För att arbeta med effekter används hooken useEffect. Låt oss titta på hur den fungerar.

Låt oss först importera vår hook:

import { useEffect } from 'react';

Låt oss skapa en komponent App som innehåller en rubrik:

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

export default App;

Antag att vi behöver utföra någon åtgärd efter rendering, till exempel ställa in bakgrundsfärgen på hela sidan. I det här fallet kommer det externa systemet att vara webbläsarens DOM.

Låt oss använda vår hook:

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

I den andra parametern skickas en array med beroenden. Den innehåller värden som används av funktionerna i komponenten. För nu har vi lämnat den tom. I det här fallet kommer färgen att ställas in på grön endast en gång efter rendering. Du kan inte helt ta bort den andra parametern, eftersom din komponent då kan hamna i en oändlig loop.

Använd hooken useEffect för att ändra sidans titel.