Խախտումներ useEffect-ում React-ում

Հիմա եկեք փոխենք գույնը կոճակի սեղմումով: Ստեղծենք color state գույնի համար՝ տալով նրան սկզբնական արժեք:

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

Փոխարինենք տողային արժեքը մեր state-ով useEffect-ում և չմոռանանք ավելացնել այն կախվածությունների ցուցակում քառակուսի փակագծերում: Հիմա էֆեկտը կկատարվի ամեն անգամ, երբ color state-ը փոխվի:

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');
}

Տրված է օգտատիրոջ անունով state: Կատարեք այնպես, որ ամեն անգամ երբ անունը փոխվի, state-ի արժեքը գրվի բրաուզերի լոկալ պահեստում: