Hook-ul de efect useEffect în React

Pentru lucrul cu efecte se folosește hook-ul useEffect. Să ne uităm la modul său de funcționare.

Pentru început, să importăm hook-ul nostru:

import { useEffect } from 'react';

Să creăm un component App care conține un titlu:

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

export default App;

Să presupunem că trebuie să efectuăm o acțiune după randare, de exemplu, să setăm culoarea de fundal a întregii pagini. În acest caz, sistemul extern va fi DOM-ul browserului.

Să aplicăm hook-ul nostru:

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

În al doilea parametru este transmis un array de dependențe. În acesta intră valorile utilizate de funcțiile componentului. Deocamdată, le-am lăsat goale. În acest caz, culoarea va fi setată la verde doar o dată, după randare. Nu se poate elimina complet al doilea parametru, deorece componentul vostru ar putea intra într-un ciclu infinit.

Folosind hook-ul useEffect, schimbați titlul paginii.