0Pricing
React Academy · Pelajaran

Pola Render Props

Teruskan fungsi sebagai prop yang mengembalikan JSX untuk berbagi perilaku tanpa mengikatnya pada UI.

Pola Render Props adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 1 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 React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Selamat Datang

Dalam pelajaran ini, Anda akan memahami pola props render—meneruskan fungsi sebagai prop yang mengembalikan JSX—dan mempelajari kapan pola ini berguna untuk berbagi perilaku antar-komponen.

Apa Itu Props Render?

Props render adalah pola ketika sebuah komponen menerima prop berupa fungsi. Komponen tersebut memanggil fungsi ini untuk menghasilkan keluarannya. Pengguna komponen mengendalikan antarmuka pengguna, sedangkan komponen menyediakan perilakunya.
<DataProvider render={data => <UserCard user={data} />} />

Contoh Sederhana Prop Render

Komponen Pengalih mengelola keadaan terbuka/tertutup dan memanggil prop render dengan keadaan saat ini serta fungsi untuk mengubahnya. Pengguna komponen menentukan cara perenderannya.
function Toggle({ render }) {
  const [on, setOn] = useState(false);
  return render(on, () => setOn(!on));
}

<Toggle render={(on, toggle) => (
  <button onClick={toggle}>{on ? 'Close' : 'Open'}</button>
)} />

Menggunakan children sebagai Prop Render

Alih-alih menggunakan prop render bernama, Anda dapat menggunakan `children` sebagai fungsi. Banyak pustaka (React Router v5, Formik) menggunakan pola ini—pola ini terkadang disebut “children sebagai fungsi”.
<Toggle>
  {(on, toggle) => (
    <div>
      {on && <Panel />}
      <button onClick={toggle}>Toggle</button>
    </div>
  )}
</Toggle>

Pelacak Posisi Tetikus

Contoh klasik props render: komponen MouseTracker melacak posisi kursor dan meneruskannya ke prop render. Setiap pengguna komponen dapat menampilkan posisi tersebut dengan cara yang diinginkannya.
function MouseTracker({ children }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  return (
    <div onMouseMove={e => setPos({ x: e.clientX, y: e.clientY })}>
      {children(pos)}
    </div>
  );
}

Props Render vs Hook Kustom

Props render merupakan pola utama sebelum hook tersedia. Kini hook kustom melakukan hal yang sama dengan lebih rapi: hook mengembalikan data dan fungsi, lalu komponen menggunakannya dalam JSX-nya sendiri. Hook lebih disarankan dalam React modern.
// Old: render props
<Mouse render={pos => <p>{pos.x}</p>} />

// Modern: custom hook
const pos = useMouse();
<p>{pos.x}</p>

Kapan Props Render Masih Tepat Digunakan

Props render masih berguna ketika: (1) Anda perlu menyisipkan perenderan dinamis di lokasi tertentu dalam pohon, (2) Anda sedang membangun pustaka komponen tanpa antarmuka yang memisahkan logika dari antarmuka pengguna.

Peringatan Performa

Mendefinisikan prop render secara sebaris membuat fungsi baru pada setiap perenderan induk, sehingga komponen anak PureComponent/React.memo tidak dapat melewati perenderan ulang. Ekstrak fungsi prop render ke variabel atau metode yang stabil.
// Avoid: new function every render
<Toggle render={pos => <Dot pos={pos} />} />

// Better: stable reference
const renderDot = pos => <Dot pos={pos} />;
<Toggle render={renderDot} />

Menggabungkan Props Render

Menumpuk beberapa komponen prop render dengan cepat menciptakan “neraka prop render” atau “neraka pembungkus”—panggilan balik bertingkat dalam yang sulit dibaca. Inilah salah satu alasan hook diperkenalkan.

Props Render dalam Pustaka

React Router v5 menggunakan props render untuk Route. Downshift, Formik, dan React-Table juga menggunakan berbagai variannya. Memahami props render membantu Anda membaca dan men-debug kode yang menggunakan pustaka-pustaka ini.

Pemeriksaan Singkat

Apa keunggulan utama pola props render dibandingkan meneruskan JSX statis?

Ringkasan

Props render meneruskan fungsi yang mengembalikan JSX. Komponen menyediakan perilaku, sedangkan pengguna komponen menyediakan antarmuka pengguna. Utamakan hook kustom dalam React modern, tetapi pahami props render untuk membaca kode yang sudah ada dan membangun komponen tanpa antarmuka.

Berikutnya

Pelajaran berikutnya: **Penjelasan Komponen Orde Tinggi (HOC)**—Anda akan membungkus komponen untuk menyisipkan prop, melindungi rute, atau menambahkan pencatatan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pola Render Props” gratis?

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

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

Teruskan fungsi sebagai prop yang mengembalikan JSX untuk berbagi perilaku tanpa mengikatnya pada UI. Kamu berlatih React 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 React Academy?

Tidak diperlukan pengalaman sebelumnya. React 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 1 dari 4.

Berapa lama pelajaran “Pola Render Props” 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 React Academy ini?

Ya. Setiap pelajaran React 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

  1. Pola Render Props
  2. Penjelasan Komponen Orde Tinggi (HOC)
  3. HOC vs Render Props vs Hook Kustom
  4. Memfaktorkan Ulang HOC menjadi Hook Kustom
← Kembali ke React Academy