React'ta useEffect Efekt Kancası

Efektlerle çalışmak için useEffect kancası kullanılır. Şimdi onun çalışmasına bir göz atalım.

İlk olarak kancamızı içe aktaralım:

App.jsximport { useEffect } from 'react';

Bir başlık içeren App bileşenini oluşturalım:

App.jsxfunction App() {
  return (
    <div>
      <h1>React App</h1>
    </div>
  );
}

export default App;

Diyelim ki, render işleminden sonra, örneğin tüm sayfanın arka plan rengini ayarlamak gibi bir işlem yapmamız gerekiyor. Bu durumda harici sistem, tarayıcının DOM'u olacaktır.

Kancamızı uygulayalım:

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

İkinci parametre olarak bağımlılık dizisi iletilir. Bunlar, bileşenin işlevleri tarafından kullanılan değerleri içerir. Şimdilik onları boş bıraktık. Bu durumda arka plan rengi yeşil olarak sadece bir kez, render işleminden sonra ayarlanacaktır. İkinci parametreyi tamamen kaldıramazsınız, çünkü bileşeniniz sonsuz bir döngüye girebilir.