React'те useEffect'те көз карандылыктар

Эми баскычты басуу менен түстү өзгөртөлү. Түс үчүн color стейтин түзөбүз, ага баштапкы маанини берүү менен:

const [color, setColor] = useState('green');

useEffect'теги саптук маанини биздин стейт менен алмаштырабыз жана аны чарчы кашаадагы көз карандылыктар тизмесине кошуганды унутпайбыз. Эми эффект ар бир жолу color стейти өзгөргөндө аткарылат:

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

	...
}

Эми компонентибизге түстү өзгөртүү үчүн баскыч кошолу:

return (
	<div>
		<h1>React App</h1>
		<button onClick={changeColor}>өзгөртүү</button>
	</div>
);

Ошондой эле чыкылдатууну иштетүүчү функцияны кошобуз, ал биздин түстү кызгылт сарыга өзгөртөт:

function changeColor() {
	setColor('orange');
}

Колдонуучунун аты менен стейт берилген. Ат ар бир жолу өзгөргөндө, стейттин мааниси браузердин жергиликтүү сактоочу жайына жазылсын.