React Custom Hook'ları Nasıl Yazılır? Pratik İpuçları ve Kontrol Listesi

React custom hook'ları, bileşenler arasında mantık paylaşımının en temiz yoludur. Doğru yazıldığında kod tekrarını azaltır, bakımı kolaylaştırır ve uygulamanızı daha modüler hale getirir. Ancak yanlış kullanıldığında performans sorunlarına veya beklenmeyen davranışlara yol açabilir. Bu yazıda, React custom hook'ları yazarken dikkat edilmesi gereken pratik ipuçlarını ve kapsamlı bir kontrol listesini bulacaksınız.

Hook İsimlendirme ve Kurallar

React hook'ları use ön eki ile başlamalıdır. Bu, React'in hook kurallarını otomatik olarak kontrol etmesini sağlar ve diğer geliştiricilerin hook olduğunu anlamasına yardımcı olur.

• Hook adı mutlaka use ile başlasın (ör. useLocalStorage, useDebounce).
• Hook'ları yalnızca React fonksiyon bileşenlerinin en üst seviyesinde çağırın; döngü, koşul veya iç içe fonksiyonlar içinde kullanmayın.
• Custom hook'lar diğer hook'ları çağırabilir, ancak bu çağrılar da aynı kurallara tabidir.

State ve Effect Yönetimi

Custom hook'lar genellikle state ve yan etkileri (side effects) yönetir. Bu kısımda doğru şekilde nasıl yapılandırılacağını görelim.

State Kullanımı

• State'i gereksiz yere karmaşık hale getirmeyin; birden fazla state değişkeni yerine useReducer düşünün.
• Eğer bir değer hesaplanabiliyorsa, state yerine useMemo kullanın. Performans optimizasyonu hakkında React Performans Optimizasyonu yazımızda ayrıntılı bilgi bulabilirsiniz.
• Ref'ler ile state arasındaki farkı iyi anlayın. DOM referansları veya değişen ancak yeniden render tetiklemesi gerekmeyen değerler için useRef kullanın. useRef hook'unun derinlemesine kullanımı yazımız bu konuda yardımcı olacaktır.

Effect Kullanımı

• useEffect bağımlılıklarını eksiksiz tanımlayın; eksik bağımlılık eski verilerle çalışmaya yol açar.
• Cleanup fonksiyonu ile bellek sızıntılarını önleyin (abonelik iptali, zamanlayıcı temizliği).
• Birden fazla etkiyi ayrı useEffect çağrılarına bölmek, kodun okunabilirliğini artırır.

Performans İpuçları

Custom hook'lar performansı doğrudan etkileyebilir. İşte dikkat edilmesi gereken noktalar:

• Değerleri döndürürken useMemo, fonksiyonları döndürürken useCallback kullanın. Ancak erken optimizasyondan kaçının; gerçek bir performans sorunu yaşamadan önce kullanmayın.
• Hook içinde tanımlanan fonksiyonlar veya nesneler her render'da yeniden oluşuyorsa, bunları memoize edin.
• Eğer hook'unuz useEffect içinde veri çekiyorsa, gereksiz API çağrılarını önlemek için bir iptal mekanizması ekleyin (AbortController).

Yeniden Kullanılabilirlik ve Soyutlama

Custom hook'ların en büyük avantajı yeniden kullanılabilir olmalarıdır. Bunu sağlamak için:

• Hook'lar tek bir sorumluluğa sahip olsun; çok genel amaçlı hook'lar zor okunur.
• Parametreleri esnek yapın; varsayılan değerler, opsiyonel argümanlar kullanın.
• Döndürülen değerleri ve fonksiyonları tutarlı bir şekilde adlandırın (ör. data, loading, error kalıbı).
• Genellikle kullanılan mantıkları (örn. form yönetimi, API çağrıları) ayrı hook'lara çıkarın.

Test Edilebilirlik

Custom hook'ları test etmek, doğru çalıştıklarından emin olmanın en iyi yoludur.

• Hook'ları React Testing Library'nin renderHook fonksiyonu ile test edin.
• Yan etkileri mock'layarak (API, zamanlayıcı) testlerinizi izole edin.
• Hook'un farklı durumlarını (yükleme, başarı, hata) test etmeyi unutmayın.

Sık Yapılan Hatalar

Custom hook yazarken karşılaşılan yaygın hatalar ve çözümleri:

Kontrol Listesi

Aşağıdaki kontrol listesini custom hook yazarken kullanarak kaliteyi artırabilirsiniz:

• Hook adı use ile başlıyor mu?
• Hook yalnızca en üst seviyede çağrılıyor mu?
• Bağımlılıklar eksiksiz ve doğru mu?
• Yan etkiler için cleanup fonksiyonu var mı?
• Gereksiz yeniden render'lar önlenmiş mi (memoization)?
• Hook tek bir sorumluluğa sahip mi?
• Parametreler varsayılan değerlerle esnek mi?
• Testler yazılmış mı?

Bu ipuçları ve kontrol listesi ile custom hook'larınızı daha güvenilir, performanslı ve bakımı kolay hale getirebilirsiniz. Unutmayın, iyi bir hook soyutlaması, büyük projelerde zamandan tasarruf sağlar. Örneğin, Intersection Observer ile sonsuz kaydırma gibi özellikleri custom hook'lar ile kolayca uygulayabilirsiniz.

Sık Sorulan Sorular

React custom hook yazarken en sık yapılan hata nedir?

En sık yapılan hata, effect bağımlılıklarını eksik tanımlamak ve hook'ları koşullu olarak çağırmaktır. Bu, eski verilerle çalışmaya veya beklenmeyen yeniden render'lara yol açar.

Custom hook'ları test etmek gerekli mi?

Evet, özellikle karmaşık mantık içeren hook'ları test etmek, olası hataları erken yakalamak için önemlidir. React Testing Library'nin renderHook fonksiyonu bu iş için idealdir.

useMemo ve useCallback custom hook'larda ne zaman kullanılmalıdır?

Hook'tan döndürülen referans tipi değerler (nesne, dizi) veya fonksiyonlar, parent bileşende gereksiz yeniden render'ları tetikliyorsa kullanılmalıdır. Ancak her yerde kullanmak gerekmez, erken optimizasyondan kaçının.

Custom hook birden fazla state yönetiyorsa ne yapmalıyım?

Eğer state karmaşıksa ve birbiriyle ilişkiliyse, useState yerine useReducer kullanmayı düşünün. Böylece state güncelleme mantığı tek bir yerde toplanır.