Gestori globali tramite useEffect in React

Supponiamo ora che vogliamo che il colore cambi non solo cliccando sul pulsante, ma anche premendo Enter sulla tastiera. Nella normale vita React non possiamo ascoltare l'oggetto globale window usando addEventListener. Per questo abbiamo gli effetti. Aggiungiamo questa azione usando useEffect.

Scriviamo una funzione di gestione per il click su Enter. Lasciamo che il colore in questo caso cambi in rosso:

function handleEnter(event) {
	if (event.keyCode === 13) {
		setColor('red');
	}
}

Colleghiamo ora l'ascolto degli eventi a window nel hook useEffect:

useEffect(() => {
	document.body.style.color = color;
	
	window.addEventListener('keydown', handleEnter);
}, [color]);

Se abbiamo una qualche funzione di impostazione, dobbiamo sempre restituire nel useEffect il codice di pulizia o annullamento dell'iscrizione, per evitare problemi in futuro. In questo caso, dopo aver aggiunto addEventListener, dobbiamo restituire la sua rimozione:

useEffect(() => {
	document.body.style.color = color;
	
	window.addEventListener('keydown', handleEnter);
	
	return () => {
		window.removeEventListener('keydown', handleEnter);
	};
}, [color]);

Dato un componente. Fate in modo che cliccando su qualsiasi punto della pagina lo sfondo di questo componente cambi colore.

Create un link, cliccando sul quale apparirà un blocco. Fate in modo che cliccando in qualsiasi punto della finestra del browser il nostro blocco venga nascosto.