React'ta useEffect'te Bağımlılıklar

Şimdi bir butona tıklayarak rengi değiştirelim. Renk için bir color state'i oluşturalım ve ona bir başlangıç değeri atayalım:

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

useEffect içindeki string değeri state'imizle değiştirelim ve onu köşeli parantezler içindeki bağımlılık listesine eklemeyi unutmayalım. Artık efekt, color state'i her değiştiğinde çalışacaktır:

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

Şimdi bileşenimize renk değiştirmek için bir buton ekleyelim:

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

Ayrıca, rengimizi turuncu olarak değiştirecek bir tıklama işleyici fonksiyonu ekleyelim:

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

Kullanıcı adı için bir state verilmiştir. Her seferinde ad değiştiğinde, state değerinin tarayıcının yerel deposuna yazılmasını sağlayın.