18 Agustus 2025Bahasa Indonesia

Panduan komprehensif tentang React Portals, menjelaskan cara kerjanya, kasus penggunaannya, dan praktik terbaik untuk merender konten di luar hierarki komponen standar.

React Portals: Menguasai Rendering di Luar Pohon Komponen

React adalah pustaka JavaScript yang ampuh untuk membangun antarmuka pengguna. Arsitektur berbasis komponennya memungkinkan pengembang membuat UI yang kompleks dengan mengomposisikan komponen yang lebih kecil dan dapat digunakan kembali. Namun, terkadang Anda perlu merender elemen di luar hierarki komponen normal, sebuah kebutuhan yang ditangani dengan elegan oleh React Portals.

Apa Itu React Portals?

React Portals menyediakan cara untuk merender anak ke node DOM yang ada di luar hierarki DOM komponen induk. Bayangkan Anda perlu merender modal atau tooltip yang seharusnya muncul secara visual di atas konten aplikasi lainnya. Menempatkannya langsung di dalam pohon komponen dapat menyebabkan masalah gaya karena konflik CSS atau batasan posisi yang diberlakukan oleh elemen induk. Portals menawarkan solusi dengan memungkinkan Anda "menteleportasi" keluaran komponen ke lokasi yang berbeda di DOM.

Anggap saja seperti ini: Anda memiliki komponen React, tetapi keluaran yang dirender tidak disuntikkan ke DOM induknya langsung. Sebaliknya, itu dirender ke node DOM yang berbeda, biasanya yang Anda buat khusus untuk tujuan itu (seperti wadah modal yang ditambahkan ke body).

Mengapa Menggunakan React Portals?

Berikut adalah beberapa alasan utama mengapa Anda mungkin ingin menggunakan React Portals:

Menghindari Konflik CSS dan Pemotongan (Clipping): Seperti yang disebutkan sebelumnya, menempatkan elemen langsung di dalam struktur komponen yang bersarang dalam dapat menyebabkan konflik CSS. Elemen induk mungkin memiliki gaya yang secara tidak sengaja memengaruhi tampilan modal, tooltip, atau overlay lainnya. Portals memungkinkan Anda merender elemen-elemen ini langsung di bawah tag body (atau elemen tingkat atas lainnya), melewati potensi gangguan gaya. Bayangkan aturan CSS global yang mengatur overflow: hidden pada elemen induk. Modal yang ditempatkan di dalam induk tersebut juga akan terpotong. Portal akan menghindari masalah ini.
Kontrol Lebih Baik Atas z-index: Mengelola z-index di seluruh pohon komponen yang kompleks bisa menjadi mimpi buruk. Memastikan bahwa modal selalu muncul di atas segalanya menjadi jauh lebih mudah ketika Anda dapat merendernya langsung di bawah tag body. Portals memberi Anda kontrol langsung atas posisi elemen dalam konteks penumpukan (stacking context).
Peningkatan Aksesibilitas: Persyaratan aksesibilitas tertentu, seperti memastikan bahwa modal memiliki fokus keyboard saat dibuka, lebih mudah dicapai ketika modal dirender langsung di bawah tag body. Menjadi lebih mudah untuk menjebak fokus di dalam modal dan mencegah pengguna secara tidak sengaja berinteraksi dengan elemen di belakangnya.
Menangani Induk dengan overflow: hidden: Seperti yang disebutkan secara singkat di atas, portal sangat berguna untuk merender konten yang perlu keluar dari wadah overflow: hidden. Tanpa portal, konten akan terpotong.

Bagaimana React Portals Bekerja: Contoh Praktis

Mari kita buat contoh sederhana untuk mengilustrasikan cara kerja React Portals. Kita akan membuat komponen modal dasar yang menggunakan portal untuk merender kontennya langsung di bawah tag body.

Langkah 1: Buat Target Portal

Pertama, kita perlu membuat elemen DOM tempat kita akan merender konten portal kita. Praktik umum adalah membuat elemen div dengan ID tertentu dan menambahkannya ke tag body. Anda dapat melakukan ini di file index.html Anda:

            <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Portal React</title>
</head>
<body>
  <div id="root"></div>
  <div id="modal-root"></div> <-- Target portal kita -->
</body>
</html>

Atau, Anda dapat membuat dan menambahkan elemen secara dinamis dalam aplikasi React Anda, mungkin dalam hook useEffect dari komponen root Anda. Pendekatan ini menawarkan kontrol lebih besar dan memungkinkan Anda menangani situasi di mana elemen target mungkin tidak ada segera saat render awal.

Langkah 2: Buat Komponen Modal

Sekarang, mari buat komponen Modal. Komponen ini akan menerima prop isOpen untuk mengontrol visibilitasnya, dan prop children untuk merender konten modal.

            import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, children, onClose }) => {
  const modalRoot = document.getElementById('modal-root');
  const elRef = useRef(document.createElement('div')); // Gunakan useRef untuk membuat elemen hanya sekali

  useEffect(() => {
    if (isOpen && modalRoot && !elRef.current.parentNode) {
      modalRoot.appendChild(elRef.current);
    }

    return () => {
      if (modalRoot && elRef.current.parentNode) {
        modalRoot.removeChild(elRef.current);
      }
    };
  }, [isOpen, modalRoot]);

  if (!isOpen) {
    return null;
  }

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    elRef.current
  );
};

export default Modal;

Penjelasan:

Kami mengimpor `ReactDOM` yang berisi metode `createPortal`.
Kami mendapatkan referensi ke elemen `modal-root`.
Kami membuat `div` menggunakan `useRef` untuk menampung konten modal dan hanya membuatnya sekali saat komponen pertama kali dirender. Ini mencegah render ulang yang tidak perlu.
Dalam hook `useEffect`, kami memeriksa apakah modal terbuka (`isOpen`) dan apakah `modalRoot` ada. Jika keduanya benar, kami menambahkan `elRef.current` ke `modalRoot`. Ini hanya terjadi sekali.
Fungsi kembali di dalam `useEffect` memastikan bahwa ketika komponen dibongkar (unmount) (atau `isOpen` menjadi salah), kami membersihkan dengan menghapus `elRef.current` dari `modalRoot` jika masih ada. Ini penting untuk mencegah kebocoran memori.
Kami menggunakan `ReactDOM.createPortal` untuk merender konten modal ke dalam elemen `elRef.current` (yang sekarang berada di dalam `modal-root`).
Handler `onClick` pada `modal-overlay` memungkinkan pengguna menutup modal dengan mengklik di luar area konten. `e.stopPropagation()` mencegah klik menutup modal saat mengklik di dalam area konten.

Langkah 3: Menggunakan Komponen Modal

Sekarang, mari gunakan komponen `Modal` di komponen lain untuk menampilkan beberapa konten.

            import React, { useState } from 'react';
import Modal from './Modal';

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => {
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
  };

  return (
    <div>
      <button onClick={openModal}>Buka Modal</button>
      <Modal isOpen={isModalOpen} onClose={closeModal}>
        <h2>Konten Modal</h2>
        <p>Konten ini dirender di dalam portal!</p>
        <button onClick={closeModal}>Tutup Modal</button>
      </Modal>
    </div>
  );
};

export default App;

Dalam contoh ini, komponen `App` mengelola status modal (`isModalOpen`). Ketika pengguna mengklik tombol "Buka Modal", fungsi `openModal` mengatur `isModalOpen` menjadi `true`, yang memicu komponen `Modal` untuk merender kontennya ke elemen `modal-root` menggunakan portal.

Langkah 4: Menambahkan Gaya Dasar (Opsional)

Tambahkan beberapa CSS dasar untuk menata modal. Ini hanyalah contoh minimal, dan Anda dapat menyesuaikan gaya agar sesuai dengan kebutuhan aplikasi Anda.

            /* App.css */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Pastikan berada di atas segalanya */
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

Memahami Kode Secara Rinci

ReactDOM.createPortal(child, container): Ini adalah fungsi inti untuk membuat portal. child adalah elemen React yang ingin Anda render, dan container adalah elemen DOM tempat Anda ingin merendernya.
Perambatan Event (Event Bubbling): Meskipun konten portal dirender di luar hierarki DOM komponen, sistem event React tetap berfungsi sebagaimana mestinya. Event yang berasal dari dalam konten portal akan merambat ke komponen induk. Inilah sebabnya mengapa handler onClick pada modal-overlay di komponen Modal masih dapat memicu fungsi closeModal di komponen App. Kita dapat menggunakan e.stopPropagation() untuk mencegah event klik merambat ke elemen modal-overlay induk, seperti yang ditunjukkan dalam contoh.
Pertimbangan Aksesibilitas: Saat menggunakan portal, penting untuk mempertimbangkan aksesibilitas. Pastikan konten portal dapat diakses oleh pengguna dengan disabilitas. Ini termasuk mengelola fokus, menyediakan atribut ARIA yang sesuai, dan memastikan konten dapat dinavigasi dengan keyboard. Untuk modal, Anda ingin menjebak fokus di dalam modal saat terbuka dan mengembalikan fokus ke elemen yang memicu modal saat ditutup.

Praktik Terbaik Menggunakan React Portals

Berikut adalah beberapa praktik terbaik yang perlu diingat saat bekerja dengan React Portals:

Buat Target Portal Khusus: Buat elemen DOM tertentu untuk merender konten portal Anda. Ini membantu mengisolasi konten portal dari sisa aplikasi Anda dan memudahkan pengelolaan gaya dan penempatan. Pendekatan umum adalah menambahkan div dengan ID tertentu (misalnya, modal-root) ke tag body.
Bersihkan Setelah Anda Selesai: Ketika komponen yang menggunakan portal dibongkar (unmount), pastikan untuk menghapus konten portal dari DOM. Ini mencegah kebocoran memori dan memastikan DOM tetap bersih. Hook useEffect dengan fungsi pembersihan ideal untuk ini.
Tangani Perambatan Event dengan Hati-hati: Perhatikan bagaimana event merambat dari konten portal ke komponen induk. Gunakan e.stopPropagation() jika perlu untuk mencegah efek samping yang tidak diinginkan.
Pertimbangkan Aksesibilitas: Perhatikan aksesibilitas saat menggunakan portal. Pastikan konten portal dapat diakses oleh pengguna dengan disabilitas dengan mengelola fokus, menyediakan atribut ARIA yang sesuai, dan memastikan navigabilitas keyboard. Pustaka seperti react-focus-lock dapat membantu dalam mengelola fokus di dalam portal.
Gunakan Modul CSS atau Styled Components: Untuk menghindari konflik CSS, pertimbangkan untuk menggunakan Modul CSS atau Styled Components untuk mengelompokkan gaya Anda ke komponen tertentu. Ini membantu mencegah gaya merembes ke konten portal.

Kasus Penggunaan Tingkat Lanjut untuk React Portals

Meskipun modal dan tooltip adalah kasus penggunaan paling umum untuk React Portals, mereka juga dapat digunakan dalam skenario lain:

Tooltip: Seperti modal, tooltip sering kali perlu muncul di atas konten lain dan menghindari masalah pemotongan (clipping). Portals adalah solusi alami untuk merender tooltip.
Menu Konteks: Ketika pengguna mengklik kanan pada suatu elemen, Anda mungkin ingin menampilkan menu konteks. Portals dapat digunakan untuk merender menu konteks langsung di bawah tag body, memastikan bahwa menu tersebut selalu terlihat dan tidak terpotong oleh elemen induk.
Notifikasi: Banner notifikasi atau pop-up dapat dirender menggunakan portal untuk memastikan mereka muncul di atas konten aplikasi.
Merender Konten dalam IFrames: Portals dapat digunakan untuk merender komponen React di dalam IFrames. Ini bisa berguna untuk meng-sandbox-kan konten atau berintegrasi dengan aplikasi pihak ketiga.
Penyesuaian Tata Letak Dinamis: Dalam beberapa kasus, Anda mungkin perlu menyesuaikan tata letak aplikasi Anda secara dinamis berdasarkan ruang layar yang tersedia. Portals dapat digunakan untuk merender konten ke bagian DOM yang berbeda tergantung pada ukuran layar atau orientasi. Misalnya, pada perangkat seluler, Anda mungkin merender menu navigasi sebagai bottom sheet menggunakan portal.

Alternatif untuk React Portals

Meskipun React Portals adalah alat yang ampuh, ada pendekatan alternatif yang dapat Anda gunakan dalam situasi tertentu:

z-index CSS dan Pemosisian Absolut: Anda dapat menggunakan z-index CSS dan pemosisian absolut untuk memposisikan elemen di atas konten lain. Namun, pendekatan ini bisa sulit dikelola dalam aplikasi yang kompleks, terutama ketika berurusan dengan elemen bersarang dan beberapa konteks penumpukan. Ini juga rentan terhadap konflik CSS.
Menggunakan Higher-Order Component (HOC): Anda dapat membuat HOC yang membungkus komponen dan merendernya di tingkat teratas DOM. Namun, pendekatan ini dapat menyebabkan prop drilling dan membuat pohon komponen menjadi lebih kompleks. Ini juga tidak menyelesaikan masalah perambatan event yang diatasi oleh portal.
Pustaka Manajemen Status Global (misalnya, Redux, Zustand): Anda dapat menggunakan pustaka manajemen status global untuk mengelola visibilitas dan konten modal serta tooltip. Meskipun pendekatan ini bisa efektif, ini juga bisa berlebihan untuk kasus penggunaan sederhana. Ini juga mengharuskan Anda untuk mengelola manipulasi DOM secara manual.

Dalam kebanyakan kasus, React Portals adalah solusi yang paling elegan dan efisien untuk merender konten di luar pohon komponen. Mereka menyediakan cara yang bersih dan dapat diprediksi untuk mengelola DOM dan menghindari jebakan dari pendekatan lain.

Pertimbangan Internasionalisasi (i18n)

Saat membangun aplikasi untuk audiens global, sangat penting untuk mempertimbangkan internasionalisasi (i18n) dan lokalisasi (l10n). Saat menggunakan React Portals, Anda perlu memastikan bahwa konten portal Anda diterjemahkan dan diformat dengan benar untuk lokal yang berbeda.

Gunakan Pustaka i18n: Gunakan pustaka i18n khusus seperti react-i18next atau formatjs untuk mengelola terjemahan Anda. Pustaka ini menyediakan alat untuk memuat terjemahan, memformat tanggal, angka, dan mata uang, serta menangani pluralisasi.
Terjemahkan Konten Portal: Pastikan untuk menerjemahkan semua teks di dalam konten portal Anda. Gunakan fungsi terjemahan pustaka i18n untuk mengambil terjemahan yang sesuai untuk lokal saat ini.
Tangani Tata Letak Kanan-ke-Kiri (RTL): Jika aplikasi Anda mendukung bahasa RTL seperti Arab atau Ibrani, Anda perlu memastikan bahwa konten portal Anda ditata dengan benar untuk arah baca RTL. Anda dapat menggunakan properti CSS direction untuk mengubah arah tata letak.
Pertimbangkan Perbedaan Budaya: Perhatikan perbedaan budaya saat merancang konten portal Anda. Misalnya, warna, ikon, dan simbol dapat memiliki arti yang berbeda di berbagai budaya. Pastikan untuk mengadaptasi desain Anda agar sesuai untuk audiens target.

Kesalahan Umum yang Harus Dihindari

Lupa Membersihkan: Gagal menghapus wadah portal saat komponen dibongkar menyebabkan kebocoran memori dan potensi polusi DOM. Selalu gunakan fungsi pembersihan di useEffect untuk menangani pembongkaran.
Menangani Perambatan Event Secara Salah: Tidak memahami bagaimana event merambat dari portal dapat menyebabkan perilaku yang tidak terduga. Gunakan e.stopPropagation() dengan hati-hati dan hanya jika diperlukan.
Mengabaikan Aksesibilitas: Aksesibilitas sangat penting. Mengabaikan manajemen fokus, atribut ARIA, dan navigabilitas keyboard membuat aplikasi Anda tidak dapat digunakan oleh banyak pengguna.
Terlalu Sering Menggunakan Portal: Portal adalah alat yang ampuh, tetapi tidak semua situasi membutuhkannya. Terlalu sering menggunakannya dapat menambah kompleksitas yang tidak perlu pada aplikasi Anda. Gunakan hanya jika diperlukan, seperti saat berurusan dengan masalah z-index, konflik CSS, atau masalah overflow.
Tidak Menangani Pembaruan Dinamis: Jika konten portal Anda perlu diperbarui secara sering, pastikan Anda memperbarui konten portal secara efisien. Hindari render ulang yang tidak perlu dengan menggunakan useMemo dan useCallback secara tepat.

Kesimpulan

React Portals adalah alat yang berharga untuk merender konten di luar pohon komponen standar. Mereka menyediakan cara yang bersih dan efisien untuk memecahkan masalah UI umum yang berkaitan dengan gaya, manajemen z-index, dan aksesibilitas. Dengan memahami cara kerja portal dan mengikuti praktik terbaik, Anda dapat membuat aplikasi React yang lebih kuat dan mudah dipelihara. Baik Anda membuat modal, tooltip, menu konteks, atau komponen overlay lainnya, React Portals dapat membantu Anda mencapai pengalaman pengguna yang lebih baik dan basis kode yang lebih terorganisir.