React Hooks
Merhaba, bu yazımda React’ın 16.8 versiyonu ile hayatımıza giriş yapan Hook’lardan bahsedeceğim. React native için bu destek 0.59 versiyonu ile hayatımıza girmişti, bunu da ayrıca belirtmek isterim. Konu ile uzaktan alakası olsa da, versiyonları bilmemizin açık kaynak dünyasında çok önemli olduğunu da vurgulamak gerekiyor. Çünkü birçok paket bir çok kütüphane var ve her birinin kendi içerisinde bir dünyası ve birbirleriyle bir etkileşimi var, eğer bunu kaçırırsak ortaya derlenebilir, çalıştırılabilir bir proje çıkarmak çok zor olacaktır. İşimiz tamamen şansa kalacaktır.
Neyse konumuza geri dönersek, birçok makalede ve kendi dokümantasyonlarında da belirtildiği üzere, Hook’ların amacı; Class yazmadan React’ın state vb. özelliklerini kullanabilmek. Tam da bu kısımda karşımıza ilk çıkan Hook: useState.
React’ın bize sağlamış olduğu Hook’lardan diğer 2 temel Hook; useEffect, useContext. Tamamını öğrenmek ve kullanımı hakkında detaylara bakmak için buraya tıklayabilirsiniz. Biz bu yazımızda daha çok nedenlerine değineceğiz.
Hook’larla ilgili dikkat etmemiz gereken bazı önemli kurallar var, bu kurallara erişim için de buraya tıklayabilirsiniz.
Bu arada 2018 yılında yapılan React konferansında, Dan Abramov ve Sophie Alpert’in Hook tanıtım videosunu da izlemediyseniz, birinci ağızlardan izlemenizde fayda var.
Peki nereden çıktı bu Hook mimarisi? Ve nereye varılmak isteniyor?
Hook’ ların temel amacı; bileşenler arası etkileşimin Class yapılarında 3rd party bir kütüphane veya HOC(Higher Order Component) kullanmadan çok zor olması. HOC veya 3rd party kullanımı ile bu etkileşimi sürdürmenin de zorluklarını bu konuda bakım destek veren arkadaşlarımız anlayacaktır. Bu yazıyı okuyarsanız muhtemelen daha önce React yazmışsınızdır diye düşünüyorum yoksa bu amacı anlamak biraz zor olacaktır. React yazıyorsanız, özellikle Class based Component’ler yazıyorsanız ikinci konu Class’ların Javascript’in fonksiyonel ve basit yazımından birazcık uzaklaşıyor olması. Bu hem biz geliştirmeciler için hem de makineler için problem. Geliştirmeciler için problem çünkü Javascript ve fonksiyonel proglamanın yanı sıra React’in yaşam döngüleri(Lifecycle) ve diğer standartlarını öğrenmeye çalışıyoruz. Makineler için problem çünkü Javascript’in standartları var biliyoruz ki, bizim Class based yazdığımız bu componentler aslında bu standartlara dönüştürülüyor. Tüm bunları düşününce Hook’lar yani fonksiyonel yazıma dönüş, bileşenler arası daha kolay etkileşim kulağa mantıklı geliyor.
Nereye varılmak isteniyor sorusu aslında biraz tecrübelere ve geliştiricilere bırakılmış durumda. Orta vade için Class’ları tamamen kaldırmanın planda olmadığı kesin. Buraya tıklayarak bu konu hakkındaki detayları React Blog’dan okuyabilirsiniz.
Son olarak şunu belirtmek istiyorum, bu tür yeniliklerde ve güncellemelerde en önemli konulardan bir tanesi dokümantasyonlarda genelde sarı ile yazılmış gözden kaçan küçük ipuçları. Bu ipuçlarına dikkat edelim, ve Hook’larla ilgili olan resmi yazıda şu 2 ipucunu paylaşarak yazımı sonlandırmak istiyorum, sabredip buraya kadar okuduğunuz için teşekkür ederim, umarım faydalı olmuşumdur.
Aşağıdaki hesaplar üzeriden benimle iletişime geçebilirsiniz.
