Frontend Academy · Ders

useEffect Temelleri: Bağımlılıklar ve Temizleme

useEffect Temelleri: Bağımlılıklar ve Temizleme, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

useEffect nedir?

useEffect, React oluşturmayı tamamladıktan sonra bir yan etki çalıştırır. Yan etkiler arasında veri alma, olaylara abone olma, zamanlayıcılar kurma ve harici API'lerle etkileşim kurma bulunur. Etkiler oluşturma sırasında değil, ekrana çizimden sonra çalışır.

Temel söz dizimi

useEffect(effect, deps?). Etki işlevi, varsayılan olarak her oluşturma işleminden sonra çalışır. Ne zaman çalışacağını denetlemek için bir bağımlılık dizisi sağlayın.

import { useEffect } from 'react';

function Component() {
  useEffect(() => {
    console.log('Ran after every render');
  });
}

Bağımlılık dizisi etkinin ne zaman çalışacağını denetler

Boş dizi []: bağlandıktan sonra bir kez çalışır. Boş olmayan dizi [a, b]: a veya b değiştiğinde çalışır. Dizi yoksa: her oluşturma işleminden sonra çalışır (nadiren istediğiniz davranıştır).

// Run once on mount:
useEffect(() => {
  fetchInitialData();
}, []);

// Run when userId changes:
useEffect(() => {
  fetchUser(userId);
}, [userId]);

// Run after every render (usually a bug):
useEffect(() => {
  trackPageView();
});

Temizleme işlevi

Temizlemeyi çalıştırmak için useEffect içinden bir işlev döndürün: olay dinleyicilerini kaldırın, abonelikleri iptal edin, zamanlayıcıları temizleyin. Temizleme, bir sonraki etkiden önce ve bileşen kaldırıldığında çalışır.

useEffect(() => {
  const handleResize = () => setWidth(window.innerWidth);
  window.addEventListener('resize', handleResize);

  // Cleanup: remove listener when effect re-runs or component unmounts
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

Bağımlılıklardaki güncelliğini yitirmiş kapanımlar

Etkiler, oluşturuldukları anda başvurdukları değerleri kapanım içinde saklar. Bir etki içinde bir durum veya özellik değerini okuyup bunu bağımlılıklarda belirtmezseniz güncel olmayan bir değer görürsünüz. ESLint'in exhaustive-deps kuralı bunu yakalar.

ESLint exhaustive-deps kuralı

react-hooks/exhaustive-deps ESLint kuralı, etki bağımlılıklarını eksik bıraktığınızda uyarır. Önerilerini izlemek neredeyse her zaman doğrudur; güncelliğini yitirmiş bağımlılıklar hatalara yol açar.

useEffect ve useLayoutEffect karşılaştırması

useEffect, tarayıcı ekrana çizim yaptıktan sonra çalışır. useLayoutEffect, DOM değişikliklerinden hemen sonra ve ekrana çizimden önce eşzamanlı olarak çalışır. Görsel titreşimi önlemek için DOM ölçümlerini okurken useLayoutEffect kullanın.

Birden çok etki

İlişkisiz sorumlulukları ayırmak için birden çok useEffect çağrısı kullanın. Her etkinin kendi bağımlılık dizisi ve temizleme mantığı olabilir.

// Separate effects for separate concerns:
useEffect(() => { document.title = `${count} items`; }, [count]);
useEffect(() => {
  const sub = wsClient.subscribe(onMessage);
  return () => sub.unsubscribe();
}, []);

Yarış koşulları — ignore bayrağı

Bir etki özelliklere bağlı olarak veri aldığında, önceki istekler sonraki isteklerden sonra sonuçlanabilir. Güncelliğini yitirmiş yanıtları yok saymak için bir temizleme bayrağı kullanın.

useEffect(() => {
  let ignore = false;

  async function load() {
    const data = await fetchUser(userId);
    if (!ignore) setUser(data); // only update if not cleaned up
  }

  load();
  return () => { ignore = true; };
}, [userId]);

Strict Mode'da etkinin iki kez çalışması

React 18 Strict Mode, temizleme hatalarını ortaya çıkarmak için geliştirme sırasında bileşenleri bağlar, kaldırır ve yeniden bağlar. Etkileriniz iki kez çalışır; bu kasıtlıdır ve eksik temizlemeleri belirlemenize yardımcı olur.

useEffect ne zaman kullanılmamalı

useEffect'i şu amaçlarla kullanmayın: 1) özelliklerden durum türetmek (oluşturma sırasında hesaplayın), 2) özellik değişikliklerinde durumu sıfırlamak (key özelliğini kullanın), 3) durumu koşulsuz güncellemek (döngülere yol açar). Emin olmadığınızda şunu sorun: Bu kod bir kullanıcı olayına mı yoksa harici bir sisteme mi tepki veriyor?

Kısa kontrol

Bir useEffect temizleme işlevi ne zaman çalışır?

Özet: useEffect

Yan etkiler oluşturma işleminden sonra çalışır. Boş bağımlılık dizisi = bağlandıktan sonra bir kez. Bağımlılık dizisi = belirli değişikliklerde. Sızıntıları önlemek için bir temizleme işlevi döndürün. Ayrı sorumluluklar için birden çok etki kullanın. ignore bayrağı güncel olmayan veri alma yanıtlarını önler. Strict Mode, temizlemeyi test etmek için etkiyi iki kez çalıştırır. Oluşturma sırasında hesaplayabileceğiniz türetilmiş değerler veya durum için useEffect kullanmayın.

Sıkça Sorulan Sorular

“useEffect Temelleri: Bağımlılıklar ve Temizleme” dersi ücretsiz mi?

Evet — “useEffect Temelleri: Bağımlılıklar ve Temizleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“useEffect Temelleri: Bağımlılıklar ve Temizleme” dersinde ne öğreneceğim?

Yan etkileri oluşturma sonrasında çalıştırın, bağımlılık dizisiyle yeniden ne zaman çalışacaklarını denetleyin ve bellek sızıntılarını önlemek için bir temizleme işlevi döndürün. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“useEffect Temelleri: Bağımlılıklar ve Temizleme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

useEffect Temelleri: Bağımlılıklar ve Temizleme
Bağlanırken Veri Getirme
Yüklenme ve Hata Durumlarını Yönetme
Temizleme için AbortController

← Frontend Academy Sayfasına Dön