Custom Hook Yazarken Side Effect Yönetimi

Custom Hook Yazmayalım mı?

React’te “Custom Hook” yazmak, tekrar eden kodları soyutlamanın en güçlü yolu.
Ama yanlış yerde useEffect kullanmak, seni kolayca sonsuz döngüler, memory leak’ler veya veri tutarsızlıklarıyla baş başa bırakabilir. 😊

Bu yazıda, Custom Hook’larda side effect’lerin (yan etkilerin) nasıl yönetilmesi gerektiğini, en yaygın hataları ve doğru pattern’leri inceleyeceğiz.

Hatırlatma: Side Effect Nedir?

• Veri çekmek (fetch)
• Event listener eklemek
• DOM veya storage manipülasyonu
• Timer veya subscription başlatmak

React’te bu işleri kontrol altına almak için useEffect, useLayoutEffect gibi hook’lar kullanılır.
Custom Hook yazarken bu hook’lar, dış dünyayla etkileşim kurmanın ana aracıdır.

Basit Bir Custom Hook Örneği Verelim;

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth)

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

    return () => window.removeEventListener('resize', handleResize)
  }, [])

  return width
}

• Side effect: addEventListener → dış dünya ile etkileşim.
• Cleanup: removeEventListener → sızıntıyı önler.

Yaygın Hata 1: Dependency Kaosu

useEffect(() => {
  fetch(`/api/data?query=${query}`)
}, []) // ❌ query dependency’si eksik!

Ama eklersen:

useEffect(() => {
  fetch(`/api/data?query=${query}`)
}, [query])

💡 İpucu: ESLint’in react-hooks/exhaustive-deps kuralını asla kapatma. Bu kural, hayat kurtarır.

Yaygın Hata 2: Cleanup Eksikliği

function useTimer() {
  useEffect(() => {
    const id = setInterval(() => console.log('tick'), 1000)
    return () => clearInterval(id)
  }, [])
}

Yaygın Hata 3: State ve Effect’in Ayrılmaması

useEffect(() => {
  setData(fetchData()) // ❌ Hem state, hem effect
}, [])

useEffect(() => {
  fetchData().then(setData)
}, [])

const data = useDataFetcher('/api/posts')

Custom Hook’larda useEffect Kullanım Desenleri

1. Veri Çekme (Data Fetching)

function useFetch(url) {
  const [data, setData] = useState(null)
  const [error, setError] = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    let ignore = false
    setLoading(true)
    fetch(url)
      .then(res => res.json())
      .then(json => { if (!ignore) setData(json) })
      .catch(setError)
      .finally(() => setLoading(false))
    return () => { ignore = true }
  }, [url])

  return { data, error, loading }
}

2. Event Listener Yönetimi

function useKeyPress(targetKey) {
  const [pressed, setPressed] = useState(false)

  useEffect(() => {
    const down = (e) => e.key === targetKey && setPressed(true)
    const up = (e) => e.key === targetKey && setPressed(false)

    window.addEventListener('keydown', down)
    window.addEventListener('keyup', up)
    return () => {
      window.removeEventListener('keydown', down)
      window.removeEventListener('keyup', up)
    }
  }, [targetKey])

  return pressed
}

Side Effect Yönetiminde En İyi Uygulamalar

1. Cleanup’ı asla unutma. Her effect bir iz bırakır, sen silmezsen React silmez.
2. Dependency dizisini doğru doldur. Her dependency, deterministik davranış sağlar.
3. Async işlemleri iptal et. Fetch işlemlerinde AbortController kullanmak modern bir çözümdür.
4. Effect’leri böl. Bir useEffect birden fazla işi yapmamalı.
5. Custom Hook test edilebilir olmalı. DOM’a dokunmadan jest/react-testing-library ile kontrol edilebilmeli.

Reaktif Pattern: Effect + Memo Kombosu

function useFilteredList(list, query) {
  const filtered = useMemo(() => list.filter(i => i.includes(query)), [list, query])
  useEffect(() => {
    console.log('Liste güncellendi')
  }, [filtered])
  return filtered
}

Debugging İpuçları

• React DevTools → Components sekmesinde Hook değerlerini izle.
• useEffect tetiklenme sayısını logla.
• Gereksiz render’ı tespit etmek için React Profiler kullan.

useEffect(() => {
  console.count('Effect tetiklendi')
})

Sonuç

Kısaca:

• Side effect = render dışı işlem.
• Her effect’in bir cleanup’ı olmalı.
• Dependencies hayat kurtarır.
• Custom Hook’lar test edilebilir ve izole olmalı.