Yerleşik React Hook'ları
Hook’lar, bileşenlerinizde farklı React özelliklerini kullanmanızı sağlar. Yerleşik Hook’ları kullanabilir ya da kendi Hook’larınızı oluşturmak için onları birleştirebilirsiniz. Bu sayfa, React’teki tüm yerleşik Hook’ları listeler.
State Hook’ları
State bir bileşenin kullanıcı girdisi gibi bir bilgiyi “hatırlamasını” sağlar. Örneğin, bir form bileşeni input değerini saklamak için state kullanabilirken, bir resim galerisi bileşeni de seçilen resim indeksini saklamak için state kullanabilir.
Bir bileşene state eklemek için bu Hook’lardan birini kullanın:
useState
direkt olarak güncelleyebileceğiniz bir state değişkeni bildirir.useReducer
reducer fonksiyonu ile güncellenebilen bir state değişkeni bildirir.
function ImageGallery() {
const [index, setIndex] = useState(0);
// ...
Context Hook’ları
Context, bir bileşenin bilgiyi prop olarak geçirmeden uzaktaki üst bileşenlerden almasını sağlar. Örneğin, uygulamanızın en üst düzey bileşeni, derinliğine bakılmaksızın tüm alt bileşenlere geçerli UI temasını iletebilir.
useContext
bir context değerini okur ve abone olur.
function Button() {
const theme = useContext(ThemeContext);
// ...
Ref Hook’ları
Ref’ler bir bileşenin render için kullanılmayan bazı bilgileri (örneğin, bir DOM düğümü veya bir timeout ID) tutmasını sağlar. State ile farklı olarak, bir ref’i güncellemek bileşeninizi yeniden render etmez. Ref’ler, React paradigmasından kaçmak için kullanılır. Dahili tarayıcı API’lari gibi React dışı sistemlerle çalışmanız gerektiğinde kullanışlıdır.
useRef
bir ref bildirir. İçinde herhangi bir değeri tutabilirsiniz, ancak genellikle bir DOM düğümü tutmak için kullanılır.useImperativeHandle
bileşeninizin dışarıya açtığı bir ref’i özelleştirmenizi sağlar. Bu nadiren kullanılır.
function Form() {
const inputRef = useRef(null);
// ...
Efekt Hook’ları
Effect’ler, bir bileşenin harici sistemlere bağlanmasını ve onlarla senkronize olmasını sağlar. Bu sistemler; ağ, tarayıcı DOM’u, animasyonlar, farklı bir UI kütüphanesi kullanılarak yazılmış araçlar ve diğer React dışı kodları kapsar.
useEffect
bir bileşeni harici bir sisteme bağlar.
function ChatRoom({ roomId }) {
useEffect(() => {
const connection = createConnection(roomId);
connection.connect();
return () => connection.disconnect();
}, [roomId]);
// ...
Effekler React paradigmasından kaçmak için kullanılır. Uygulamanızın veri akışını düzenlemek için Efektleri kullanmayın. Eğer harici bir sistemle etkileşimde değilseniz, bir Efekte ihtiyacınız olmayabilir.
Zamanlama noktasında farklılıları olan ve nadiren kullanılan iki useEffect
varyasyonu vardır:
useLayoutEffect
tarayıcı ekrana tekrar çizim yapmadan önce çalışır. Yerleşim (layout) hesaplamalarını burada yapabilirsiniz.useInsertionEffect
React DOM’a değişiklik yapmadan önce çalışır. Kütüphaneler bu noktada dinamik olarak CSS ekleyebilir.
Performans Hook’ları
Tekrar render etme performansını optimize etmenin yaygın bir yolu da gereksiz işlemleri atlamaktır. Örneğin, React’e önbelleğe alınmış bir hesaplamayı yeniden kullanmasını veya verilerin, önceki render’dan bu yana değişmediyse, yeniden render edilmesini atlamasını söyleyebilirsiniz.
Hesaplamaları ve gereksiz yeniden render etmeleri atlamak için bu Hook’lardan birini kullanın:
useMemo
; pahalı bir hesaplamanın sonucunu önbelleğe almanızı sağlar.useCallback
; bir fonksiyon tanımının, optimize edilmiş bir bileşene iletilmeden önce, önbelleğe alınmasını sağlar.
function TodoList({ todos, tab, theme }) {
const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
// ...
}
Bazen yeniden render etmeyi atlayamazsınız çünkü ekranın gerçekten güncellenmesi gerekir. Bu durumda, kullanıcı arayüzünü engellemesi gerekmeyen güncellemeleri (bir grafiği güncellemek gibi), eşzamanlı olması gereken güncellemelerden (örneğin bir inputa yazmak) ayırarak performansı artırabilirsiniz.
Render etme işlemini önceliklendirmek için bu Hook’lardan birini kullanın:
useTransition
bir state geçişini engellemeyen (non-blocking) olarak işaretleyerek diğer güncellemelerin araya girmesine izin verir.useDeferredValue
arayüzün kritik olmayan bir kısmının güncellenmesini ertelemenize ve önce diğer bölümlerin güncellenmesine izin vermenize olanak sağlar.
Diğer Hook’lar
Bu Hook’lar genellikle kütüphane geliştiricileri için kullanışlıdır ve uygulama kodlarında yaygın olarak kullanılmazlar.
useDebugValue
React DevTools’da, kendi yazdığınız hook için özel bir etiket belirlemenizi sağlar.useId
bir bileşenin kendisiyle benzersiz bir ID ilişkilendirmesini sağlar. Genellikle erişilebilirlik API’ları ile kullanılır.useSyncExternalStore
bir bileşenin harici bir depoya abone olmasını sağlar.useActionState
actionların stateini yönetmenizi sağlar.
Kendi Hook’larınız
Ayrıca, kendi özel Hook’larınızı JavaScript fonksiyonları olarak tanımlayabilirsiniz.