À quoi servent les portails en React?

Les portails en React permettent de rendre des composants enfants dans un nœud DOM situé en dehors de la hiérarchie du composant parent. Cela est utile lorsque vous souhaitez afficher un élément au-dessus des autres, comme des fenêtres modales, des infobulles ou des menus déroulants, afin d'éviter des problèmes avec les styles CSS, z-index ou le positionnement.

Exemple d'utilisation d'un portail :

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

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

Ici, le contenu de la fenêtre modale sera rendu dans l'élément avec l'id "modal-root", qui peut se trouver en dehors de la racine principale de l'application.