REACT HOOK SERIES
React Hooks Neden Geliştirildi ?
React Hooks Nedir ? konusunda bir yazı yazmıştım. Yazıyı tekrardan okuyunca , konuyu çok iyi anlamadığımı farkettim. Ve bu konuyu; Neden React Hooks API sine ihtiyaç duyulduğu konusunu tekrardan yazmaya karar verdim.
React Bileşen oluşturma türleri hakkında 2 tür olduğundan bahsetmiştik. Birincisi
- Class Component (State tutmak isterseniz)
- Function Component (State tutma gereksinimi yoksa)
Sonra 3ncü bir tür olan Hook geldiğini ve Hook yapılarının geliştiricileri Function Component kullanmaya yönelttiğinden bahsettik. Peki Class Component ilgili sorun ne ?
1. Constructor super(props) çağırma Zorunluluğu
Bu konuya Dan Abramov kendi blogunda değinmiş Why Do We Write super(props)? Özetle JS constructor çağrıldıktan sonra ancak this erişelebilir hale geliyorsunuz. Burada hiç props kullanmıyor olsanız bile bu çağrımı yapmanız gerekiyor. Ama constructor oluşturmuyorsanız da render içerisinde this.props ulaşabiliyorsunuz çünkü React Class Component oluştururken bu props zaten bind ediyor.
Amaç hep daha az kod yazarak bileşen yazımını sağlamak olduğu için bu kullanımı nasıl kaldırabileceklerini düşündüler. ES class fields proposal yeteneği sayesinde zaten this tanımlamalarını constructor içerisinde yapmak zorunluluğu kalktığı için aslında bu asıl rahatsız eden konu olmaktan çıkıyor.
2. Action Handler Bind Etme Gereksinimi
Bu konuda detaylı bir analiz yazısı yazmıştım. Bu konu JS kendi dil yapısından kaynaklı ve Arrow fonksiyonlar kullanarak bu bind konusundan kurtulabiliriz. Ama Arrow Function gelmeden önce constructor handler bind etmemiz gerekiyordu..
3. Kod Tekrarını Önleme Yöntemi (DRY)
Kod tekrarını önleme yöntemlerinde Inheritance, High Order Component veya RenderProps yöntemlerinin View üzerinden bir kod paylaşımı sağlaması ve bu kod paylaşımlarının arttığında birbirini sarmala yöntemlerinin kodu çok karmaşık hale getirdiğini biliyoruz.
Bu konuda Custom Hook yazarak bunu use ile Compose etmek hem daha okunabilir bir kod sağlıyor. Hemde bu karmaşıklığı gideriyor.
Hook çok fazla farklı use kullanımı olan uygulamalarda bir kolaylık sağlasada 3,4 HoC veya RenderProps sarmal sayısı çok çok fazla sayılmaz. Ama Hook ile başlayanlara Class Component örüntüler biraz karmaşık gelebilir.
4. Class Bileşenlerindeki LifeCycle
Normalda bileşenlerin LifeCycle(Hayat döngüsünü) bilmek ve bunu anlayarak mevcut React Rendering ile senkronizasyon kurmaya çalışmak biraz teknik detaylara girmeyi gerektiriyor.. React Ref konusunda anlattığım LifeCycle, Virtual DOM, ve Browser Rendering Pipeline konularına hakim olmak gerekiyor.
Aşağıdaki görüntüden de anlayacağınız gibi Class Component bileşenin dışarıya olan etkisini componentDidMount ve componentDidUpdate ayrı ayrı çağırmalıyız, fonksiyon tekrarı olmasın diye ortak bir fonksiyon çağrılsada Component Lifecycle (Bileşen Yaşamdöngüsünü) geliştiricinin anlaması bekleniyor. Buda React öğrenme eğrisini zorlaştırıyor.
Halbuki React Hooks bunu useEffect üzerinden yapıyor. Geliştirici bileşenin dış bileşenlere veye çevresine etkisi var ise bunu useEffect içerisinde yapacağını bilmesi daha anlaşılır geliyor
Görüşlerim:
Java Swing geliştirmeden gelen birisi için Hook Bileşen, Class Bileşene göre daha karmaşık ve büyük projelerde yönetilmesi daha zor gibime geliyor. Ama bunun yanında şöyle bir durumda var, JS dünyası giderek Fonksiyonel Programlama yaklaşımlarını daha fazla içerisine entegre ediyor.
Class Bileşen sınıf oluşturma, new yapılarını kullandırtması hem performans hemde kod geliştirme alışkanlığı Java, .Net yapısal, hiyerarşik görüntüsüne dönüştürebileceği için bundan kaçınılıyor.
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
