Глабальныя апрацоўшчыкі праз useEffect у React

Выкажам здагадку, што цяпер мы хочам, каб колер у нас мяняўся не толькі па кліку на кнопку, але і па націску Enter на клавіятуры. У звычайнай React жыцці праслухоўваць глабальны аб'ект window выкарыстоўваючы addEventListener нельга. Для гэтага ў нас ёсць эфекты. Давайце дадамо гэта дзеянне з дапамогай useEffect.

Напішам функцыю апрацоўшчыка па кліку на Enter. Хай колер у гэтым выпадку мяняецца на чырвоны:

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

Прывязам цяпер праслухоўванне падзей да window ў хуку useEffect:

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

Калі ў нас ёсць якая-небудзь устаноўчая функцыя, то нам заўсёды трэба ў useEffect вяртаць код чысткі або адпіскі, каб пазбегнуць праблем у далейшым. У дадзеным выпадку нам трэба пасля прымацавання addEventListener вярнуць яго выдаленне:

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

Дадзены кампанент. Зрабіце так, каб па кліку на любое месца старонкі фон гэтага кампанента мяняў колер.

Зрабіце спасылку, па націску на якую будзе з'яўляцца блок. Зрабіце так, каб па націску ў любое месца акна браўзера наш блок схаваўся.