Panduan React Higher Order Components (HOC)

Panduan ini diperuntukkan untuk pemakai tingkat menengah yang ingin manfaatkan skema HOC. Bila Anda baru mengenali React, Anda kemungkinan harus awali dengan membaca dokumentasinya.

Higher Order Component (HOC) ialah skema design dalam React yang memungkinkannya sebuah elemen bundle oleh elemen lain untuk meluaskan atau melakukan modifikasi sikapnya. HOC adalah alat yang baik untuk memakai kembali kode dan menambah fungsionalitas tambahan ke elemen tanpa melakukan modifikasi elemen aslinya.

Dalam kata lain, Elemen tingkat tinggi (HOC) adalah peranan yang ambil elemen dan return elemen baru. HOC dipakai untuk memakai kembali kode, menambah fungsionalitas tambahan ke elemen, atau melakukan modifikasi sikap elemen. Mereka ialah skema kelanjutan dalam React dan tidak dibutuhkan untuk membikin elemen dasar.

Pasti! Elemen tingkat tinggi ialah skema dalam React yang memungkinkannya Anda memakai kembali kode dan meluaskan fungsionalitas elemen yang ada. Mereka dibikin dengan menulis peranan yang ambil elemen sebagai argument dan return elemen baru. HOC bisa dipakai untuk beragam arah, seperti menambah property tambahan ke elemen, mengganti sikap elemen, atau menyediakan akses ke object kerangka React.

Salah satunya manfaat khusus memakai HOC di React adalah memungkinkannya Anda untuk memakai kembali code dan menambah fungsionalitas tambahan ke elemen tanpa melakukan modifikasi elemen aslinya. Ini membuat code Anda dapat lebih maintenance serta lebih gampang diperbaharui karena Anda bisa mengganti sikap beberapa elemen dengan mengupdate satu HOC.

Faedah lainnya dari HOC ialah membuat lebih gampang untuk mengetes elemen Anda karena memungkinkannya Anda untuk pisahkan sikap dan fungsionalitas elemen jadi sisi yang lebih kecil serta lebih modular. Ini membuat lebih gampang untuk mengetes tiap fungsionalitas secara individu dan untuk mengonfirmasi jika HOC dan elemen yang bundle bekerja bersama secara benar.

React Hooks versi HOC

React Hooks dan elemen tingkat tinggi (HOC) adalah dua skema berlainan untuk memakai kembali nalar elemen di React.

React Hooks ialah feature baru di React 16.8 yang memungkinkannya Anda memakai status dan fitur React yang lain tanpa menulis kelas. Ini membuat lebih gampang untuk share nalar antara elemen dan bisa membuat code Anda lebih gampang dibaca dan dimengerti.

Elemen tingkat tinggi, di lain sisi, ialah skema yang mengikutsertakan pembikinan elemen baru yang bundle elemen yang telah ada untuk menambahkan fungsionalitas tambahan. Ini kerap dipakai untuk menambah sikap seperti autentikasi atau management topik ke elemen.

React Hooks menyediakan langkah yang lebih langsung dan simpel untuk memakai kembali nalar elemen, sementara elemen dengan posisi semakin tinggi ialah skema yang lebih fleksibel dan kuat untuk meluaskan sikap elemen. Terserah Anda untuk pilih pendekatan yang paling cocok untuk project Anda.

Apa yang bisa saya kerjakan secara HOC?

Ada beberapa langkah untuk memakai elemen tingkat tinggi dalam program React Anda. Berikut sejumlah misalnya:

Pemakaian kembali code: Anda bisa memakai HOC untuk mengekstrak fungsionalitas umum dari beberapa elemen dan memakainya kembali di beberapa sisi program Anda. Ini bisa membantu Anda menghindar penulisan code yang serupa berulang-kali dan menjaga supaya elemen masih tetap modular dan gampang dirawat.
Kecurangan props: HOC bisa dipakai untuk menambah props tambahan ke elemen atau melakukan modifikasi props yang diterimanya dari induknya. Ini bisa bermanfaat untuk menyiapkan data atau sikap yang diperlukan elemen, tapi tidak dipunyai oleh induknya.
Abstraksi negara: HOC bisa dipakai untuk mengurus negara secara dipisah dari elemen yang memakai negara. Ini bisa membantu Anda menjaga elemen Anda masih tetap murni dan menghindar bermasalah dengan nalar management kondisi yang sulit.
Render prop pattern: HOC bisa dipakai untuk menerapkan skema render prop, di mana elemen tampilkan prop peranan yang memungkinkannya turunannya merender sisi elemen yang lain. Ini bisa bermanfaat untuk membikin elemen yang bisa dipakai lagi yang bisa dikustomisasi oleh elemen yang memakainya.

Kita akan mengulas poin ini lebih detil kelak, tapi pertama kali, kita akan menyaksikan langkah menerapkan HOC, karena implikasi memungkinkannya dan batasi apa yang bisa Anda kerjakan secara HOC.

implikasi pabrik HOC

Pabrik elemen tingkat tinggi ialah peranan yang return elemen tingkat tinggi. Ini bisa bermanfaat saat Anda ingin membuat beberapa HOC yang mempunyai susunan dasar yang serupa, tapi disamakan untuk maksud yang lain. Berikut contoh pabrik HOC yang memakai nama prop dan nilai standar untuk prop itu, dan return HOC yang menambah prop ke elemen dengan nilai standar yang ditetapkan:

const withDefaultProp = (propName, defaultValue) => (Component) =>
  (props) => (
  <Component {...props} {...{ [propName]: defaultValue }} />
);

Untuk menggunakan pabrik HOC ini, Anda akan memanggilnya dengan nama prop dan nilai default yang Anda inginkan, dan kemudian meneruskan komponen HOC yang dihasilkan untuk wrapped. Berikut adalah contoh penggunaan pabrik HOC ini untuk membuat HOC yang menambahkan penyangga warna dengan nilai default merah:

const withColor = withDefaultProp(’color’, ’red’);

Anda kemudian dapat menggunakan withColor HOC untuk membungkus komponen dan menambahkan prop warna ke dalamnya:

const MyButton = withColor(Button);
// This would render a ‘Button‘ component with a ‘color‘ prop set to
  ‘red‘
<MyButton>Click me!</MyButton>

Ini hanya salah satunya contoh bagaimana Anda bisa memakai pabrik HOC untuk membikin HOC. Anda bisa membuat pabrik HOC untuk semuanya tipe HOC yang ingin Anda bikin, dan menyesuaikan sama sesuai keperluan untuk kasus pemakaian khusus Anda.

Proksi props

Dalam soal props, HOC bisa bertindak sebagai proksi props, memungkinkannya Anda melanjutkan props tambahan ke elemen yang bundle. Misalkan, bila Anda mempunyai HOC namanya withFoo yang bundle elemen MyComponent, Anda bisa melanjutkan prop foo ke withFoo dan itu akan dilanjutkan ke MyComponent sebagai prop. Ini bermanfaat untuk memberi info tambahan ke elemen yang bundle tak perlu melakukan modifikasi elemen aslinya.

Berikut contoh pabrik HOC yang membuat HOC yang bertindak selaku props proxy:

function createPropsProxyHOC(propName) {
  return function (WrappedComponent) {
    return function (props) {
    return <WrappedComponent {...props} {...{ [propName]:
      someValue }} />;
    }
  }
}

In this example, the HOC factory createPropsProxyHOC takes a propName argument and returns a HOC that adds a prop with the specified name and a value of someValue to the wrapped component. You can use this HOC like this:

const MyComponentWithFoo = createPropsProxyHOC(’foo’)(MyComponent);

Saat ini Anda bisa memakai MyComponentWithFoo di program Anda, dan itu akan melanjutkan prop foo dengan nilai someValue ke MyComponent. Ini memungkinkannya Anda menambah fungsionalitas tambahan ke MyComponent tanpa mengganti elemen aslinya.

Apa yang dapat dilaksanakan dengan Props Proxy?

Props proxy adalah langkah untuk menambah props tambahan ke elemen tanpa mengganti elemen asli. Ini bisa bermanfaat untuk memberi info tambahan ke elemen yang wrapped atau untuk meluaskan fungsionalitas elemen asli. Berikut contoh-contoh yang bisa Anda kerjakan secara proxy props:

Beri data tambahan ke elemen yang bundle: Anda bisa memakai proksi props untuk melanjutkan data dari elemen tingkat tinggi ke elemen tingkat rendah tanpa mengganti elemen tingkat rendah. Ini memungkinkannya Anda menjaga supaya elemen tingkat rendah bisa dipakai kembali dan mandiri dari elemen tingkat semakin tinggi.
Perlebar fungsionalitas elemen yang wrapped: Anda bisa memakai proksi props untuk menambah sistem atau sikap tambahan ke elemen yang bundle. Misalkan, Anda bisa menambah sistem yang tangani peristiwa tertentu atau bertindak tertentu. Ini memungkinkannya Anda meluaskan fungsionalitas elemen asli tanpa mengganti kode asli.
Ganti sikap elemen yang bundle: Anda bisa memakai proksi props untuk mengganti sikap elemen yang bundle. Misalkan, Anda dapat menukar sistem render dari elemen yang bundle untuk mengganti langkah merendernya. Ini memungkinkannya Anda untuk melakukan modifikasi sikap elemen asli tanpa mengganti kode asli.

Keseluruhannya, props proxy memungkinkannya Anda menambah fungsionalitas tambahan ke elemen tanpa mengganti elemen aslinya, menjadikan alat yang baik untuk meluaskan dan mengganti sikap elemen yang ada.

Engineering props

Higher Order Component (HOC) di React adalah peranan yang ambil elemen dan return elemen baru dengan fungsionalitas tambahan. HOC adalah skema dalam React untuk memakai kembali nalar elemen.

Saat Anda memakai HOC, Anda bisa merekayasa props dari elemen yang bundle dalam cara-cara. Berikut contoh-contoh bagaimana Anda bisa Engineering props di HOC:

Melanjutkan props tambahan ke elemen yang bundle: HOC bisa bertindak selaku proksi props, memungkinkannya Anda melanjutkan props tambahan ke elemen yang bundle. Misalkan, bila Anda mempunyai HOC namanya withFoo yang bundle elemen MyComponent, Anda bisa melanjutkan prop foo ke withFoo dan itu akan dilanjutkan ke MyComponent sebagai prop. Ini bermanfaat untuk memberi info tambahan ke elemen yang bundle tak perlu melakukan modifikasi elemen aslinya.
Melakukan modifikasi props dari elemen yang bundle: HOC bisa melakukan modifikasi props dari elemen yang bundle saat sebelum meneruskannya ke elemen yang bundle. Misalkan, Anda bisa memakai HOC untuk mengganti props dari elemen yang bundle atau untuk menambahkan atau hapus props dari elemen yang bundle. Ini memungkinkannya Anda untuk mengganti sikap elemen yang bundle tanpa mengganti kode aslinya.
Melanjutkan props yang diubah ke elemen anak: HOC bisa mewarisi props yang diubah ke elemen anak dari elemen yang bundle. Misalkan, Anda bisa memakai HOC untuk mengganti props dari elemen yang wrapped, lalu melanjutkan props yang sudah diganti ke elemen turunan dari elemen yang bundle. Ini memungkinkannya Anda untuk mengganti sikap elemen anak tanpa mengganti code aslinya.

Merekayasa props dalam HOC memungkinkannya Anda menambah fungsionalitas tambahan ke elemen yang bundle, dan untuk mengganti sikap elemen yang bundle dan elemen turunannya tanpa mengganti code aslinya. Ini ialah alat yang baik untuk meluaskan dan melakukan modifikasi sikap elemen yang ada.

Terhubung instance lewat Rekomendasi

Bisa saja untuk terhubung instance elemen yang bundle dari dalam HOC, tapi ini tidak dianjurkan karena menghancurkan enkapsulasi elemen. Pada umumnya, HOC jangan membalikkan keadaan intern atau sikap elemen yang bundle, dan terhubung instance elemen yang bundle lewat rekomendasi ialah langkah untuk melakukan.

Dibanding terhubung instance dari elemen yang bundle, dianjurkan untuk memakai props dan state untuk berbicara di antara HOC dan elemen yang bundle. Ini memungkinkannya Anda menambah fungsionalitas tambahan ke elemen yang bundle tanpa menghancurkan enkapsulasinya.

Berikut contoh HOC yang memakai rekomendasi untuk terhubung instance dari elemen yang bundle:

function withFoo(WrappedComponent) {
    return class extends React.Component {
        componentDidMount() {
            this.wrappedComponent.someMethod();
        }
        render() {
            return ( <
                WrappedComponent ref = {
                    (c) => this.wrappedComponent = c
                } {
                    ...this.props
                }
                />
            );
        }
    }
}

Dalam perumpamaan ini, HOC withFoo memakai atribut ref untuk membikin rekomendasi ke instance elemen yang wrapped. Ini selanjutnya panggil sistem pada instance elemen yang bundle dalam sistem transisi hidup componentDidMount.

Seperti disebut awalnya, ini bukanlah pendekatan yang dianjurkan dan ada langkah yang lebih bagus untuk menambah fungsionalitas tambahan ke elemen yang wrapped tanpa menghancurkan enkapsulasinya. Umumnya lebih bagus memakai props dan state untuk berbicara di antara HOC dan elemen yang bundle.

Abstraksi negara

Di React, elemen bisa mempunyai status, yakni objek yang berisi data khusus untuk elemen itu. Status ini bisa dipakai untuk merender info aktif dalam sistem render elemen. Tetapi, mengurus status langsung pada suatu elemen menjadi susah karena elemen tumbuh dalam komplikasi.

Salah satunya langkah untuk mengurus kondisi secara lebih terarah dan bisa maintenance dengan memakai HOC untuk mengabstraksi nalar kondisi jadi elemen terpisah. HOC ini selanjutnya bisa mengurus status dan meneruskannya ke elemen yang wrapped sebagai props.

Misalkan, misalnya kita mempunyai elemen namanya MyComponent yang tampilkan daftar poin. Elemen mempunyai status yang berisi poin untuk diperlihatkan dalam perincian. Kita bisa membuat HOC namanya withState yang mengurus status untuk elemen ini dan melanjutkan poin ke bawah sebagai props.

Berikut contoh bagaimana withState bisa diterapkan:

// withState.js
import React from’ react’;
const withState = WrappedComponent => {
    return class extends React.Component {
        constructor(props) {
            super(props);
            // Initialize the state with an empty array of items
            this.state = {
                items: []
            };
        }
        // Method to add an item to the state
        addItem = item => {
            this.setState(prevState => ({
                items: [...prevState.items, item]
            }));
        }
        render() {
            // Pass the state down as props to the wrapped component
            return < WrappedComponent items = {
                this.state.items
            }
            addItem = {
                this.addItem
            } {
                ...this.props
            }
            />;
        }
    }
};
export default withState;

Kita kemudian dapat menggunakan withState HOC untuk membungkus MyComponent dan mengabstraksi logika state ke dalam HOC:

// MyComponent.js
import React from ’react’;
import withState from ’./withState’;

class MyComponent extends React.Component {
  render() {
    // Use the items and addItem props that were passed down from the
       HOC
const { items, addItem } = this.props;
return (
    <div>
      <button onClick={() => addItem(’item 1’)}>Add item</button>
      <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
       ))}
      </ul>
    </div>
    );
  }
}
export default withState(MyComponent);

Dalam perumpamaan ini, MyComponent tidak perlu mengurus statusnya sendiri. Sebagai tukarnya, dia terima poin dan properti addItem dari withState HOC, yang tangani nalar status. Ini membuat kode lebih modular serta lebih gampang maintenance.

Reversal Peninggalan

Antipoda inheritance ( disebutkan inheritance wrapping) ialah skema yang bisa dipakai bersama dengan elemen tingkat tinggi (HOC) di React untuk tingkatkan pemakaian ulangi dan keterbacaan kode.

Di React, HOC adalah peranan yang ambil elemen dan return elemen baru. Elemen baru ini kerap disebutkan elemen "wrapped" atau "reverse". HOC bermanfaat untuk mengabstraksi nalar umum, seperti mengurus status atau tangani ambil data, jadi elemen terpisah yang bisa dipisah antara banyak elemen yang lain.

Dalam skema antipoda inheritance, HOC dipakai untuk membikin elemen baru yang bundle elemen asli dan mengubah hierarki inheritance tradisionil. Ini memiliki arti elemen asli jadi kelas dasar, dan HOC jadi kelas turunan. Sebagai contoh, misalnya kita mempunyai elemen namanya BaseComponent yang berisi beberapa nalar umum yang ingin kita pakai kembali di elemen lain. Kita bisa membuat HOC namanya withCommonLogic yang bundle BaseComponent dan membalik hierarki inheritance:

// withCommonLogic.js

import React from’ react’;

const withCommonLogic = WrappedComponent => {
    return class extends WrappedComponent {
        // Implement common logic here
        render() {
            return super.render();
        }
    }
};

export default withCommonLogic;

Kita kemudian dapat menggunakan withCommonLogic HOC untuk wrapping komponen lain yang perlu menggunakan kembali logika umum dari BaseComponent:

// OtherComponent.js

import React from’ react’;
import withCommonLogic from’. / withCommonLogic’;

class OtherComponent extends React.Component {
    // Other component logic here
    render() {
        return ( 
          <div> {
                /* Use common logic from BaseComponent here */ } 
          </div>
        );
    }
}
export default withCommonLogic(OtherComponent);

Dalam perumpamaan ini, OtherComponent wrapped oleh HOC withCommonLogic, yang mengubah hierarki inheritance. Ini memungkinkannya OtherComponent mewariskan nalar umum dari BaseComponent tak perlu menggandakan kode.

Secara singkat, antipoda inheritance ialah skema yang bisa dipakai dengan HOC di React untuk tingkatkan pemakaian kembali dan keterbacaan kode. Ini mengikutsertakan pemakaian HOC untuk membikin elemen baru yang bundle elemen asli dan mengubah hierarki inheritance, memungkinkannya elemen asli jadi kelas dasar dan HOC jadi kelas turunan.

Apa yang bisa Anda kerjakan secara Legacy Reversal?

Anda kemungkinan memakai antipoda inheritance dengan HOC di React saat Anda ingin menambah property atau fungsionalitas yang serupa ke sejumlah elemen tanpa mengulang code yang serupa setiap elemen. Ini bisa membantu Anda menjaga code Anda DRY (Tidak boleh Ulang Sendiri) dan membuat lebih gampang untuk arranged dan maintenance.

Berikut beberapa contoh kapan Anda kemungkinan memakai antipoda inheritance dengan HOC di React:

Anda ingin menambah properti yang serupa, seperti nama pemakai atau status autentikasi, ke sejumlah elemen.
Anda ingin menambah moment handler yang serupa, seperti onClick handler, ke sejumlah elemen.
Anda ingin menambah style yang serupa, seperti font standar atau pola warna, ke sejumlah elemen.

Reversal inheritance dapat menjadi skema yang bermanfaat untuk diperhitungkan saat Anda ingin memakai kembali nalar code di program React Anda. Ini bisa membantu menjaga code Anda DRY dan membuat lebih gampang untuk diatur dan maintenance.

Render Pembajakan

Render highjacking adalah teknik baik yang memungkinkannya Anda menambah fungsionalitas tambahan ke elemen dasar, tapi dapat membuat code Anda lebih susah untuk dimengerti dan maintenance. Karenanya, ini harus dipakai dengan berhati-hati dan cuma bila itu ialah jalan keluar terbaik untuk permasalahan yang ditemui.

Salah satunya kasus pemakaian umum untuk skema ini ialah mengabstraksikan nalar rendering yang kompleks atau berulang-ulang. Misalkan, bila Anda mempunyai elemen yang penting merender kelompok elemen anak yang serupa secara berlainan tergantung pada keadaan tertentu, Anda bisa memakai HOC untuk tangani rendering bersyarat dan sederhanakan code di elemen aslinya.

Kasus pemakaian lain untuk HOC render-highjacking ialah memberi sikap atau fungsionalitas rendering tambahan ke elemen yang wrapped. Misalkan, Anda bisa memakai HOC untuk menambah animasi ke elemen atau memberi properti tambahan ke elemen yang wrapped berdasarkan beberapa data external.

Berikut contoh bagaimana Anda bisa memakai render highjacking dengan HOC di React:

// MyBaseComponent.js
import React from ’react’;

const MyBaseComponent = ({ name }) => (
<div>{name}</div>
);

export default MyBaseComponent;

// App.js
import React from ’react’;
import MyBaseComponent from ’./MyBaseComponent’;
import withName from ’./withName’;

const MyEnhancedComponent = withName(MyBaseComponent);

const App = () => (
  <MyEnhancedComponent />
);

Dalam perumpamaan ini, withName HOC memakai MyBaseComponent sebagai argument dan return elemen baru yang dipertambah prop nama. Ini dilaksanakan dengan menukar sistem render asli MyBaseComponent sama yang baru yang menambah nama prop ke objek props.

Render Highjack dengan Props Proxy

Bisa saja untuk memakai React Higher-Order Components (HOCs) dengan props proxy, tapi ini belum pasti sebagai pendekatan terbaik dalam semua kasus. Proxy HOC dan props ialah skema yang bisa dipakai untuk memakai kembali kode dan sikap di beberapa elemen, tapi mereka mempunyai beberapa ketidaksamaan khusus dalam langkah kerjanya dan kapan pas untuk dipakai.

Satu ketidaksamaan khusus di antara HOC dan proksi props adalah jika HOC bundle elemen dan return elemen baru yang ditingkatkan, sementara proksi props inject props tambahan ke elemen yang wrapped langsung. Ini memiliki arti jika saat memakai HOC, Anda perlu memakai elemen yang ditingkatkan yang dibalikkan oleh HOC, bukan elemen aslinya, untuk terhubung sikap atau fungsionalitas tambahan yang disiapkan oleh HOC.

Di lain sisi, props proxy memungkinkannya Anda untuk selalu memakai elemen aslinya, tapi plus tambahan props yang disuntikkan ke dalamnya. Ini dapat bermanfaat bila Anda ingin menambah property baru ke elemen tanpa mengganti langkah pemakaiannya atau direkomendasikan di lain tempat dalam kode Anda.

Pemberian nama

Saat memberikan nama React Higher-Order Component (HOC), penting untuk pilih nama yang tepat menggambarkan sikap atau fungsionalitas yang disiapkan HOC. Ini akan mempermudah pengembang yang lain memakai HOC Anda untuk pahami apa yang dilakukan, dan akan mempermudah Anda untuk memiara dan bekerja dengan HOC di periode kedepan.

Salah satunya pendekatan umum untuk memberikan nama HOC dengan memakai nama elemen asli yang bundle HOC, dituruti dengan akhiran "With" dan frase preskriptif yang memperlihatkan sikap atau peranan tambahan yang disiapkan oleh HOC. Misalkan, bila Anda mempunyai HOC yang menambah tanda pemuatan ke satu elemen, Anda bisa memberikan nama WithLoadingIndicator.

Pendekatan lain dengan memakai nama yang umum yang menerangkan arah atau peranan HOC keseluruhannya. Misalkan, bila Anda mempunyai HOC yang provide props tambahan untuk elemen yang bundle berdasar beberapa data external, Anda bisa memberikan nama WithPropsFromExternalData.

Yang paling penting ialah pilih nama yang preskriptif, memiliki makna, dan gampang dimengerti. Ini akan membantu pengembang yang lain memakai HOC Anda, dan akan mempermudah Anda untuk memiara dan bekerja dengan HOC di periode kedepan.

Praktik Terbaik memakai HOC

Berikut beberapa praktik terbaik untuk memakai Higher Order Components (HOC) di React:

Pakai HOC untuk menambah sikap atau fungsionalitas tambahan ke elemen, tapi jauhi pemakaian HOC untuk menambah style atau tatanan letak ke elemen. Bukannya, pakai CSS atau teknik style yang lain untuk menambah style ke elemen, dan pakai prop style React atau prop className untuk mengaplikasikan style ke elemen.
Jauhi HOC nested dalam, karena bisa menyulitkan pengetahuan sikap dan peranan elemen. Bukannya, coba untuk menjaga HOC Anda masih tetap dangkal, dan pakai beberapa HOC untuk menambah beragam tipe fungsionalitas ke sebuah elemen, dibanding memakai satu HOC dengan beberapa susunan sarang.
Pakai property displayName untuk menamai yang lebih preskriptif ke HOC dan elemen yang bundle, yang bisa memudahkan debug dan pahami sikap elemen Anda. Misalkan, Anda bisa menyetel property displayName dari HOC ke withData dan property displayName dari elemen yang bundle ke MyComponent.
Pakai API forwardRef untuk melanjutkan ref ke elemen yang bundle, yang bisa memudahkan akses elemen yang bundle dan sistemnya dari elemen induk. Ini benar-benar bermanfaat bila Anda perlu terhubung sistem elemen yang bundle untuk memacu sikap atau perlakuan tertentu.
Jauhi melakukan modifikasi elemen asli saat membuat HOC. Bukannya, pakai sistem React.cloneElement untuk membikin versi baru yang diubah dari elemen asli, dan balikkan elemen baru itu dari HOC. Ini pastikan jika elemen asli tidak diubah, dan bisa dipakai di lain tempat di program Anda tanpa sikap yang tidak diharap.

Keseluruhannya, ikuti praktek terbaik ini bisa membantu Anda menulis kode yang clean dan bisa maintenance saat memakai HOC di React.