Le Hook d'effet useEffect dans React

Pour travailler avec les effets, on utilise le hook useEffect. Regardons son fonctionnement.

Pour commencer, importons notre hook :

import { useEffect } from 'react';

Créons un composant App contenant un titre :

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

export default App;

Supposons que nous devons effectuer une action après le rendu, par exemple, définir la couleur de fond de toute la page. Dans ce cas, le système externe sera le DOM du navigateur.

Utilisons notre hook :

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

Le second paramètre est un tableau de dépendances. Il contient les valeurs utilisées par les fonctions du composant. Pour l'instant, nous l'avons laissé vide. Dans ce cas, la couleur sera définie sur vert seulement une fois après le rendu. Supprimer complètement le second paramètre n'est pas possible, car votre composant pourrait entrer dans une boucle infinie.

À l'aide du hook useEffect, modifiez le titre de la page.