React: useEffect'e Hızlı Giriş

Bir nedir etkisi / a yan etkisi ?

Yan etki ve etki terimleri birbirinin yerine kullanılır ve React'te aynı anlama gelir: Kullanıcı arabirimini veya çıktı değerini etkilemeyen işlemlere atıfta bulunurlar. Yaptığınız işlem , son dönüş değeri dışında herhangi bir durum değişikliğini yönetiyorsa , bu bir yan etkidir!

Bir React bileşeninin işlevi, kullanıcı arayüzünü işlemek ve değiştirmektir. Yan etkiler oluşturma aşamasını etkilemediğinden, bir bileşenin ana gövdesine ait değildirler.

Nedir useEffect?

useEffect Yan etkileri işlemeden bağımsız olarak çalıştırmanıza izin veren bir React Hook'tur.

Kodunuzun doğrudan UI ile ilgili olmayan bölümleri veya asenkron olan ve normal kontrol akışının dışında yürütülen görevler varsa, bunları useEffectkancanın içine koymalısınız . Bu, onların oluşturma döngüsünün dışında çalışmasına ve kullanıcı arayüzüne müdahale etmeden perde arkasında işlev görmesine olanak tanır .

useEffect iki argümanı kabul eder:

• (gerekli) geri arama — etki — belirtilen bağımlılıklar değişirse bileşen değerlendirmesinden sonra yürütülür;
• bu işlev tarafından kontrol edilen (isteğe bağlı) bağımlılıklar.

Oluşturmadan bağımsız olan ve bir useEffectkancanın içinde yaşaması gereken hesaplama örnekleri :

• zamanlayıcıları kullanma;
• ağ istekleri (gibi fetch);
• yerel depolamadan okuma;
• olay dinleyicilerinin kaydedilmesi ve kayıtlarının silinmesi;
• DOM'yi manuel olarak güncelleme.

• import { useEffect } from 'react'
• Yan etki mantığı, geri arama işlevinin içine girer.
• Bağımlılıklar , yan etkinin ne zaman çalışmasını istediğinizi kontrol eder . Bir dizi olarak geçirilirler.

useEffect(() => { logic }, [dependencies]);

Nasıl useEffectçalıştığına bakalım . Bu örnekte, bir loggedIndurum güncellemesinden sonra bir veritabanından kullanıcı bilgilerini truealıyoruz ve ardından bu bilgiyi sayfaya yazdırıyoruz:

import { useState, useEffect } from 'react';
function App() {
  const [loggedIn, setLoggedIn] = useState(false);
  const [userName, setUserName] = useState("");
  useEffect( () => {
    if (loggedIn === true) {
      // [ retrieving user info from an imaginary database ]
      // [ we set the returned user info in state ]
      setUserName("Lisa Simpson");
    } else {
      setUserName("");
    }
  }, [loggedIn]);
  return (
    <div>
      <h1>Hello</h1>
      <button onClick={ () => setLoggedIn(!loggedIn) } >Log in / out</button>
      {
        loggedIn === true
          ? <p>Hello, {userName}</p>
          : <p>Please log in</p>
      }
    </div>
  )
};
export default App;

• Biz var ifkullanıcıysa denetler hayali bir veritabanı görmek için bu ifadeyi loggedIn. Eğer öyleyse, durumunu güncelleriz userName. (Karşılığında ise isimlerini ekranda gösterme mantığına sahibiz loggedIn === true.)
• Düğmeye (dönüşte) tıklandığında, işlev loggedInkullanılarak durumda güncellenir setLoggedIn.
• useEffectloggedIndurum her değiştiğinde çalışır , çünkü loggedInbir bağımlılık olarak geçtik .
• useEffectyok değil çalıştırılacak setUserNamebiz bağımlılık dizide koymak değil çünkü, fonksiyon çalışır.

Bağımlılıklar, çalışırken nasıl kontrol ettiğimizdir useEffect.

• useEffectHer işlemede çalıştırmak istiyorsanız , bağımlılıkları atlayın.
• İlk oluşturma işleminden sonra yalnızca bir kez çalışmasını istiyorsanız, boş bir dizi sağlayın.
• Belirli bir değer değişikliğinden sonra çalışmasını istiyorsanız, bunu bir bağımlılık olarak iletin.

• propsveya statedeğerleri kullanıyorsanız , bunları bağımlılık olarak bildirmelisiniz; bu değerler değiştiğinde useEffectçalışacaktır. (Yukarıdaki örnekte, setUserNamebir durum değeri olmadığı için işlevi bağımlılıklardan çıkarmakta bir sorun yoktur -- durum değerini güncelleyen bir işlevdir , bu nedenle durumla hiçbir zaman senkronizasyonu bozulmaz.)

• durum güncelleme fonksiyonları;
• yerleşik API'ler veya işlevler;
• bir bileşen işlevinin dışında tanımlanan değişkenler veya işlevler (ayrı bir dosyada bulunan bir yardımcı işlev gibi).

Zamanlayıcılar veya abonelikler (kalıcı bir veri kaynağına bağlantılar) gibi bazı yan etkiler temizlik gerektirir, çünkü bileşen DOM'den kaldırıldıktan sonra bunların havada kalmasını istemiyoruz.

Temizlemek için sadece içeride bir fonksiyon döndürüyoruz useEffectve o temizlenecek; bu işlevlere uygun şekilde cleanup functions. Bunlar temizleme fonksiyonları çalıştırmak sonra ertesi hale fakat önce sonraki useEffect.