React Portal nedir? Ne zaman kullanılır?

Portal, bir bileşenin çocuklarını DOM'da parent'ın dışında başka bir düğüme (genelde document.body) render etmeyi sağlar. React ağacında ise yerinde kalır; yani context, state ve event'ler normal çalışır.

import { createPortal } from "react-dom";

function Modal({ open, onClose, children }) {
  if (!open) return null;
  return createPortal(
    <div className="overlay" onClick={onClose}>
      <div className="modal" role="dialog" aria-modal="true" onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    document.body
  );
}

Neden gerekir?

• Parent'ta overflow: hidden veya transform varsa, içindeki modal/tooltip kırpılır ya da yanlış konumlanır.
• z-index ve stacking context sorunları: parent'ın stacking context'i içinde kalan eleman ne kadar yüksek z-index alsa da başka bir context'in üstüne çıkamaz.
• Kullanım alanları: modal, toast, dropdown menü, tooltip, popover.

Dikkat edilecekler

• Event bubbling React ağacını takip eder: Portal içindeki tıklama DOM'da body'de olsa bile React parent'ındaki onClick'e kabarcıklanır.
• SSR'da document yoktur; portal'ı mount sonrası render edin.
• Erişilebilirlik (focus trap, Escape, focus'u geri verme) portal ile otomatik gelmez. Modern tarayıcılarda native <dialog> + showModal() top layer'ı kullandığı için çoğu zaman portal ihtiyacını da ortadan kaldırır; CSS Popover API (popover attribute) da benzer şekilde top layer kullanır.