ReactDOM createPortal — Konsep Keren di React

createPortal dari ReactDOM adalah fitur yang memungkinkan komponen React dirender di luar hierarki DOM utama, tetapi tetap berada dalam tree React yang sama. Artinya, komponen bisa muncul di tempat lain di DOM (misalnya di atau div global) tanpa kehilangan state, context, atau event bubbling dari React. Fitur ini sangat berguna untuk membuat modal, tooltip, dropdown global, notification layer, atau overlay UI yang tidak terikat dengan layout parent. Dengan createPortal, developer bisa menjaga struktur komponen tetap rapi sambil menghindari masalah CSS seperti overflow: hidden, z-index, atau clipping dari container parent. Contoh sederhana: import { createPortal } from 'react-dom'; function Modal({ children }) { const modalRoot = document.getElementById('modal-root'); return createPortal(

{children}

, modalRoot ); } Contoh ini membuat komponen Modal tetap dipanggil dari komponen React biasa, tetapi hasil rendernya dipindahkan ke DOM node #modal-root, sehingga UI overlay bisa tampil di atas seluruh halaman tanpa terpengaruh struktur layout utama.