React HooksExplained

24 of 24 rows

Hook↕	Ne yapar↕	Ne için kullanılır↕
Durum
⤢useState	Değiştiğinde yeniden render tetikleyen tek bir değer tutar.	Bileşene özgü yerel durum: form alanları, aç/kapat anahtarları, sayaçlar.
⤢useReducer	Bir action reducer tarafından yönlendirilen durumu tutar; küçük bir store gibidir.	Birbiriyle ilişkili birçok alanı veya karmaşık geçişleri olan durum.
⤢useRef	Yeniden render tetiklemeyen, değiştirilebilir bir değer tutar.	Değiştirilebilir kapsayıcılar, zamanlayıcılar ve .current üzerinden doğrudan DOM erişimi.
Effect'ler
⤢useEffect	Render'dan sonra, isteğe bağlı bir temizleme fonksiyonuyla birlikte bir yan etki çalıştırır.	Veri çekme, abonelikler ve harici bir sistemle eşitleme.
⤢Effect cleanup	Bir effect'in döndürdüğü fonksiyon, bir sonraki effect'ten önce ve unmount sırasında tekrar çalışır.	Abonelikleri ve zamanlayıcıları kapatmak ya da devam eden bir fetch'i iptal etmek.
⤢useLayoutEffect	useEffect gibidir, ancak DOM değişikliğinden sonra senkron olarak tetiklenir.	Tarayıcı boyamadan önce düzeni okumak veya yazmak (toast'lar, tooltip'ler).
⤢useEffect vs handlers	Olay işleyicileri bir kullanıcı eylemine yanıt olarak çalışır; effect'ler ise eşitlemek için render'dan sonra çalışır.	Kullanıcı kaynaklı mantık işleyicide, render kaynaklı mantık effect içinde yer alır.
⤢StrictMode	Geliştirme ortamında bileşenleri iki kez mount eder; böylece effect'ler çalışır, temizlenir ve yeniden çalışır.	Çift abonelikleri ve eksik temizlemeyi üretime geçmeden önce yakalamak.
Performans
⤢useMemo	Bağımlılıkları değişene kadar hesaplanmış bir değeri önbelleğe alır.	Render'lar arasında pahalı yeniden hesaplamalardan kaçınma; önbelleği bozmak için bağımlılıklardaki bir değeri bilinçli olarak değiştirin.
⤢useCallback	Bağımlılıkları değişene kadar bir fonksiyon referansını önbelleğe alır.	Memo'lanmış alt bileşenlere geçirilen veya bağımlılık olarak kullanılan kararlı callback'ler.
⤢React.memo	Prop'ları değişmeyen bir bileşenin yeniden render edilmesini atlar.	Ağır alt bileşenler; sığ eşitlik yeterli olmadığında ikinci argüman olarak bir karşılaştırma fonksiyonu geçirin (bir hook değil, HOC'dir).
Context ve dış tutamaçlar
⤢useContext	Prop drilling'e gerek kalmadan bir context değerini okur.	Ağaç genelinde paylaşılan tema, yerel ayar veya kimliği doğrulanmış kullanıcı.
⤢useImperativeHandle	Bir ebeveynin ref üzerinden gördüğü örneği özelleştirir.	forwardRef ile bir alt bileşenden dar kapsamlı bir API açığa çıkarmak.
Eşzamanlılık ve diğerleri
⤢useTransition	Bir durum güncellemesini acil olmayan olarak işaretler; böylece arayüz duyarlı kalır.	Ağır bir liste yeniden render edilirken girdinin akıcı kalmasını sağlamak.
⤢useDeferredValue	Bir değeri erteler; böylece güncellemeler kesilebilir hâle gelir.	Zamanlayıcı kullanmadan pahalı render'ları debounce etmek.
⤢useId	Erişilebilirlik öznitelikleri için kararlı ve benzersiz bir kimlik üretir.	Sunucu ve istemci render'ları arasında label ile input'u eşleştirmek.
⤢use()	Render sırasında bir promise veya context okur; koşullu çağırabileceğiniz tek hook'tur.	Bir promise'i Suspense ile açmak veya erken bir return içinde context okumak.
⤢useActionState	Bir form action tarafından yönlendirilen durumu tutar; pending bayrağı da dahildir.	Hata veya satır içinde gösterilecek güncel durum döndüren form gönderimleri.
⤢useOptimistic	Bir iyimser değeri hemen render eder; action tamamlandığında gerçek duruma döner.	Sunucu isteği devam ederken bir beğeniyi veya gönderilen mesajı göstermek.
⤢useFormStatus	Çevreleyen <form> öğesinin pending durumunu okur; prop gerekmez.	Üst form gönderilirken kendini devre dışı bırakan bir gönder düğmesi.
⤢useSyncExternalStore	React dışındaki bir store'a abone olur ve tutarlı tek bir anlık görüntü okur.	Çevrimiçi durumu gibi tarayıcı API'leri veya üçüncü taraf durum store'ları.
⤢useInsertionEffect	Layout effect'lerinden önce çalışır; CSS-in-JS kuralları enjekte etmek için yapılmıştır.	Düzen okunmadan önce kural eklemesi gereken stil kütüphaneleri.
⤢useDebugValue	React DevTools'ta bir hook'un iç durumu için özel bir etiket gösterir.	Hata ayıklarken özel bir hook'un ne tuttuğunu etiketlemek.
⤢Custom hooks (use*)	Mantığı paylaşmak için yerleşik hook'ları birleştiren, size ait bir hook.	useFetch veya useMediaQuery gibi yeniden kullanılabilir durumlu davranışlar.