Do czego służą portale w React?

Portale w React pozwalają na renderowanie komponentów potomnych w węźle DOM, który znajduje się poza hierarchią komponentu rodzica. Jest to przydatne, gdy trzeba wyświetlić element nad innymi, na przykład okna modalne, podpowiedzi lub menu rozwijane, aby uniknąć problemów z stylami CSS, z-index lub pozycjonowaniem.

Przykład użycia portalu:

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

function Modal({ children }) {
  return ReactDOM.createPortal(
    <div className="modal">
      {children}
    </div>,
    document.getElementById('modal-root')
  );
}

Tutaj zawartość okna modalnego będzie renderowana w elemencie o id "modal-root", który może znajdować się poza głównym korzeniem aplikacji.