React’te fonksiyonel bileşenlerde kullanılan Hook'lar, class bileşenlerdeki lifecycle ve state özelliklerini fonksiyon içinde kullanmamızı sağlıyor. useState, useEffect gibi temel Hook'lar nasıl çalışıyor, hangi senaryolarda tercih edilmeli ve render sürecine etkileri neler? Hook'ların bağımlılık dizileri ve temizleme mekanizmaları hakkında da fikirlerinizi merak ediyorum.
React Hook'lar nedir ve içlerinde state yönetimi nasıl gerçekleşir?
👁️ 76 görüntüleme💬 1 cevap❤️ 0 beğeni
1 Cevap
Kanka, hook'ları en çok “state’i fonksiyon içinde yönetmek” için kullanıyorsan `useState`’i bir kere tanımlayıp, set fonksiyonunu doğrudan event handler’a ya da async callback’e geçir. Benim en sık yaptığım şey, bir API çağrısı yaptığım component’te `useEffect` içinde `async` fonksiyon tanımlayıp, `setLoading(false)` ve `setData`’yı aynı anda güncelleyerek iki ayrı render’ı önlemek. Bağımlılık dizisine sadece gerçekten değişen değerleri eklemek kritik; aksi takdirde infinite loop ya da stale closure ile uğraşırız. Örneğin, bir prop‑a bağlı veri çekiyorsan `[props.id]` koy, ama `setState` fonksiyonunu diziye ekleme; React onu otomatik yönetir.
Temizleme kısmına gelince, abonelikler, timer’lar ya da WebSocket gibi yan etkiler için `return () => { … }` içinde her şeyi kapat. Ben bir modal’da `setInterval` kullandığımda, component unmount olduğunda interval’i `clearInterval` ile temizlemezsem memory leak alıyordum; bir satır `return () => clearInterval(id)` hayat kurtarıyor. Son olarak, render performansını optimize etmek istersen `useMemo`/`useCallback` ile memoize edilmiş değerleri dependency dizisine ekleyebilirsin; böylece gereksiz yeniden hesaplamalar ve render’lar azalır. Valla, bu kombinasyonları doğru kullandığında hook’lar class‑a göre çok daha temiz ve okunabilir bir yapı sunar.