React HOC (Higher Order Component)

React HOC

React’ın kendi sayfasında yer alan tanıma göre: HOC:

Bir üst-seviye bileşen (İngilizcesi Higher-Order Component — HOC) React’te bileşen mantığının tekrar kullanılmasına yarayan ileri düzey bir tekniktir. HOC’lar React API’nın bir parçası değildir aslında. React’ın bileşen tümleyici doğasından doğan bir modeldir.

Daha açıklayıcı olmak gerekirse, bir üst-seviye bileşen; parametre olarak bir bileşen alıp output olarak yeni bir bileşen döndüren bir fonksiyondur.

Hoc ne zaman kullanmalıyız ?

Kendi edinmiş olduğum tecrübelere göre birden fazla component aynı kod parçacığına ihtiyaç duyuyorsa eğer bu noktada aynı kodu kullanmaları için hoc yöntemine başvurmalıyız.

Örnek yapalım

Örnek senaryomuz basitçe anlaşılması açısından şöyle olsun, mesajver ve mesajver2 adında iki tane componentimiz olsun ve içerisindeki butona basınca her iki componentte ekrana alert ile merhaba hoc yazısını yazdırsın.

src altında mesajHoc.js adında bir dosya oluşturalım.

import React from "react";
const withMesaj = (Component) => {
const mesajVer = () => {
alert("Merhaba HOC");
};
const Wrapped = (props) => {
return <Component mesajVer={mesajVer} {...props} />;
};
return Wrapped;
};
export default withMesaj;

withMesaj adlı componentimiz, parametre olarak Component türünden bir component alıp geriye component döndürmekte ve props olarak mesajVer aldı bir fonksiyon göndermektedir.

Şimdi gelelim componentimizi kullanmaya.

src/mesajver.js ve src/mesajver2 adında iki component oluşturalım.

src/mesajver.js

import React from "react";
import "./styles.css";
import withMesaj from "./mesajHoc";
const MesajVer = (props) => {
return (
<div className="App">
<button
onClick={() => {
props.mesajVer();
}}
>
Mesaj Ver 1
</button>
</div>
);
};
export default withMesaj(MesajVer);

src/mesajver2.js

import React from "react";
import "./styles.css";
import withMesaj from "./mesajHoc";
const MesajVer2 = (props) => {
return (
<div className="App">
<button
onClick={() => {
props.mesajVer();
}}
>
Mesaj Ver 2
</button>
</div>
);
};
export default withMesaj(MesajVer2);

mesajver ve mesajver2 adlı componentimiz withMesaj componentiyle sarmalayıp, withMesaj adlı componentteki mesajVer fonksiyonun props olarak içeri aldık,bu sayede yazacağımız aynı kodu tekrar etmek yere ortak özellikler,fonksiyonlar barından componentlerimizi HOC kullanarak DRY(Dont repeat yourself) prensiplerine uymaya çalışıyor olacağız.

Herkese İyi Çalışmalar Dilerim. :)