Hook effetto useEffect in React

Per lavorare con gli effetti si utilizza l'hook useEffect. Diamo un'occhiata al suo funzionamento.

Per iniziare importiamo il nostro hook:

import { useEffect } from 'react';

Creiamo un componente App che contenga un titolo:

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

export default App;

Supponiamo che dobbiamo eseguire qualche azione dopo il rendering, ad esempio, impostare il colore di sfondo dell'intera pagina. In questo caso il sistema esterno sarà il DOM del browser.

Applichiamo il nostro hook:

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

Nel secondo parametro viene passato un array delle dipendenze. In essi sono inclusi i valori utilizzati dalle funzioni del componente. Per ora lo abbiamo lasciato vuoto. In questo caso il colore verrà impostato su verde solo una volta dopo il rendering. Non è possibile omettere completamente il secondo parametro, poiché il tuo componente potrebbe entrare in un ciclo infinito.

Utilizzando l'hook useEffect, cambia il titolo della pagina.