Hook efektu useEffect w React

Do pracy z efektami stosuje się hook useEffect. Przyjrzyjmy się jego działaniu.

Na początek zaimportujmy nasz hook:

import { useEffect } from 'react';

Stwórzmy komponent App, zawierający nagłówek:

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

export default App;

Załóżmy, że musimy wykonać jakąś akcję po renderowaniu, na przykład, ustawić kolor tła całej strony. W tym przypadku systemem zewnętrznym będzie DOM przeglądarki.

Zastosujmy nasz hook:

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

W drugim parametrze przekazywana jest tablica zależności. Zawiera ona wartości używane przez funkcje komponentu. Na razie pozostawiliśmy ją pustą. W tym przypadku kolor zostanie ustawiony na zielony tylko raz po renderowaniu. Nie można całkowicie pominąć drugiego parametru, ponieważ twój komponent może wejść w nieskończoną pętlę.

Za pomocą hooka useEffect zmień tytuł strony.