Varësitë në useEffect në React

Tani le të ndryshojmë ngjyrën duke klikuar butonin. Le të krijojmë një state color për ngjyrën, duke i caktuar një vlerë fillestare:

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

Le të zëvendësojmë vlerën e stringut me state-in tonë në useEffect dhe të mos harrojmë ta shtojmë atë në listën e varësive në kllapat katrore. Tani efekti do të ekzekutohet çdo herë kur state-i color ndryshon:

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

Tani le të shtojmë një buton për ndryshimin e ngjyrës në komponentin tonë:

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

Le të shtojmë gjithashtu funksionin e trajtuesit të klikut, i cili do të ndryshojë ngjyrën tonë në portokalli:

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

Është dhënë një state me emrin e përdoruesit. Bëni që çdo herë kur emri ndryshon, vlera e state-it të shkruhet në depozitën lokale të shfletuesit.