Higher-Order Components

Nedir Bu HighOrder Component ?
Bir komposizyonu türetilen diğer componentler dede kullanmak. Polimorfizm ‘e oldjukça benzeri bir yapı aslında bu , aynı zamanda da bir pattern olarak da geçiyor. Şimdi şöyle birden fazla yerde aynı stateleri kullanmamız gerekiyor. Ama şöyle bir fark var , her aynı durumu her bir componentin kendi stateti gibi görmesi gerekiyor. Burada parent componentin child componentlere state göndermesinden farklı bir kullanım var. Parent component gönderdiği stateler diğer componentlerin propsu olur. Bu state de bir işlem yaptığında aslında propsunda yani parent componentin statetine işlem yapmış olur.Uygun bir örnek olarak;

const [counter,setCounter]= React.useState(0)

Yukarıda ki Statemiz olduğunu düşünün parent componentden child componentime gönderdiğimde , child componentte setCounter yaparsam parent componentimin state ti olan counter güncellenir. Ve parent componentim tekrardan render edilir.

Peki nasıl Hoc kullanacağız ? İki tane count işlemi yapan componentim olduğunu düşünelim, bu componentleri görevi sadece sayaclarını artırmak. Bu sayaç işlemleri aslında ortaktır. Burada hoc yaklaşımını kullanabilirim.

Hoc yakalaşım kullanmadan ;

Buttona tıklandığında sayacını artıran component

Button alanından mouse ayrıldığında sayacını artıran component

Görüldüğü gibi her iki componentde aynı işleri yapıyor. Dolayısı ile bunları counter componenti yapıp sarmalayabiliriz.

Hover Component with Hoc

Clicked with Hoc

High Ordered Component

Bu high ordered component , aslında parametre olarak fonksiyon alan bir fonksiyondan başkabirşey değil. Parametre olarak fonksiyon alır ve bu fonksiyona kendi iç statelerini set eder. Aynı zamanda componentin çağrıldığı yerde props atanmış isede bu propslar …props olarak iletir.

Componentlerimin çağrılması

name propertisini …props sayesinde iletebildim. High order componentin nerede kullanılacağı aslında tamamen sizde. Bir yerde codun bir kaç kez tekrar ettiğini hissediyorsanız kullanabilirsiniz.

Yukarıdaki kodların çalışan adresi : https://codesandbox.io/s/highordercomponent-2zj6z

Bir sonraki Hoc yazımda apollo client den gelen Query componentini özelleştirmeyi düşünüyorum. Query zaten hoc derseniz, Her seferinde loading ve error durumları olan bir component diyebilirim.