React'ta özel hook'lar, belirli bir işlevselliği kapsülleyip yeniden kullanılabilir hale getirmenin etkili bir yoludur. Bu, kodunuzu daha düzenli, anlaşılır ve bakımı kolay hale getirir. Daha önce bir API'den veri çeken basit bir hook oluşturmuştuk. Şimdi ise bu konsepti daha karmaşık bir örnek üzerinden inceleyelim.
Ürün Fiyat Aralığı Filtreleme Hook'u
Diyelim ki bir e-ticaret sitesi için ürün listesi oluşturuyorsunuz ve bu ürünleri fiyat aralığına göre filtrelemek istiyorsunuz. Bu durumda özel bir hook oluşturabiliriz:
Bu hook, ürünler listesini ve min-max fiyat aralığını parametre olarak alır. Fiyat aralığına göre ürünleri filtreler ve sonucu döndürür. Bu hook’u kullanarak, uygulamanızın farklı bölümlerinde ürünleri fiyat aralığına göre filtreleyebilirsiniz.
Kullanıcı Oturum Durumu Takip Hook'u
Özel hook'lar, aynı zamanda global durum yönetimi için de kullanılabilir. Örneğin, bir kullanıcının oturum durumunu takip etmek için aşağıdaki gibi bir hook oluşturabilirsiniz:
Bu hook, Firebase gibi bir kimlik doğrulama servisi ile çalışır ve uygulamanın her yerinden kullanıcının oturum durumunu takip etmeyi sağlar. Böylece, kullanıcı giriş yaptığında veya çıkış yaptığında bileşenlerinizi yeniden render edebilir ve kullanıcıya göre içerik sunabilirsiniz.
Performans Optimizasyonu
Özel hook'ların performansını optimize etmek de önemlidir. Büyük veri setleri ile çalışırken veya karmaşık hesaplamalar yaparken useMemo ve useCallback hook'larını kullanabilirsiniz. Bu, gereksiz render'ları ve hesaplamaları önleyerek uygulamanızın performansını artırır.
Bu hook, ürünleri belirli bir özelliğe göre sıralar ve sıralanmış listeyi döndürür. useMemo kullanarak, sadece ürünler veya sıralama özelliği değiştiğinde sıralama işlemini tekrar yaparız. Bu, büyük ürün listeleri ile çalışırken performansı artırır.
Özel Hook'ların Test Edilmesi
Özel hook'ları dökümantasyonlayarak ve test ederek güvenilirliğini artırabilirsiniz. Jest ve React Testing Library gibi araçlar, hook'larınızı izole bir şekilde test etmenizi sağlar. Bu, hook'larınızın beklenen davranışları sergilediğinden emin olmanıza yardımcı olur.
Kod Örneği: useAuth Hook'unun Test Edilmesi
Bu test, useAuth hook'unun beklenen şekilde çalışıp çalışmadığını kontrol eder. jest.mock ile Firebase modülünü mocklayarak, hook'un davranışını izole ederiz. renderHook ve act kullanarak hook'u render edip sonuçlarını test edebiliriz.
Özel hook'ları kullanarak, React uygulamanızı daha modüler, tekrar kullanılabilir ve bakımı kolay hale getirebilirsiniz. Bu makalede ele alınan örnekler ve en iyi uygulamalar, özel hook'lar konusundaki anlayışınızı geliştirmenize yardımcı olacaktır. Kodunuzu daha temiz, anlaşılır ve performanslı hale getirin ve React ekosistemini daha derinlemesine anlayarak uygulamanızı geliştirin.