Waarvoor dienen portalen in React?

Portals in React stellen je in staat om kindcomponenten te renderen in een DOM-knooppunt dat zich buiten de hiërarchie van de oudercomponent bevindt. Dit is handig wanneer je een element boven andere wilt weergeven, zoals modale vensters, tooltips of dropdown-menu's, om problemen met CSS-stijlen, z-index of positionering te voorkomen.

Voorbeeld van het gebruik van een portal:

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

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

Hier wordt de inhoud van het modale venster gerenderd in het element met id "modal-root", dat zich buiten de hoofdroot van de applicatie kan bevinden.