React ile High Order Component (HOC) kullanımı

Yazıya başlamadan önce kısaca High Order kavramına değinmek için High Order Functions konusundan bahsedeceğim. Bu konuda ön bilgiyi buradan veya buradan alabilirsiniz.

Basitçe söz edecek olursam; High Order Function, argüman olarak bir fonksiyon alabilen veya bir fonksiyon döndürebilen fonksiyonlardır. Böyle söyleyince biraz karışık gelmiş gibi olabilir ama aslında hiç öyle değil. Javascript yazarken sıkça kullandığımız .map(), .filter(), .reduce() gibi fonksiyonlar High Order Functions örnekleridir. Belki de bu tanımı kısaca “fonksiyonlara yeni bir fonksiyonalite katan fonksiyonlar” olarak yapabiliriz. Şimdi bir örnek ile bu söylediklerimi örneklendirmeye çalışayım.

const greaterThan = a => b => a > b;

Burada verilen argümanlara göre, argümanın büyük olup olmadığını tespit eden bir fonksiyon yazmaya çalıştık. Yazdığımız bu fonksiyonu şu şekilde kullanacağız:

greaterThan(5)(10); // false

“Haydaa, nasıl oldu şimdi bu?” diyenler için kısaca şöyle açıklayayım; greaterThan fonksiyonu geriye bir fonksiyon döndürüyor ve bu dönen fonksiyon da daha önce aldığı argümanları karşılaştırarak sonucu döndürüyor. Detaylı baktığınızda ve console üzerinden kısa bir deneme yaptığınızda, bu örneği ve nasıl çalıştığını daha iyi kavrayabilirsiniz.

Şimdi “eee, yani ne yaptık şimdi?” gibi bir soru aklınıza gelebilir. Bu yöntem ile ihtiyacınıza göre şu tarz kullanımlar yapabilirsiniz:

const greaterThan100 = greaterThan(100);
console.log(greaterThan100(200)); // false
console.log(greaterThan100(50));  // true

Basit bir örnek olsa da, temel olarak High Order Functions için akıllarda bir şeyler oluştu diye düşünüyorum. İhtiyacınıza göre bu tarz daha fazla fonksiyon yazabilirsiniz. Bunun dışında yukarda belirttiğim gibi .map(), .filter(), .reduce() gibi metotların da işlevine yakın başka şeyler yazabilirsiniz. Burada konuyla alakalı başka bir yazı daha var ve örnekle de desteklenmiş.

Şimdi temel anlamda High Order olayına biraz değinebildiğimize göre, artık React ile nasıl High Order Component’ler yazabiliriz, ona bakalım.

High Order Components (HOC)

React ile yazdığımız componentlere High Order kavramını uygulayarak bu componentleri genişletecek ve ihtiyacımız olan değerler ile hızlı bir şekilde componenti kullanma imkanına erişeceğiz. HOC sayesinde, vereceğimiz parametreler ve ekleyeceğimiz ekstra parametreler ile belirtiğimiz component için yeni bir component oluşturulacak. Facebook bu olayı “React componentlerini kullanmak için daha gelişmiş bir yol” gibi nitelendiriyor ve öneriyor. Gerçekten HOC kullandıkça çok faydalı olduğunu fark ediyorsunuz. Kodunuza ve yazmış olduğunuz componentlere ayrı bir kullanışlılık geliyor.

Şimdi hızlıca bir React componenti yazalım ve daha sonra bunu HOC ile destekleyelim.

const UserDetails = props => (
  const user = sessionStorage.getItem("user");
  return (
    <div class="user-details-page">
      <p>My name is {user}!</p>
    </div>
  );
);
export default UserDetails;

Kullanıcı bilgisi gösterebileceğimiz bir component yazdık. Bu component “user” bilgisini direkt olarak sessionStorage üzerinden alıyor. Bu ve benzer değerlere uygulamamızdaki başka componentlerde de ihtiyacımız olacağını düşünürsek, her component içerisinde sessionStorage.get() metodu ile istediğimiz veriyi almak, isteyeceğimiz bir durum olmaz.

Şimdi “user” bilgisini componentlere direkt olarak aktarıp, kullanmamıza imkan tanıyan bir HOC yazalım:

const withUser = WrappedComponent => {
  const user = sessionStorage.getItem("user");
  return props => <WrappedComponent user={user} {...props} />;
};
default export withUser;

İşte bu kadar! Parametre olarak bir component alan, istediğimiz değerleri componentin argümanları (props) ile birlikte yeni bir component’e aktaran ve bu componenti geriye döndüren bir metot yazdık. Yani bir HOC yazmış olduk. Şimdi yukarıda yazmış olduğumuz componentimizi, HOC ile birlikte kullanalım.

const UserDetails = props => (
  return (
    <div class="user-details-page">
      <p>My name is {props.user}!</p>
    </div>
  );
);
export default withUser(UserDetails);

Çok daha güzel ve kullanışlı değil mi?

İhtiyaç durumunuza göre sizde kendi componentleriniz için HOC yazabilir ve bu şekilde daha efektif bir kullanım sağlayabilirsiniz. Mesela ben global state management için kullandığım Context’i, HOC ile birlikte istediğim tüm componentlere basitçe aktaran küçük bir şey yazmıştım. Şöyle örneklendireyim:

const withState = WrappedComponent => {
  return props => {
    const [state, dispatch] = useContext(YOUR_CONTEXT);
    return (
      <WrappedComponent
        state={state}
        dispatch={dispatch}
        {...props}
      />
    );
  };
};
export default withState;

Bu kadar! Kısaca High Order Function ve React için High Order Components kavramlarının üzerinden geçmeye çalıştım. Umarım faydası dokunan bir yazı olmuştur. Sormak istediğiniz herhangi bir konu olursa bana iletişim bilgilerimden ulaşabilirsiniz. Bunun dışında bir hata/yanlış gözünüze çarpıyorsa lütfen bana bildirin, birlikte düzeltelim.

Kodla kalın!