Para que servem os portais no React?

Portais no React permitem renderizar componentes filhos em um nó DOM que está fora da hierarquia do componente pai. Isso é útil quando é necessário exibir um elemento sobre outros, como janelas modais, tooltips ou menus suspensos, para evitar problemas com estilos CSS, z-index ou posicionamento.

Exemplo de uso de 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')
  );
}

Aqui, o conteúdo da janela modal será renderizado no elemento com id "modal-root", que pode estar fora da raiz principal da aplicação.