Effect ve ne zaman gerekmez

Effect Ne İçindir

React'te kodun çoğu iki yerde çalışır: render (JSX'i hesaplar, saf olmalı) ve event handler (tıklama gibi bir etkileşime cevap verir). Effect üçüncü yerdir: render'dan sonra çalışır ve component'i React dışındaki bir sistemle senkronlar. Tarayıcı API'si, bir WebSocket, bir harita kütüphanesi ya da üçüncü parti bir widget bu dış sistemlere örnektir.¹

useEffect(() => {
  // setup: dış sisteme bağlan
  return () => {
    // cleanup: bağlantıyı kopar
  };
}, [dependency]);

Dan Abramov'un uzun useEffect rehberindeki ana fikir: "Bu Effect ne zaman çalışır?" yerine "Bu Effect hangi state ile senkron?" diye sorun. Her render kendi props ve state'ini görür; Effect de o render'ın değerleriyle çalışır.²

Effect Gerekmeyen Durumlar

React dokümanına göre en yaygın hata, dış sistem olmayan işler için Effect yazmaktır.³ David Khourshid da React Advanced 2022 konuşmasında aynı noktayı vurgular: Effect'lerin çoğu aslında bir event'in sonucu olmalı.⁴

// ❌ Satın alma bir event, Effect değil
useEffect(() => {
  if (submitted) {
    post("/api/orders", cart);
  }
}, [submitted, cart]);

// ✅
function handleCheckout() {
  post("/api/orders", cart);
}

eslint-plugin-react-hooks'un set-state-in-effect kuralı, Effect içinde senkron setState'i yakalar. Bu kalıp hem fazladan bir render demektir hem de çoğu zaman türetilmiş state'in işaretidir.⁶

Cleanup

Effect bir şeyi başlatıyorsa (abonelik, zamanlayıcı, event listener, bağlantı) durdurmayı da cleanup'ta yapar. React cleanup'ı Effect yeniden çalışmadan önce ve component kaldırılırken çağırır.¹

function useEscapeKey(onEscape: () => void) {
  useEffect(() => {
    function handleKeyDown(event: KeyboardEvent) {
      if (event.key === "Escape") onEscape();
    }
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [onEscape]);
}

Strict Mode development'ta her Effect'i setup → cleanup → setup sırasıyla çalıştırır. Kullanıcı bu farkı hissetmiyorsa cleanup doğrudur. Bağlantı iki kez açılıyorsa sorun Strict Mode değil, eksik cleanup'tır.¹

Bağımlılıklar

Effect'in içinde kullanılan her reaktif değer (props, state, component içinde tanımlanan değişken ve fonksiyonlar) bağımlılık dizisine girer. exhaustive-deps kuralı eksikleri gösterir.⁷

TkDodo'nun üç pratik önerisi daha var: her Effect tek bir iş yapsın (başlığı güncellemek ve analytics'i ayrı Effect'lere bölün), Effect'e useEffect(function syncTitle() {...}) gibi bir isim verin ve tekrar eden Effect'leri adı olan bir custom hook'a taşıyın.⁸

useEffectEvent

Bazen Effect'in içinde bir değeri okumak istersiniz ama o değer değişince Effect'in yeniden senkronlanmasını istemezsiniz. React 19.2 ile kararlı hâle gelen useEffectEvent bunun içindir.⁹¹⁰

import { useEffect, useEffectEvent } from "react";

function ProductPage({ productId, cartCount }: ProductPageProps) {
  const onVisit = useEffectEvent((visitedId: string) => {
    logVisit(visitedId, cartCount); // her zaman güncel cartCount
  });

  useEffect(() => {
    onVisit(productId);
  }, [productId]); // yalnızca ürün değişince
}

Sepet sayısı değiştiğinde ziyaret yeniden loglanmaz; ürün değiştiğinde loglanır ve o anki sepet sayısını görür.

Effect İçinde Veri Çekmek

Mecbursanız iki şeye dikkat edin: race condition (hızlı yazan kullanıcıda eski cevabın yenisini ezmesi) ve cleanup. İsteği iptal etmek için AbortController kullanın:³

useEffect(() => {
  const controller = new AbortController();
  fetch(`/api/products?q=${query}`, { signal: controller.signal })
    .then((response) => response.json())
    .then((data: Product[]) => setResults(data))
    .catch((error: unknown) => {
      if (error instanceof DOMException && error.name === "AbortError") return;
      setError(error);
    });
  return () => controller.abort();
}, [query]);

Bu kodda hâlâ cache, tekrar deneme, yükleme durumu ve waterfall sorunu yok. React dokümanı bu yüzden framework'ün veri çekme yöntemini ya da bir kütüphaneyi önerir.³ TkDodo'nun kuralı kısa: asenkron işlerde Effect de değil ref de değil, TanStack Query.¹¹ Suspense ve use ile veri okumayı ilerideki derste göreceksiniz.

Kendin Dene

• Bir modal'a useEscapeKey ekleyin; cleanup'ı silin ve modalı birkaç kez açıp kapattıktan sonra Escape'e basınca ne olduğunu görün.

• Projenizde useEffect arayın. Her biri için tablodaki soruyu sorun: dış sistem var mı?

• Effect içinde setFiltered(products.filter(...)) yazın ve set-state-in-effect uyarısını okuyun; sonra render'da hesaplayın.

• Arama kutusunda AbortController'ı kaldırın, DevTools'ta ağı "Slow 4G" yapın ve hızlı yazıp sonucu izleyin.

Detaylı Öğrenmek İçin

• Resmi doküman: "You Might Not Need an Effect"; Effect gerektirmeyen yaygın durumlar ve çözümleri. React'in en çok okunması gereken sayfalarından.³

• Yazı: Dan Abramov'un "A Complete Guide to useEffect" yazısı; 2019 tarihli ve uzun, ama "her render'ın kendi değerleri vardır" fikrini en iyi anlatan kaynak.²

• Video: David Khourshid'un "Using useEffect Effectively" konuşması (React Advanced 2022, 30 dk).⁴

• Yazı: TkDodo'nun "Simplifying useEffect" yazısı; tek sorumluluk, isimlendirme ve custom hook.⁸