# React Hook'ları

Adres: https://softwaredictionary.org/tr/terimler/react-hooks
Kategori: Web Geliştirme
Son güncelleme: 2026-10-05
İngilizcesi: React Hooks
Okunuşu: riekt huks

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.

## Kaynaklar

- [React documentation: Built-in React Hooks](https://react.dev/reference/react/hooks)
- [React documentation: Rules of Hooks](https://react.dev/reference/rules/rules-of-hooks)

---

Software Dictionary: https://softwaredictionary.org/tr · https://softwaredictionary.org/tr/llms.txt