Penangkapan Event React Portal: Intersepsi Event Lintas Portal

React Portal menawarkan mekanisme yang kuat untuk me-render children ke dalam node DOM yang ada di luar hierarki DOM dari komponen induk. Ini sangat berguna untuk modal, tooltip, dan elemen UI lainnya yang perlu keluar dari batasan container induknya. Namun, ini juga menimbulkan kerumitan saat berhadapan dengan event, terutama ketika Anda perlu mengintersepsi atau menangkap event yang berasal dari dalam portal tetapi ditujukan untuk elemen di luarnya. Artikel ini mengeksplorasi kerumitan tersebut dan memberikan solusi praktis untuk mencapai intersepsi event lintas portal.

Memahami React Portal

Sebelum mendalami penangkapan event, mari kita bangun pemahaman yang kuat tentang React Portal. Sebuah portal memungkinkan Anda untuk me-render komponen anak ke bagian lain dari DOM. Bayangkan Anda memiliki komponen yang bersarang sangat dalam dan ingin me-render modal langsung di bawah elemen `body`. Tanpa portal, modal akan tunduk pada styling dan positioning dari leluhurnya, yang berpotensi menyebabkan masalah layout. Sebuah portal mengatasi ini dengan menempatkan modal langsung di tempat yang Anda inginkan.

Sintaks dasar untuk membuat portal adalah:

            ReactDOM.createPortal(child, domNode);
            

              
                Copy
              
            
          

Di sini, `child` adalah elemen React (atau komponen) yang ingin Anda render, dan `domNode` adalah node DOM tempat Anda ingin me-rendernya.

Contoh:

            import React from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ children, isOpen, onClose }) => {
  if (!isOpen) return null;

  const modalRoot = document.getElementById('modal-root');
  if (!modalRoot) return null; // Tangani kasus jika modal-root tidak ada

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

export default Modal;
            

              
                Copy
              
            
          

Dalam contoh ini, komponen `Modal` me-render children-nya ke dalam node DOM dengan ID `modal-root`. Handler `onClick` pada `.modal-overlay` memungkinkan penutupan modal saat mengklik di luar konten, sementara `e.stopPropagation()` mencegah klik overlay menutup modal saat konten diklik.

Tantangan Penanganan Event Lintas Portal

Meskipun portal menyelesaikan masalah layout, mereka memperkenalkan tantangan saat menangani event. Secara khusus, mekanisme event bubbling standar di DOM dapat berperilaku tidak terduga ketika event berasal dari dalam portal.

Skenario: Pertimbangkan skenario di mana Anda memiliki tombol di dalam portal, dan Anda ingin melacak klik pada tombol itu dari komponen yang lebih tinggi di pohon React (tetapi *di luar* lokasi render portal). Karena portal memutus hierarki DOM, event mungkin tidak akan naik (bubble up) ke komponen induk yang diharapkan di pohon React.

Isu Utama:

• Event Bubbling: Event merambat ke atas pohon DOM, tetapi portal menciptakan diskontinuitas dalam pohon itu. Event akan naik melalui hierarki DOM *di dalam* node tujuan portal, tetapi tidak selalu kembali ke komponen React yang membuat portal.
• `stopPropagation()`: Meskipun berguna dalam banyak kasus, penggunaan `stopPropagation()` secara sembarangan dapat mencegah event mencapai listener yang diperlukan, termasuk yang berada di luar portal.
• Event Target: Properti `event.target` masih menunjuk ke elemen DOM tempat event berasal, bahkan jika elemen itu berada di dalam portal.

Strategi untuk Intersepsi Event Lintas Portal

Beberapa strategi dapat digunakan untuk menangani event yang berasal dari dalam portal dan mencapai komponen di luarnya:

1. Delegasi Event

Delegasi event melibatkan pemasangan satu event listener ke elemen induk (seringkali dokumen atau leluhur bersama) dan kemudian menentukan target sebenarnya dari event tersebut. Pendekatan ini menghindari pemasangan banyak event listener ke elemen individual, meningkatkan kinerja dan menyederhanakan manajemen event.

Cara kerjanya:

1. Pasang event listener ke leluhur bersama (misalnya, `document.body`).
2. Dalam event listener, periksa properti `event.target` untuk mengidentifikasi elemen yang memicu event.
3. Lakukan tindakan yang diinginkan berdasarkan target event.

Contoh:

            import React, { useEffect } from 'react';

const PortalAwareComponent = () => {
  useEffect(() => {
    const handleClick = (event) => {
      if (event.target.classList.contains('portal-button')) {
        console.log('Tombol di dalam portal diklik!', event.target);
        // Lakukan tindakan berdasarkan tombol yang diklik
      }
    };

    document.body.addEventListener('click', handleClick);

    return () => {
      document.body.removeEventListener('click', handleClick);
    };
  }, []);

  return (
    <div>
      <p>Ini adalah komponen di luar portal.</p>
    </div>
  );
};

export default PortalAwareComponent;
            

              
                Copy
              
            
          

Dalam contoh ini, `PortalAwareComponent` memasang click listener ke `document.body`. Listener memeriksa apakah elemen yang diklik memiliki kelas `portal-button`. Jika ya, ia mencatat pesan ke konsol dan melakukan tindakan lain yang diperlukan. Pendekatan ini berfungsi terlepas dari apakah tombol berada di dalam atau di luar portal.

Keuntungan:

• Kinerja: Mengurangi jumlah event listener.
• Kesederhanaan: Memusatkan logika penanganan event.
• Fleksibilitas: Mudah menangani event dari elemen yang ditambahkan secara dinamis.

Pertimbangan:

• Spesifisitas: Memerlukan penargetan asal event yang cermat menggunakan `event.target` dan berpotensi melintasi pohon DOM ke atas menggunakan `event.target.closest()`.
• Jenis Event: Paling cocok untuk event yang melakukan bubbling.

2. Mengirim Event Kustom (Custom Event)

Event kustom memungkinkan Anda membuat dan mengirim event secara terprogram. Ini berguna ketika Anda perlu berkomunikasi antara komponen yang tidak terhubung secara langsung di pohon React, atau ketika Anda perlu memicu event berdasarkan logika kustom.

Cara kerjanya:

1. Buat objek `Event` baru menggunakan konstruktor `Event`.
2. Kirim event menggunakan metode `dispatchEvent` pada elemen DOM.
3. Dengarkan event kustom menggunakan `addEventListener`.

Contoh:

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

const PortalContent = () => {
  const handleClick = () => {
    const customEvent = new CustomEvent('portalButtonClick', {
      detail: { message: 'Tombol diklik di dalam portal!' },
    });
    document.dispatchEvent(customEvent);
  };

  return (
    <button className="portal-button" onClick={handleClick}>
      Klik saya (di dalam portal)
    </button>
  );
};

const PortalAwareComponent = () => {
  useEffect(() => {
    const handlePortalButtonClick = (event) => {
      console.log(event.detail.message);
    };

    document.addEventListener('portalButtonClick', handlePortalButtonClick);

    return () => {
      document.removeEventListener('portalButtonClick', handlePortalButtonClick);
    };
  }, []);

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

    return (
    <>
      <div>
        <p>Ini adalah komponen di luar portal.</p>
      </div>
        {modalRoot && ReactDOM.createPortal(<PortalContent/>, modalRoot)}
    </
    >

  );
};

export default PortalAwareComponent;
            

              
                Copy
              
            
          

Dalam contoh ini, ketika tombol di dalam portal diklik, event kustom bernama `portalButtonClick` dikirim pada `document`. `PortalAwareComponent` mendengarkan event ini dan mencatat pesan ke konsol.

Keuntungan:

• Fleksibilitas: Memungkinkan komunikasi antar komponen terlepas dari posisi mereka di pohon React.
• Kustomisasi: Anda dapat menyertakan data kustom dalam properti `detail` event.
• Dekopling: Mengurangi ketergantungan antar komponen.

Pertimbangan:

• Penamaan Event: Pilih nama event yang unik dan deskriptif untuk menghindari konflik.
• Serialisasi Data: Pastikan data apa pun yang disertakan dalam properti `detail` dapat diserialisasi.
• Cakupan Global: Event yang dikirim pada `document` dapat diakses secara global, yang bisa menjadi keuntungan sekaligus potensi kerugian.

3. Menggunakan Ref dan Manipulasi DOM Langsung (Gunakan dengan Hati-hati)

Meskipun umumnya tidak dianjurkan dalam pengembangan React, mengakses dan memanipulasi DOM secara langsung menggunakan ref terkadang diperlukan untuk skenario penanganan event yang kompleks. Namun, sangat penting untuk meminimalkan manipulasi DOM langsung dan lebih memilih pendekatan deklaratif React sebisa mungkin.

Cara kerjanya:

1. Buat ref menggunakan `React.createRef()` atau `useRef()`.
2. Lampirkan ref ke elemen DOM di dalam portal.
3. Akses elemen DOM menggunakan `ref.current`.
4. Pasang event listener langsung ke elemen DOM.

Contoh:

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

const PortalContent = () => {
  const buttonRef = useRef(null);

  useEffect(() => {
    const handleClick = () => {
      console.log('Tombol diklik (manipulasi DOM langsung)');
    };

    if (buttonRef.current) {
      buttonRef.current.addEventListener('click', handleClick);
    }

    return () => {
      if (buttonRef.current) {
        buttonRef.current.removeEventListener('click', handleClick);
      }
    };
  }, []);

  return (
    <button className="portal-button" ref={buttonRef}>
      Klik saya (di dalam portal)
    </button>
  );
};

const PortalAwareComponent = () => {
  const modalRoot = document.getElementById('modal-root');
  return (
    <>
      <div>
        <p>Ini adalah komponen di luar portal.</p>
      </div>
      {modalRoot && ReactDOM.createPortal(<PortalContent/>, modalRoot)}
    </
    >
  );
};

export default PortalAwareComponent;

            

              
                Copy
              
            
          

Dalam contoh ini, sebuah ref dilampirkan ke tombol di dalam portal. Sebuah event listener kemudian dipasang langsung ke elemen DOM tombol menggunakan `buttonRef.current.addEventListener()`. Pendekatan ini melewati sistem event React dan memberikan kontrol langsung atas penanganan event.

Keuntungan:

• Kontrol Langsung: Memberikan kontrol yang terperinci atas penanganan event.
• Melewati Sistem Event React: Dapat berguna dalam kasus-kasus spesifik di mana sistem event React tidak mencukupi.

Pertimbangan:

• Potensi Konflik: Dapat menyebabkan konflik dengan sistem event React jika tidak digunakan dengan hati-hati.
• Kompleksitas Pemeliharaan: Membuat kode lebih sulit untuk dipelihara dan dipahami.
• Anti-Pattern: Sering dianggap sebagai anti-pattern dalam pengembangan React. Gunakan seperlunya dan hanya jika dibutuhkan.

4. Menggunakan Solusi Manajemen State Bersama (cth., Redux, Zustand, Context API)

Jika komponen di dalam dan di luar portal perlu berbagi state dan bereaksi terhadap event yang sama, solusi manajemen state bersama bisa menjadi pendekatan yang bersih dan efektif.

Cara kerjanya:

1. Buat state bersama menggunakan Redux, Zustand, atau Context API React.
2. Komponen di dalam portal dapat mengirimkan action atau memperbarui state bersama.
3. Komponen di luar portal dapat berlangganan ke state bersama dan bereaksi terhadap perubahan.

Contoh (menggunakan React Context API):

            import React, { createContext, useContext, useState } from 'react';
import ReactDOM from 'react-dom';

const EventContext = createContext(null);

const EventProvider = ({ children }) => {
  const [buttonClicked, setButtonClicked] = useState(false);

  const handleButtonClick = () => {
    setButtonClicked(true);
  };

  return (
    <EventContext.Provider value={{ buttonClicked, handleButtonClick }}>
      {children}
    </EventContext.Provider>
  );
};

const useEventContext = () => {
  const context = useContext(EventContext);
  if (!context) {
    throw new Error('useEventContext harus digunakan di dalam EventProvider');
  }
  return context;
};

const PortalContent = () => {
  const { handleButtonClick } = useEventContext();

  return (
    <button className="portal-button" onClick={handleButtonClick}>
      Klik saya (di dalam portal)
    </button>
  );
};

const PortalAwareComponent = () => {
  const { buttonClicked } = useEventContext();
  const modalRoot = document.getElementById('modal-root');

  return (
    <>
      <div>
        <p>Ini adalah komponen di luar portal. Tombol diklik: {buttonClicked ? 'Ya' : 'Tidak'}</p>
      </div>
      {modalRoot && ReactDOM.createPortal(<PortalContent/>, modalRoot)}
    </
    >
  );
};

const App = () => (
  <EventProvider>
    <PortalAwareComponent />
  </EventProvider>
);

export default App;
            

              
                Copy
              
            
          

Dalam contoh ini, `EventContext` menyediakan state bersama (`buttonClicked`) dan sebuah handler (`handleButtonClick`). Komponen `PortalContent` memanggil `handleButtonClick` ketika tombol diklik, dan komponen `PortalAwareComponent` berlangganan ke state `buttonClicked` dan me-render ulang ketika state tersebut berubah.

Keuntungan:

• Manajemen State Terpusat: Menyederhanakan manajemen state dan komunikasi antar komponen.
• Aliran Data yang Dapat Diprediksi: Menyediakan aliran data yang jelas dan dapat diprediksi.
• Testabilitas: Membuat kode lebih mudah untuk diuji.

Pertimbangan:

• Overhead: Menambahkan solusi manajemen state dapat menimbulkan overhead, terutama untuk aplikasi sederhana.
• Kurva Belajar: Memerlukan pembelajaran dan pemahaman library atau API manajemen state yang dipilih.

Praktik Terbaik untuk Penanganan Event Lintas Portal

Saat berhadapan dengan penanganan event lintas portal, pertimbangkan praktik terbaik berikut:

• Minimalkan Manipulasi DOM Langsung: Utamakan pendekatan deklaratif React sebisa mungkin. Hindari memanipulasi DOM secara langsung kecuali benar-benar diperlukan.
• Gunakan Delegasi Event dengan Bijak: Delegasi event bisa menjadi alat yang ampuh, tetapi pastikan untuk menargetkan asal event dengan hati-hati.
• Pertimbangkan Event Kustom: Event kustom dapat menyediakan cara yang fleksibel dan terdekopel untuk berkomunikasi antar komponen.
• Pilih Solusi Manajemen State yang Tepat: Jika komponen perlu berbagi state, pilih solusi manajemen state yang sesuai dengan kompleksitas aplikasi Anda.
• Pengujian Menyeluruh: Uji logika penanganan event Anda secara menyeluruh untuk memastikan berfungsi seperti yang diharapkan di semua skenario. Berikan perhatian khusus pada kasus-kasus tepi dan potensi konflik dengan event listener lain.
• Dokumentasikan Kode Anda: Dokumentasikan logika penanganan event Anda dengan jelas, terutama saat menggunakan teknik yang kompleks atau manipulasi DOM langsung.

Kesimpulan

React Portal menawarkan cara yang ampuh untuk mengelola elemen UI yang perlu keluar dari batasan komponen induknya. Namun, menangani event lintas portal memerlukan pertimbangan yang cermat dan penerapan teknik yang sesuai. Dengan memahami tantangan dan menggunakan strategi seperti delegasi event, event kustom, dan manajemen state bersama, Anda dapat secara efektif mengintersepsi dan menangkap event yang berasal dari dalam portal dan memastikan aplikasi Anda berperilaku seperti yang diharapkan. Ingatlah untuk memprioritaskan pendekatan deklaratif React dan meminimalkan manipulasi DOM langsung untuk menjaga basis kode yang bersih, dapat dipelihara, dan dapat diuji.