React Hook'ları

İngilizcesi: React Hooks
Okunuşu: riekt huks

Güncellendi 5 Ekim 20262 dk okuma

Kısaca

React hook'ları, useState ve useEffect gibi, fonksiyon bileşenlerinin state tutmasını, yan etki çalıştırmasını ve mantık paylaşmasını sağlayan fonksiyonlardır.

React hook'ları nedir?

Hook, adı use ile başlayan ve bir React bileşeninin React'in özelliklerinden birini kullanmak için çağırdığı fonksiyondur. useState bileşene yeniden render'lar arasında korunan bir değer ve onu değiştirecek bir fonksiyon verir; değeri değiştirmek bileşeni yeniden render eder. useEffect ise veri çekmek, bir zamanlayıcı kurmak ya da bir olaya abone olmak gibi yan etkiler için render'dan sonra kod çalıştırır ve bir temizlik fonksiyonu döndürebilir.

Hook'lar 2019'da React 16.8 ile geldi. Ondan önce yalnızca class bileşenleri state tutabiliyordu ve bir veri kaynağına abone olmak gibi mantık lifecycle metotlarına dağılıyordu. Hook'lar bu özellikleri sıradan fonksiyonlara getirdi; bugün yeni React kodunun neredeyse tamamı fonksiyon bileşenleri ve hook'larla yazılıyor. Diğer hook'lar yaygın ihtiyaçları karşılar: useRef yeniden render etmeden bir değeri ya da bir DOM elemanını tutar, useMemo ve useCallback aynı işi tekrarlamayı önler, useContext da yukarıdan paylaşılan veriyi okur.

Hook'ların iki kuralı vardır. Onları yalnızca bileşenin en üst düzeyinde çağırın, asla koşulların ya da döngülerin içinde değil; çünkü React her hook'u state'iyle çağrıların sırasına göre eşleştirir. Ve onları yalnızca bileşenlerden ya da başka hook'lardan çağırın. Bu kurallar içinde useOnlineStatus() gibi kendi hook'larınızı yazabilirsiniz; bunlar state'li mantığı bir araya getirir ve birden çok bileşenin paylaşmasını sağlar.

Önemli noktalar

Hook'lar, fonksiyon bileşenlerine React'in özelliklerini veren ve adı use ile başlayan fonksiyonlardır.
useState state tutar; useEffect render'dan sonra yan etkileri çalıştırır.
Hook'ları yalnızca en üst düzeyde ve her render'da aynı sırayla çağırın.
Özel hook'lar state'li mantığı paketler, böylece bileşenler onu paylaşabilir.

Örnek

useState ve useEffect ile bir sayaçjsx

import { useEffect, useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // a value React keeps between renders

  useEffect(() => {
    document.title = `Clicked ${count} times`; // after renders that change count
  }, [count]);

  return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>;
}

Sık sorulan sorular

Bir hook'u neden if bloğunun içinde çağıramıyorum?

React her bileşenin hook state'ini bir listede tutar ve her render'da hook'larla sıralarına göre eşleştirir. Bir render'da bir hook atlanırsa ondan sonraki her hook yanlış state'i alır. Bunun yerine koşulu hook'un içine koyun ya da erken return'ü ancak bütün hook'lar çağrıldıktan sonra yapın.

Ne zaman özel bir hook yazmalıyım?

İki ya da daha fazla bileşen, pencere boyutunu izlemek ya da yükleniyor ve hata durumlarıyla birlikte veri çekmek gibi aynı state'li mantığa ihtiyaç duyduğunda. Özel hook, adı use ile başlayan ve başka hook'ları çağıran bir fonksiyondur; onu kullanan her bileşen state'in kendine ait bir kopyasını alır.

İlgili sayfalar

Kaynaklar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin