Frontend Academy · Pelajaran

Props Render dan Pola HOC

Teruskan fungsi render sebagai prop untuk menyisipkan UI, lalu bungkus komponen dalam Higher-Order Components untuk menyisipkan perilaku tanpa mengubah komponen asli.

Props Render dan Pola HOC adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Dua Pola Penggunaan Kembali Klasik

Sebelum hook (React 16.8), penggunaan kembali logika yang memiliki state berarti menggunakan Komponen Orde Tinggi (HOC) atau properti render. Keduanya jarang digunakan dalam kode baru, tetapi Anda masih akan menjumpainya dalam basis kode lama dan banyak pustaka.

Properti Render — Gagasannya

Sebuah komponen menerima fungsi sebagai properti (umumnya bernama render atau children) lalu memanggilnya dengan state internal. Pengguna menentukan apa yang akan dirender menggunakan state tersebut.

function Mouse({ render }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const handler = (e) => setPos({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', handler);
    return () => window.removeEventListener('mousemove', handler);
  }, []);
  return render(pos);
}

// Usage:
<Mouse render={({ x, y }) => <p>{x}, {y}</p>} />

children sebagai Fungsi

Properti children juga dapat berupa fungsi — polanya sama, tetapi JSX-nya lebih bersih.

function Mouse({ children }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  /* ... */
  return children(pos);
}

<Mouse>
  {({ x, y }) => <p>{x}, {y}</p>}
</Mouse>

Komponen Orde Tinggi — Gagasannya

HOC adalah fungsi yang menerima sebuah komponen dan mengembalikan komponen baru dengan properti atau perilaku tambahan. Pola ini banyak digunakan dalam connect() milik Redux dan withRouter() milik React Router.

function withMouse(Component) {
  return function WithMouse(props) {
    const [pos, setPos] = useState({ x: 0, y: 0 });
    useEffect(() => {
      const handler = (e) => setPos({ x: e.clientX, y: e.clientY });
      window.addEventListener('mousemove', handler);
      return () => window.removeEventListener('mousemove', handler);
    }, []);
    return <Component {...props} mouse={pos} />;
  };
}

// Usage:
const Position = ({ mouse }) => <p>{mouse.x}, {mouse.y}</p>;
const EnhancedPosition = withMouse(Position);
<EnhancedPosition />

HOC Digabungkan dengan Pembungkusan

Anda dapat menumpuk HOC — tetapi hasilnya membentuk “neraka pembungkus” yang sulit dilacak kesalahannya.

// Multiple HOCs:
const Enhanced = withRouter(connect(mapState)(withTranslation()(MyComponent)));
// Equivalent in modern React:
// const Enhanced = MyComponent (reads from hooks: useRouter, useSelector, useTranslation)

Properti Render vs HOC

Properti render: lebih eksplisit, ramah terhadap tipe, dan tidak memiliki benturan nama. HOC: lebih deklaratif, kehilangan tipe statis pada komponen yang dibungkus jika tidak ditangani dengan baik, dan memungkinkan terjadinya benturan nama properti.

Mengapa Hook Menggantikan Keduanya

Hook khusus mencapai tujuan yang sama dengan lebih sedikit kerumitan: tanpa komponen pembungkus, tanpa argumen fungsi bertingkat, dan tanpa manipulasi tipe yang rumit. Hook adalah jawaban idiomatis pada tahun 2025.

// Custom hook equivalent of useMouse:
function useMouse() {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const handler = (e) => setPos({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', handler);
    return () => window.removeEventListener('mousemove', handler);
  }, []);
  return pos;
}

// Usage:
const { x, y } = useMouse();

Saat Properti Render Masih Lebih Unggul

Untuk komponen yang perlu menyisipkan markup (bukan hanya state) — misalnya daftar tervirtualisasi yang merender item pada posisi tertentu — properti render masih menjadi pilihan yang alami.

function VirtualList({ items, itemHeight, renderItem }) {
  const [scrollTop, setScrollTop] = useState(0);
  const start = Math.floor(scrollTop / itemHeight);
  const visible = items.slice(start, start + 20);
  return visible.map((item, i) => renderItem(item, start + i));
}

<VirtualList items={data} itemHeight={40} renderItem={(item, i) => (
  <Row key={i} data={item} />
)} />

Praktik Terbaik HOC (Jika Diperlukan)

Jika Anda harus menulis HOC: salin metode statis (hoist-non-react-statics), teruskan ref (React.forwardRef), dan pertahankan displayName untuk DevTools.

Meneruskan Ref dalam HOC

HOC secara bawaan menyembunyikan ref — gunakan forwardRef agar pengguna tetap dapat mengakses ref komponen yang mendasarinya.

function withLogger(Component) {
  const Wrapped = React.forwardRef((props, ref) => {
    console.log('rendering', Component.name);
    return <Component {...props} ref={ref} />;
  });
  Wrapped.displayName = `withLogger(${Component.name})`;
  return Wrapped;
}

Mengenali Pola Lama

Anda akan menjumpai HOC atau properti render dalam: react-redux (API lama), Apollo Client v2, react-router v5 (withRouter), Formik (Field), dan styled-components (withTheme). Lakukan refaktor ke hook jika API yang lebih baru dari pustaka tersebut memungkinkan.

Pemeriksaan Singkat

Pola apa yang sebagian besar telah digantikan oleh hook untuk berbagi logika yang memiliki state antar komponen React?

Ringkasan: Properti Render & HOC

Properti render: fungsi sebagai properti yang mengembalikan JSX, eksplisit dan ramah terhadap tipe. HOC: fungsi yang membungkus komponen, digunakan oleh pustaka lama (connect, withRouter). Hook khusus telah menggantikan keduanya untuk logika state. Properti render masih unggul ketika Anda perlu menyisipkan markup khusus (daftar tervirtualisasi). Saat menulis HOC: gunakan forwardRef, angkat properti statis, dan tetapkan displayName.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Props Render dan Pola HOC” gratis?

Ya — teks lengkap “Props Render dan Pola HOC” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Props Render dan Pola HOC”?

Teruskan fungsi render sebagai prop untuk menyisipkan UI, lalu bungkus komponen dalam Higher-Order Components untuk menyisipkan perilaku tanpa mengubah komponen asli. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Props Render dan Pola HOC” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Frontend Academy