React'ta useEffect ile Global İşleyiciler

Şimdi, rengin sadece butona tıklayınca değil, aynı zamanda klavyeden Enter tuşuna basınca da değişmesini istediğimizi varsayalım. Normal React yaşamında, global window nesnesini dinlemek için addEventListener kullanamayız. Bunun için effect'lerimiz var. Haydi bunu useEffect kullanarak ekleyelim.

Enter tuşuna basıldığında çalışacak bir işleyici fonksiyonu yazalım. Bu durumda rengin kırmızıya dönmesine izin verelim:

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

Şimdi olay dinleyicisini useEffect hook'u içinde window'a bağlayalım:

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

Eğer herhangi bir kurulum fonksiyonumuz varsa, ileride sorunlardan kaçınmak için her zaman useEffect içinde bir temizlik veya işlemi sonlandırma kodu döndürmemiz gerekir. Bu durumda, addEventListener ekledikten sonra onu kaldırmayı döndürmemiz gerekir:

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

Bir bileşen verilmiştir. Sayfanın herhangi bir yerine tıklandığında bu bileşenin arka plan renginin değişmesini sağlayın.

Tıklandığında bir bloğun görünmesini sağlayan bir bağlantı yapın. Tarayıcı penceresinin herhangi bir yerine tıklandığında bloğumuzun gizlenmesini sağlayın.