Skip to main content

High Order Component

High order component sama halnya dengan high order function, dua istilah ini mereturn sesuai dengan namanya misal HOC akan mereturn sebuah component sedangkan HOF mereturn sebuah function

untuk membuat HOC seperti ini

export const withComponent (Component) => props => {
    const data = "hello"

    return <Component data={data} {...props} />
}

maka setiap component yang dibungkus dengan withComponent akan mewarisi props data yang isinya hello

contoh:

const ChildCompoennt = () => {
  return <p>{props.data}</p>;
};

export default withComponent(ChildCompoennt);

maka outputnya adalah "hello"

HOCnya ini dibuat dengan curried function. jadi kalau dibedah kodenya jadi seperti ini

export const withComponent (Component) => {
    return (props) => {
        const data = "hello"
        return <Component data={data} {...props} />
    }
}

Kapan menggunakan HOC?​

HOC dapat digunakan dibeberapa kasus misal

  • Komponenent lain memiliki state atau function yang sama
  • Untuk sharing data antar component

Combine beberapa HOC di 1 component​

HOC dapat dicombine dengan mengunakan package tambahan yaitu Ramdajs

cara mengunakannya seperti ini

import {compose} from "ramda"

...

export default compose(userHOC, chartHOC)(ChildComponent)

dengan ini props di userHOC dan chartHOC akan diwariskan ke ChildComponent

Referensi:​