React Hooks Nedir?

React Hooks, fonksiyonel bileşenlerde state ve lifecycle özelliklerini kullanmamızı sağlayan özel fonksiyonlardır. React 16.8 ile tanıtılan hooks, class bileşenlerine ihtiyaç duymadan state yönetimi yapmamızı mümkün kılar.

Temel Hooks

React'te en çok kullanılan temel hooks:

  • useState: Bileşen içinde state tanımlamak için kullanılır
  • useEffect: Side effect'leri yönetmek için kullanılır
  • useContext: Context API ile state paylaşımı için kullanılır
  • useReducer: Karmaşık state mantığı için useState alternatifi

useState ile State Yönetimi

useState hook'u, fonksiyonel bileşenlerde state tanımlamak için kullanılır. Bu hook, mevcut state değeri ve onu güncellemek için bir fonksiyon döndürür.

useEffect ile Side Effect Yönetimi

useEffect hook'u, bileşenin mount, update ve unmount aşamalarında çalışacak kodları tanımlamak için kullanılır. API çağrıları, event listener'lar ve cleanup işlemleri için idealdir.

Custom Hooks Oluşturma

Custom hooks, state mantığını yeniden kullanılabilir hale getirmek için oluşturulan özel fonksiyonlardır. Bu hooks, birden fazla bileşende aynı state mantığını kullanmamızı sağlar.

En İyi Uygulamalar

React Hooks kullanırken dikkat edilmesi gereken noktalar:

  1. Hook Kuralları: Hooks'ları sadece fonksiyonların en üst seviyesinde çağırın
  2. Dependency Array: useEffect'te dependency array'i doğru kullanın
  3. Performance: Gereksiz re-render'ları önlemek için useMemo ve useCallback kullanın
  4. Cleanup: useEffect'te cleanup fonksiyonları tanımlayın