Reactда useEffectдаги богликликлар

Энди тугмани босганда рангни ўзгартирамиз. Ранг учун color стейтини яратиб, унга бошлангич қийматни берамиз:

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

useEffect ичидаги сатр қийматини бизнинг стейт билан алмаштирамиз ва ун kvadrat қавс ичидаги богликликлар руйхатига уни қўшиб қўйишни унутмаймиз. Энди эффект color стейти ўзгарганида хар доим бажарилади:

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

Энди компонентимизга рангни ўзгартириш учун тугма қўшамиз:

return (
	<div>
		<h1>React App</h1>
		<button onClick={changeColor}>change</button>
	</div>
);

Бизга рангни оранж рангга ўзгартирадиган клик ишловчиси функциясини ҳам қўшимиз керак:

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

Фойдаланувчи исми билан стейт берилган. Исм ўзгарганда, стейт қиймати браузернинг локал сақловига ёзилиши учун қилинг.