useEffect — Bağımlılıklar ve Temizlik

Konsoldaki bir uyarıyı susturmak için küçük bir değişiklik yaptın ve sorun çözüldü sandın. Uyarı sustu — ama haklıydı.

O değişiklik, effect’in bağımlılık dizisini boş bırakmaktı: useEffect(..., []).

Bağımlılık dizisi ne yapar?

React her render’dan sonra diziyi bir öncekiyle karşılaştırır. Hepsi aynıysa effect’i atlar.

Karşılaştırma Object.is ile yapılır — yani referansa bakar, içeriğe değil. Bu tek cümle, aşağıdaki hataların çoğunu açıklar.

Dizi yazmamak ile boş dizi yazmak taban tabana zıttır. İkisi de nadiren doğru cevaptır.

Kendin gör

useEffect(() => {
  const sub = chat.subscribe(userId);
}, []);

Sırayla dene:

1. [] + temizlik?Terimin tanımını açtemizlikEffect'in döndürdüğü fonksiyon. Unmount'ta **ve** effect her yeniden çalışmadan önce koşar; ikincisi en çok atlanan kısımdır.Sözlükte gör → yok. Sonuna kadar oynat. İki hata birden: userId 2 olduğu hâlde abonelik hâlâ 1’de (bayat), ve unmount’ta bağlantı açık kaldı (sızıntı).
2. Temizliği aç, dizi [] kalsın. Sızıntı bitti — ama bayatlık duruyor. Bunlar farklı hatalar.
3. Diziyi [userId] yap. İkisi de bitti. Effect 2 kez çalıştı, temizlik 2 kez — sayılar eşit.
4. [options]’a geç. Effect her render’da çalışıyor, çünkü nesne her render’da yeniden oluşuyor.
5. Temizliği kapat, StrictMode’u aç. Sızıntı ilk render’da görünür oluyor.

İki farklı hata

Bayat kapanış — eksik bağımlılık

Effect gövdesi, çalıştığı andaki değerleri kapatır (closure?Terimin tanımını açclosureBir fonksiyonun, tanımlandığı andaki değişkenleri yanında taşıması. Effect yeniden çalışmazsa eski değerleri taşımaya devam eder — bayat closure hatası budur.Sözlükte gör →). Yeniden çalışmazsa o eski değerleri kullanmaya devam eder.

1
useEffect(() => {
2
  const sub = chat.subscribe(userId);   // mount'taki userId
3
  return () => sub.close();
4
}, []);                                  // userId değişse bile çalışmaz

Belirti: ekranda yanlış kullanıcının verisi, tıklamanın hiçbir şey yapmaması, sayaç hep aynı sayıyı göstermesi.

Sızıntı — eksik temizlik

1
useEffect(() => {
2
  const sub = chat.subscribe(userId);
3
  // return yok
4
}, [userId]);

Bağımlılıklar doğru, effect doğru zamanlarda çalışıyor — ama her çalışma yeni bir abonelik açıyor ve eskisi kapanmıyor.

Belirti: zamanla artan bellek, kapanmış bir bileşene gelen güncellemeler, aynı isteğin birden çok kez gönderilmesi.

Temizlik ne zaman çalışır?

Yaygın yanılgı: “temizlik unmount’ta çalışır.” Eksik.

Temizlik her yeniden çalışmadan önce de çalışır. Sıra her zaman aynıdır:

userId 1 → 2 değişti
  1. eski effect'in temizliği   sub.close()   ← önce bu
  2. yeni effect                subscribe(2)  ← sonra bu

Bu sıra, iki aboneliğin aynı anda açık olmasını engeller. Bilmek bağımlılık hatalarının yarısını önler.

Bir bankanın döviz kuru ekranında bu sırayı canlı görebilirsin. Kullanıcı dolardan euroya geçince neyin kapanıp neyin açıldığına birlikte bakalım.

1
export type CurrencyPair = 'USDTRY' | 'EURTRY' | 'GBPTRY';
2

3
export interface FxQuote {
4
  readonly pair: CurrencyPair;
5
  readonly bid: string; // decimal string such as "32.4105", never turned into a float
6
  readonly ask: string;
7
}
8

9
function isQuoteFor(pair: CurrencyPair, value: unknown): value is FxQuote {
10
  return (
11
    typeof value === 'object' && value !== null &&
12
    'pair' in value && value.pair === pair &&
13
    'bid' in value && typeof value.bid === 'string' &&
14
    'ask' in value && typeof value.ask === 'string'
15
  );
16
}
17

18
// Opens one server-sent event stream for a pair. The returned function closes it.
19
export function subscribeToRate(pair: CurrencyPair, onQuote: (quote: FxQuote) => void): () => void {
20
  const source = new EventSource(`/api/fx/stream?pair=${pair}`);
21
  source.onmessage = (event) => {
22
    const data: unknown = JSON.parse(event.data);
23
    if (isQuoteFor(pair, data)) onQuote(data);
24
  };
25
  return () => source.close();
26
}

1
import { useEffect, useState } from 'react';
2
import { subscribeToRate, type CurrencyPair, type FxQuote } from './fxFeed';
3

4
export function useFxRate(pair: CurrencyPair): FxQuote | null {
5
  const [quote, setQuote] = useState<FxQuote | null>(null);
6

7
  useEffect(() => {
8
    // The cleanup runs before the next pair subscribes and on unmount: one stream at a time.
9
    return subscribeToRate(pair, setQuote);
10
  }, [pair]);
11

12
  // Until the new pair's first quote lands, show nothing rather than the old pair's rate.
13
  return quote?.pair === pair ? quote : null;
14
}

1
import { useState } from 'react';
2
import type { CurrencyPair } from './fxFeed';
3
import { useFxRate } from './useFxRate';
4

5
const PAIRS: readonly CurrencyPair[] = ['USDTRY', 'EURTRY', 'GBPTRY'];
6

7
export function FxTicker() {
8
  const [pair, setPair] = useState<CurrencyPair>('USDTRY');
9
  const quote = useFxRate(pair);
10

11
  return (
12
    <section aria-live="polite">
13
      {PAIRS.map((p) => (
14
        <button key={p} type="button" aria-pressed={p === pair} onClick={() => setPair(p)}>
15
          {p}
16
        </button>
17
      ))}
18
      <p>{quote ? `Alış ${quote.bid} · Satış ${quote.ask}` : 'Kur bekleniyor…'}</p>
19
    </section>
20
  );
21
}

1
import { useEffect, useState } from 'react';
2
import { subscribeToRate, type CurrencyPair, type FxQuote } from './fxFeed';
3

4
// Another way to write it: the lint warning is silenced and the first screen looks fine.
5
export function useFxRate(pair: CurrencyPair): FxQuote | null {
6
  const [quote, setQuote] = useState<FxQuote | null>(null);
7

8
  useEffect(() => {
9
    // Captures the first pair only: after a switch to EURTRY this still streams USDTRY.
10
    subscribeToRate(pair, setQuote);
11
    // No cleanup is returned, so the stream stays open after the ticker unmounts.
12
    // eslint-disable-next-line react-hooks/exhaustive-deps
13
  }, []);
14

15
  return quote;
16
}

Tuzaklar: her seferinde yeni nesne

Bu kod, bağımlılık dizisi dolu olmasına rağmen her render’da çalışır:

1
const options = { id: userId };          // her render'da yeni nesne
2

3
useEffect(() => {
4
  const sub = chat.subscribe(options);
5
}, [options]);                            // referans her zaman farklı

Aynı sorun fonksiyonlarda ve dizilerde de var. Üç çözüm:

• Primitifi doğrudan koy. [userId] — en basit ve en iyi çözüm.
• useMemo / useCallback ile referansı sabitle — gerçekten nesne gerekiyorsa.
• Nesneyi effect’in içine taşı — dışarıda tutulmasına gerek yoksa.

İlk seçenek neredeyse her zaman doğrudur. Diğer ikisi, birinci mümkün değilse gelir.

StrictMode neden iki kez çalıştırıyor. Geliştirmede React bileşeni mount eder, hemen kaldırır ve tekrar mount eder. Bu bir hata değil, bir testtir.

Temizlik doğru yazılmışsa hiçbir şey değişmez: bir abonelik açılır, kapanır, bir tane daha açılır — sonuçta yine tek abonelik. Temizlik yoksa iki abonelik açık kalır ve sorun ilk render’da görünür.

Bu davranış üretim derlemesinde yoktur. “StrictMode’u kapatalım” demek, testi kapatıp hatayı üretime bırakmaktır.

Fetch için doğru kalıp. En sık karşılaşılan durum: bir effect içinde veri çekmek ve yarış durumundan (race condition?Terimin tanımını açrace conditionSonucun thread'lerin hangi sırayla çalıştığına bağlı olması. Kod çoğu zaman doğru çalışır, sonra bir gün çalışmaz.Sözlükte gör →) kaçınmak.

1
useEffect(() => {
2
  const controller = new AbortController();
3

4
  fetch(`/api/users/${userId}`, { signal: controller.signal })
5
    .then((res) => res.json())
6
    .then(setUser)
7
    .catch((err) => {
8
      if (err.name !== 'AbortError') setError(err);
9
    });
10

11
  return () => controller.abort();
12
}, [userId]);

Temizlik olmadan şu olur: userId hızlıca 1’den 2’ye değişir, iki istek uçar, 1’in cevabı sonra gelirse ekranda yanlış kullanıcı kalır. abort() bunu kapatır.

Pratikte bu işi React Query gibi bir kütüphaneye devretmek daha iyidir — ama neyi devrettiğini bilmeden devretmek, hata çıktığında seni çaresiz bırakır.

Kendini sına