Menguasai Overlay UI: Tinjauan Mendalam Fungsi `createPortal` React

Dalam pengembangan web modern, menciptakan antarmuka pengguna yang mulus dan intuitif adalah hal yang terpenting. Seringkali, ini melibatkan penampilan elemen yang perlu keluar dari hierarki DOM komponen induknya. Bayangkan dialog modal, spanduk notifikasi, tooltip, atau bahkan menu konteks yang kompleks. Elemen-elemen UI ini sering memerlukan penanganan khusus untuk memastikan mereka dirender dengan benar, melapisi konten lain tanpa gangguan dari konteks tumpukan z-index CSS.

React, dalam evolusinya yang berkelanjutan, menyediakan solusi ampuh untuk tantangan ini: fungsi createPortal. Fitur ini, tersedia melalui react-dom, memungkinkan Anda untuk merender komponen anak ke dalam node DOM yang ada di luar hierarki komponen React normal. Artikel blog ini akan berfungsi sebagai panduan komprehensif untuk memahami dan memanfaatkan createPortal secara efektif, menjelajahi konsep intinya, aplikasi praktis, dan praktik terbaik untuk audiens pengembang global.

Apa itu `createPortal` dan Mengapa Menggunakannya?

Pada intinya, React.createPortal(child, container) adalah fungsi yang merender komponen React (child) ke dalam node DOM yang berbeda (container) dari yang merupakan induk dari komponen React di dalam pohon React.

Mari kita uraikan parameternya:

• child: Ini adalah elemen, string, atau fragmen React yang ingin Anda render. Pada dasarnya, ini adalah apa yang biasanya Anda kembalikan dari metode render sebuah komponen.
• container: Ini adalah elemen DOM yang ada di dokumen Anda. Ini adalah target di mana child akan ditambahkan.

Masalahnya: Hierarki DOM dan Konteks Tumpukan CSS

Pertimbangkan skenario umum: dialog modal. Modal biasanya dimaksudkan untuk ditampilkan di atas semua konten lain di halaman. Jika Anda merender komponen modal langsung di dalam komponen lain yang memiliki gaya overflow: hidden yang membatasi atau nilai z-index tertentu, modal mungkin terpotong atau tertumpuk secara tidak benar. Ini disebabkan oleh sifat hierarkis DOM dan aturan konteks tumpukan z-index CSS.

Nilai z-index pada sebuah elemen hanya memengaruhi urutan tumpukannya relatif terhadap elemen saudaranya dalam konteks tumpukan yang sama. Jika elemen leluhur membentuk konteks tumpukan baru (misalnya, dengan memiliki position selain static dan z-index), anak-anak yang dirender di dalam leluhur tersebut akan terbatas pada konteks itu. Hal ini dapat menyebabkan masalah tata letak yang membuat frustrasi di mana overlay yang Anda maksudkan terkubur di bawah elemen lain.

Solusinya: `createPortal` Datang Menyelamatkan

createPortal dengan elegan menyelesaikan masalah ini dengan memutuskan hubungan visual antara posisi komponen di pohon React dan posisinya di pohon DOM. Anda dapat merender komponen di dalam portal, dan itu akan ditambahkan langsung ke node DOM yang merupakan saudara atau anak dari body, secara efektif melewati konteks tumpukan leluhur yang bermasalah.

Meskipun portal merender anaknya ke dalam node DOM yang berbeda, ia tetap berperilaku seperti komponen React normal di dalam pohon React Anda. Ini berarti propagasi event berfungsi seperti yang diharapkan: jika sebuah event handler dilampirkan ke komponen yang dirender oleh portal, event tersebut akan tetap menggelembung (bubble up) melalui hierarki komponen React, bukan hanya hierarki DOM.

Kasus Penggunaan Utama untuk `createPortal`

Fleksibilitas createPortal menjadikannya alat yang sangat diperlukan untuk berbagai pola UI:

1. Jendela Modal dan Dialog

Ini mungkin adalah kasus penggunaan yang paling umum dan meyakinkan. Modal dirancang untuk menginterupsi alur kerja pengguna dan menuntut perhatian. Merendernya langsung di dalam komponen dapat menyebabkan masalah konteks tumpukan.

Skenario Contoh: Bayangkan sebuah aplikasi e-commerce di mana pengguna perlu mengonfirmasi pesanan. Modal konfirmasi harus muncul di atas segalanya di halaman.

Ide Implementasi:

1. Buat elemen DOM khusus di file public/index.html Anda (atau buat secara dinamis). Praktik umum adalah memiliki <div id="modal-root"></div>, sering ditempatkan di akhir tag <body>.
2. Di aplikasi React Anda, dapatkan referensi ke node DOM ini.
3. Saat komponen modal Anda dipicu, gunakan ReactDOM.createPortal untuk merender konten modal ke dalam node DOM modal-root.

Cuplikan Kode (Konseptual):

            // App.js
import React from 'react';
import Modal from './Modal';

function App() {
  const [isModalOpen, setIsModalOpen] = React.useState(false);

  return (
    

      
Selamat Datang di Toko Global Kami!
       setIsModalOpen(true)}>Tampilkan Konfirmasi
      {isModalOpen && (
         setIsModalOpen(false)}>
          
Konfirmasi Pembelian Anda
          
Apakah Anda yakin ingin melanjutkan?
        
      )}
    
  );
}

export default App;

// Modal.js
import React from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root');

function Modal({ children, onClose }) {
  // Buat elemen DOM untuk tempat konten modal
  const element = document.createElement('div');

  React.useEffect(() => {
    // Tambahkan elemen ke modal root saat komponen dipasang
    modalRoot.appendChild(element);
    // Bersihkan dengan menghapus elemen saat komponen dilepas
    return () => {
      modalRoot.removeChild(element);
    };
  }, [element]);

  return ReactDOM.createPortal(
    

      

        {children}
        Tutup
      
    
,
    element // Render ke dalam elemen yang kita buat
  );
}

export default Modal;

            

              
                Copy
              
            
          

Pendekatan ini memastikan modal adalah anak langsung dari modal-root, yang biasanya ditambahkan ke body, sehingga melewati konteks tumpukan yang mengintervensi.

2. Tooltip dan Popover

Tooltip dan popover adalah elemen UI kecil yang muncul saat pengguna berinteraksi dengan elemen lain (misalnya, melayang di atas tombol atau mengklik ikon). Mereka juga perlu muncul di atas konten lain, terutama jika elemen pemicu bersarang jauh di dalam tata letak yang kompleks.

Skenario Contoh: Di platform kolaborasi internasional, seorang pengguna melayang di atas avatar anggota tim untuk melihat detail kontak dan status ketersediaan mereka. Tooltip harus terlihat terlepas dari gaya wadah induk avatar.

Ide Implementasi: Mirip dengan modal, Anda dapat membuat portal untuk merender tooltip. Pola umum adalah melampirkan tooltip ke root portal umum, atau bahkan langsung ke body jika Anda tidak memiliki wadah portal tertentu.

Cuplikan Kode (Konseptual):

            // Tooltip.js
import React from 'react';
import ReactDOM from 'react-dom';

function Tooltip({ children, targetElement }) {
  if (!targetElement) return null;

  // Render konten tooltip langsung ke dalam body
  return ReactDOM.createPortal(
    

      {children}
    
,
    document.body
  );
}

// Komponen Induk yang memicu tooltip
function InfoButton({ info }) {
  const [targetRef, setTargetRef] = React.useState(null);
  const [showTooltip, setShowTooltip] = React.useState(false);

  return (
    
 setShowTooltip(true)}
      onMouseLeave={() => setShowTooltip(false)}
      style={{ position: 'relative', display: 'inline-block' }}
    >
      ? {/* Ikon informasi */}
      {showTooltip && {info}}
    
  );
}

            

              
                Copy
              
            
          

3. Menu Dropdown dan Kotak Pilihan

Menu dropdown kustom dan kotak pilihan juga dapat memanfaatkan portal. Saat dropdown dibuka, seringkali perlu melampaui batas wadah induknya, terutama jika wadah tersebut memiliki properti seperti overflow: hidden.

Skenario Contoh: Dasbor internal perusahaan multinasional memiliki dropdown pilihan kustom untuk memilih proyek dari daftar panjang. Daftar dropdown tidak boleh dibatasi oleh lebar atau tinggi widget dasbor tempat ia berada.

Ide Implementasi: Render opsi dropdown ke dalam portal yang terpasang pada body atau root portal khusus.

4. Sistem Notifikasi

Sistem notifikasi global (pesan toast, peringatan) adalah kandidat lain yang sangat baik untuk createPortal. Pesan-pesan ini biasanya muncul dalam posisi tetap, seringkali di bagian atas atau bawah viewport, terlepas dari posisi gulir saat ini atau tata letak komponen induk.

Skenario Contoh: Situs pemesanan perjalanan menampilkan pesan konfirmasi untuk pemesanan yang berhasil atau pesan kesalahan untuk pembayaran yang gagal. Notifikasi ini harus muncul secara konsisten di layar pengguna.

Ide Implementasi: Wadah notifikasi khusus (misalnya, <div id="notifications-root"></div>) dapat digunakan dengan createPortal.

Cara Mengimplementasikan `createPortal` di React

Mengimplementasikan createPortal melibatkan beberapa langkah kunci:

Langkah 1: Identifikasi atau Buat Node DOM Target

Anda memerlukan elemen DOM di luar root React standar untuk berfungsi sebagai wadah untuk konten portal Anda. Praktik paling umum adalah mendefinisikannya di file HTML utama Anda (misalnya, public/index.html).

            <!-- public/index.html -->
<body>
  <noscript>Anda perlu mengaktifkan JavaScript untuk menjalankan aplikasi ini.</noscript>
  <div id="root"></div>
  <div id="modal-root"></div>      <!-- Untuk modal -->
  <div id="tooltip-root"></div>     <!-- Opsional untuk tooltip -->
</body>

            

              
                Copy
              
            
          

Sebagai alternatif, Anda dapat secara dinamis membuat elemen DOM dalam siklus hidup aplikasi Anda menggunakan JavaScript, seperti yang ditunjukkan pada contoh Modal di atas, dan kemudian menambahkannya ke DOM. Namun, mendefinisikan sebelumnya di HTML umumnya lebih bersih untuk root portal yang persisten.

Langkah 2: Dapatkan Referensi ke Node DOM Target

Di komponen React Anda, Anda perlu mengakses node DOM ini. Anda dapat melakukan ini menggunakan document.getElementById() atau document.querySelector().

            // Di suatu tempat di komponen atau file utilitas Anda
const modalRootElement = document.getElementById('modal-root');
const tooltipRootElement = document.getElementById('tooltip-root');

// Sangat penting untuk memastikan elemen-elemen ini ada sebelum mencoba menggunakannya.
// Anda mungkin ingin menambahkan pemeriksaan atau menangani kasus di mana mereka tidak ditemukan.

            

              
                Copy
              
            
          

Langkah 3: Gunakan `ReactDOM.createPortal`

Impor ReactDOM dan gunakan fungsi createPortal, dengan meneruskan JSX komponen Anda sebagai argumen pertama dan node DOM target sebagai yang kedua.

Contoh: Merender Pesan Sederhana di Portal

            // MessagePortal.js
import React from 'react';
import ReactDOM from 'react-dom';

function MessagePortal({ message }) {
  const portalContainer = document.getElementById('modal-root'); // Asumsikan Anda menggunakan modal-root untuk contoh ini

  if (!portalContainer) {
    console.error('Wadah portal "modal-root" tidak ditemukan!');
    return null;
  }

  return ReactDOM.createPortal(
    <div style={{ position: 'fixed', bottom: '20px', left: '50%', transform: 'translateX(-50%)', backgroundColor: 'rgba(0,0,0,0.7)', color: 'white', padding: '10px', borderRadius: '5px' }}>
      {message}
    </div>,
    portalContainer
  );
}

export default MessagePortal;

// Di komponen lain...
function Dashboard() {
  return (
    <div>
      <h1>Tinjauan Dasbor</h1>
      <MessagePortal message="Data berhasil disinkronkan!" />
    </div>
  );
}

            

              
                Copy
              
            
          

Mengelola State dan Event dengan Portal

Salah satu keuntungan paling signifikan dari createPortal adalah tidak merusak sistem penanganan event React. Event dari elemen yang dirender di dalam portal akan tetap menggelembung (bubble up) melalui pohon komponen React, bukan hanya pohon DOM.

Skenario Contoh: Dialog modal mungkin berisi formulir. Saat pengguna mengklik tombol di dalam modal, event klik harus ditangani oleh event listener di komponen induk yang mengontrol visibilitas modal, bukan terperangkap dalam hierarki DOM dari modal itu sendiri.

Contoh Ilustratif:

            // ModalWithEventHandling.js
import React from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root');

function ModalWithEventHandling({ children, onClose }) {
  const modalContentRef = React.useRef(null);

  // Menggunakan useEffect untuk membuat dan membersihkan elemen DOM
  const [wrapperElement] = React.useState(() => document.createElement('div'));

  React.useEffect(() => {
    modalRoot.appendChild(wrapperElement);
    return () => {
      modalRoot.removeChild(wrapperElement);
    };
  }, [wrapperElement]);

  // Menangani klik di luar konten modal untuk menutupnya
  const handleOutsideClick = (event) => {
    if (modalContentRef.current && !modalContentRef.current.contains(event.target)) {
      onClose();
    }
  };

  return ReactDOM.createPortal(
    

      

        {children}
        Tutup Modal
      
    
,
    wrapperElement
  );
}

// App.js (menggunakan modal)
function App() {
  const [showModal, setShowModal] = React.useState(false);

  return (
    

      
Konten Aplikasi
       setShowModal(true)}>Buka Modal
      {showModal && (
         setShowModal(false)}>
          
Informasi Penting
          
Ini adalah konten di dalam modal.
           alert('Tombol di dalam modal diklik!')}>
            Tombol Aksi
          
        
      )}
    
  );
}

            

              
                Copy
              
            
          

Dalam contoh ini, mengklik tombol Tutup Modal dengan benar memanggil prop onClose yang diteruskan dari komponen induk App. Demikian pula, jika Anda memiliki event listener untuk klik pada modal-backdrop, itu akan dengan benar memicu fungsi handleOutsideClick, meskipun modal dirender ke dalam subtree DOM yang terpisah.

Pola dan Pertimbangan Tingkat Lanjut

Portal Dinamis

Anda dapat membuat dan menghapus wadah portal secara dinamis berdasarkan kebutuhan aplikasi Anda, meskipun mempertahankan root portal yang telah ditentukan dan persisten seringkali lebih sederhana.

Portal dan Server-Side Rendering (SSR)

Saat bekerja dengan server-side rendering (SSR), Anda perlu memperhatikan bagaimana portal berinteraksi dengan HTML awal. Karena portal merender ke dalam node DOM yang mungkin tidak ada di server, Anda sering kali perlu merender konten portal secara kondisional atau memastikan bahwa node DOM target ada dalam output SSR.

Pola umum adalah menggunakan hook seperti useIsomorphicLayoutEffect (atau hook kustom yang memprioritaskan useLayoutEffect di klien dan beralih ke useEffect di server) untuk memastikan manipulasi DOM hanya terjadi di klien.

            // usePortal.js (pola hook utilitas umum)
import React, { useRef, useEffect } from 'react';

function usePortal(id) {
  const modalRootRef = useRef(null);

  useEffect(() => {
    let currentModalRoot = document.getElementById(id);
    if (!currentModalRoot) {
      currentModalRoot = document.createElement('div');
      currentModalRoot.setAttribute('id', id);
      document.body.appendChild(currentModalRoot);
    }
    modalRootRef.current = currentModalRoot;

    // Fungsi pembersihan untuk menghapus elemen yang dibuat jika dibuat oleh hook ini
    return () => {
      // Hati-hati dengan pembersihan; hanya hapus jika benar-benar dibuat di sini
      // Pendekatan yang lebih kuat mungkin melibatkan pelacakan pembuatan elemen.
    };
  }, [id]);

  return modalRootRef.current;
}

export default usePortal;

// Modal.js (menggunakan hook)
import React from 'react';
import ReactDOM from 'react-dom';
import usePortal from './usePortal';

function Modal({ children, onClose }) {
  const portalTarget = usePortal('modal-root'); // Gunakan hook kita

  if (!portalTarget) return null;

  return ReactDOM.createPortal(
    

      
 e.stopPropagation()}> {/* Mencegah penutupan dengan mengklik di dalam */}
        {children}
      
    
,
    portalTarget
  );
}

            

              
                Copy
              
            
          

Untuk SSR, Anda biasanya akan memastikan bahwa div modal-root ada di HTML yang dirender server Anda. Aplikasi React di klien kemudian akan menempel padanya.

Menata Gaya Portal

Menata gaya elemen di dalam portal memerlukan pertimbangan yang cermat. Karena mereka sering berada di luar konteks gaya induk langsung, Anda dapat menerapkan gaya global atau menggunakan CSS modules/styled-components untuk mengelola penampilan konten portal secara efektif.

Untuk overlay seperti modal, Anda sering memerlukan gaya yang:

• Memperbaiki elemen ke viewport (position: fixed).
• Mencakup seluruh viewport (top: 0; left: 0; width: 100%; height: 100%;).
• Menggunakan nilai z-index yang tinggi untuk memastikan ia muncul di atas segalanya.
• Menyertakan latar belakang semi-transparan untuk backdrop.

Aksesibilitas

Saat mengimplementasikan modal atau overlay lainnya, aksesibilitas sangat penting. Pastikan Anda mengelola fokus dengan benar:

• Saat modal terbuka, perangkap fokus di dalam modal. Pengguna tidak boleh dapat melakukan tab di luarnya.
• Saat modal ditutup, kembalikan fokus ke elemen yang memicunya.
• Gunakan atribut ARIA (misalnya, role="dialog", aria-modal="true", aria-labelledby, aria-describedby) untuk memberi tahu teknologi bantu tentang sifat modal.

Pustaka seperti Reach UI atau Material-UI sering menyediakan komponen modal yang dapat diakses yang menangani masalah ini untuk Anda.

Potensi Kesalahan dan Cara Menghindarinya

Melupakan Node DOM Target

Kesalahan paling umum adalah lupa membuat node DOM target di HTML Anda atau tidak mereferensikannya dengan benar di JavaScript Anda. Selalu pastikan wadah portal Anda ada sebelum mencoba merender ke dalamnya.

Event Bubbling vs. DOM Bubbling

Meskipun event React menggelembung dengan benar melalui portal, event DOM asli tidak. Jika Anda melampirkan event listener DOM asli langsung ke elemen di dalam portal, mereka hanya akan menggelembung ke atas pohon DOM, bukan pohon komponen React. Tetap gunakan sistem event sintetis React bila memungkinkan.

Portal yang Tumpang Tindih

Jika Anda memiliki beberapa jenis overlay (modal, tooltip, notifikasi) yang semuanya merender ke body atau root umum, mengelola urutan tumpukannya bisa menjadi kompleks. Menetapkan nilai z-index tertentu atau menggunakan sistem manajemen portal dapat membantu.

Pertimbangan Kinerja

Meskipun createPortal itu sendiri efisien, merender komponen kompleks di dalam portal masih dapat memengaruhi kinerja. Pastikan konten portal Anda dioptimalkan, dan hindari re-render yang tidak perlu.

Alternatif untuk `createPortal`

Meskipun createPortal adalah cara idiomatik React untuk menangani skenario ini, perlu dicatat pendekatan lain yang mungkin Anda temui atau pertimbangkan:

• Manipulasi DOM Langsung: Anda dapat secara manual membuat dan menambahkan elemen DOM menggunakan document.createElement dan appendChild, tetapi ini melewati rendering deklaratif dan manajemen state React, membuatnya kurang dapat dipelihara.
• Higher-Order Components (HOCs) atau Render Props: Pola-pola ini dapat mengabstraksi logika rendering portal, tetapi createPortal itu sendiri adalah mekanisme yang mendasarinya.
• Pustaka Komponen: Banyak pustaka komponen UI (misalnya, Material-UI, Ant Design, Chakra UI) menyediakan komponen modal, tooltip, dan dropdown bawaan yang mengabstraksi penggunaan createPortal, menawarkan pengalaman pengembang yang lebih nyaman. Namun, memahami createPortal sangat penting untuk menyesuaikan komponen-komponen ini atau membangun komponen Anda sendiri.

Kesimpulan

React.createPortal adalah fitur yang kuat dan esensial untuk membangun antarmuka pengguna yang canggih di React. Dengan memungkinkan Anda merender komponen ke dalam node DOM di luar hierarki pohon React mereka, ia secara efektif menyelesaikan masalah umum yang berkaitan dengan z-index CSS, konteks tumpukan, dan elemen overflow.

Baik Anda membangun dialog modal yang kompleks untuk konfirmasi pengguna, tooltip halus untuk informasi kontekstual, atau spanduk notifikasi yang terlihat secara global, createPortal memberikan fleksibilitas dan kontrol yang dibutuhkan. Ingatlah untuk mengelola node DOM portal Anda, menangani event dengan benar, dan memprioritaskan aksesibilitas dan kinerja untuk aplikasi yang benar-benar kuat dan ramah pengguna, cocok untuk audiens global dengan beragam latar belakang dan kebutuhan teknis.

Menguasai createPortal tidak diragukan lagi akan meningkatkan keterampilan pengembangan React Anda, memungkinkan Anda membuat UI yang lebih halus dan profesional yang menonjol dalam lanskap aplikasi web modern yang semakin kompleks.