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:

App.jsxconst [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:

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

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

App.jsxreturn (
  <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:

App.jsxfunction changeColor() {
  setColor('orange');
}