Kaynaklarınızı nasıl kullanacağınızı anlamak bir şeydir ve onları ne zaman kullanacağınızı bilmek başka bir şeydir. React'te programlamayı öğrenirken , tepki uygulamalarımda useEffect'i ne zaman uygulayacağımı anlamakta zorluk çektim . Ama o günler bitti!

useEffect ne işe yarar?

Sınıf yaşam döngüsü yöntemleri Tepki aşina iseniz, aklınıza gelebilecek useEffectolarak Hook componentDidMount, componentDidUpdateve componentWillUnmountbirleştirdi. Bazen, React DOM'yi güncelledikten sonra bazı ek kodlar çalıştırmak isteriz. Ek kod çalıştırmak için programımıza useEffect kancalarını uygulayabiliriz. React, geçtiğiniz işlevi hatırlayacaktır (buna “efektimiz” diyeceğiz) ve daha sonra DOM güncellemelerini gerçekleştirdikten sonra onu arayacaktır.

React bileşenleri hakkında öğrendiğim temel kavramlar:

• Bir bileşen, sahne alır ve döndüren bir fonksiyonudur JSX
• Dediğimiz zaman ReactDOM.renderve bileşenlerimizdeki geçmesi, o bizim bileşen fonksiyonları çağıran sahne aşağı geçen ve bizim bileşenlerinin JSX dışına DOM öğelerini inşa ederek bizim tüm bileşenlerini hale getirecek
• Bir React uygulamasının durumu , işlev çağrılarak güncellendiğinde setState, React , bileşeni tüm alt öğeleriyle birlikte yeniden oluşturur .

Programlama terimleriyle, işlevlerin öncelikle dönüş değerleri veya yan etkileri için yararlı olduğunu düşünebiliriz : bir işlev çağırırsak ve bu işlev , işlevin dışında uygulamamızda bir değişikliğe neden olursa , bunun bir yan etkiye neden olduğu kabul edilir. . Ağ istekleri yapmak, bir veritabanından verilere erişmek veya bileşenleri kullanıcı etkileşimine dayalı olarak oluşturmak, vb. programlamadaki bazı yaygın yan etkilere örnektir.

Bileşenlerimizde aşağıdaki yan etkilerin üstesinden gelmek için React'ten özel bir kanca kullanmamız gerekiyor: useEffect:

• Bir bileşen yüklendiğinde bir API'den bazı verileri alın
• Zamanlayıcıyı başlat veya durdur
• React bileşenlerinde DOM'yi manuel olarak değiştirin
• Bir sohbet servisine abone olun

Adım 1: useEffectKancayı kullanmak için önce onu içe aktarmalıyız:

import React, { useEffect } from "react";

function App() {
  useEffect(
    // side effect function
    () => {
      console.log("useEffect called");
    }
  );

  console.log("Component rendering");

  return (
    <div>
      <button>Click Me</button>
      <input type="text" placeholder="Type away..." />
    </div>;
  )
}

• Bileşen oluşturma
• useEfekt denilen

Bu Hook'u kullanarak, React'e bileşeninizin renderden sonra bir şeyler yapması gerektiğini söylersiniz. React, geçtiğiniz işlevi hatırlayacak ve daha sonra DOM güncellemelerini yaptıktan sonra onu arayacaktır. useEffect varsayılan olarak her oluşturmadan sonra çalışır. İlk oluşturmadan sonra ve her güncellemeden sonra çalışır. React, efektleri çalıştırdığı sırada DOM'nin güncellendiğini garanti eder.

useState Hook ekleme

Adım 3: Durum eklemek için önce useStatekancayı içe aktarmalıyız :

import React, { useEffect, useState } from "react";

Adım 4: Ardından, bileşenimizin içinde, içinde iki değişken bulunan useStatebir dizi döndürecek olanı çağırırız :

• count: React'in içindekiler içindeki o durumun mevcut değerine bir referans
• setCount: bu durumu güncelleyebilmemiz için bir ayarlayıcı işlevi

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  useEffect(() => {
    console.log("useEffect called");
  });

  console.log("Component rendering");

  return (
    <div>
      <button onClick={() => setCount((count) => count + 1)}>
        I've been clicked {count} times
      </button>
      <input
        type="text"
        placeholder="Type away..."
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
    </div>
  );
}

• Bileşen oluşturma
• useEfekt denilen

Bileşeni oluştururken beklememiz gereken döngünün bir örneği aşağıdadır:

render -> useEffect -> setState -> re-render -> useEffect

Bazen yan etkilerimizi yalnızca belirli koşullarda çalıştırmak isteriz. Örneğin: useEffectharici bir API'den bazı verileri almak için kancayı kullandığımızı hayal edin ( için yaygın bir durum useEffect). Bu senaryoda, bileşenimiz her güncellendiğinde bir ağ isteğinde bulunmak istemiyoruz, yalnızca bileşenimiz ilk kez işlendiğinde.

useEffectGeri fetcharamanın içinden durumu güncelleyen bir bileşen yazarsak , bu sonsuz bir istek döngüsüyle sonuçlanır (API, hız sınırına 👀 ulaşmak için bizi atana kadar).

Sonsuz döngü döngüsü örneği:

render -> useEffect -> setImages -> render -> useEffect -> setImages -> render -> etc...

useEffect(
  // 1st arg: side effect (callback function)
  () => { console.log("useEffect called") },
  // 2nd arg: dependencies array
  [count]
);

Boş bir bağımlılık dizisini ikinci bir argüman olarak şu şekilde de iletebiliriz:

useEffect(() => {
  console.log("useEffect called");
}, []); // second argument is an empty array

useEffect(() => {
  fetch('API URL')
    .then((r) => r.json())
    .then((data) => {
      setImages(data.messages);
    });
}, []); // second argument is an empty array

render -> useEffect -> setImages -> render

Burada gösterebileceğimiz bir diğer yan etki , bir web sayfasının bazı bölümlerini React DOM ağacının dışında güncellemektir. Bileşenlerimiz tarafından oluşturulan tüm DOM öğelerinden React sorumludur, ancak web sayfasının bazı bölümleri bu ağacın dışında yaşar. Örneğin, <title>sayfamızın - tarayıcı sekmesinde görünen şey şudur:

useEffectKancayı kullanarak yan etki olarak başlığı güncelleyebiliriz .

Örnek 1:

useEffect(() => {
  document.title = text;
}, [text]);

Örnek 2:

Bir setTimeoutfonksiyon çalıştırabiliriz . Bu fonksiyon istediğiniz reset 5 saniye sonra 0'a değişken geri. count

useEffect(() => {
  setTimeout(() => setCount(0), 5000);
}, []);

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  useEffect(() => {
    document.title = text;
  }, [text]);

  useEffect(() => {
    setTimeout(() => setCount(0), 5000);
  }, []);

  console.log("Component rendering");

  return (
    <div>
      <button onClick={() => setCount((count) => count + 1)}>
        I've been clicked {count} times
      </button>
      <input
        type="text"
        placeholder="Type away..."
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
    </div>
  );
}

useEfekt Bağımlılıkları Cheatsheet Cliff Notes

useEffectYan etki kodunuzun ne zaman çalışacağını kontrol etmek için ikinci argümanın nasıl kullanılacağına dair hızlı bir kılavuz :

• useEffect(() => {}): Bağımlılık dizisi yok

• useEffect(() => {}, []): Boş bağımlılıklar dizisi

• useEffect(() => {}, [variable1, variable2]): İçinde öğeleri olan bağımlılıklar dizisi

Kaynaklar

• React Docs on useEffect
• Effect'i kullanmak için eksiksiz bir rehber