¿Para qué sirven los portales en React?

Los portales en React permiten renderizar componentes hijos en un nodo DOM que se encuentra fuera de la jerarquía del componente padre. Esto es útil cuando se necesita mostrar un elemento sobre otros, como ventanas modales, tooltips o menús desplegables, para evitar problemas con estilos CSS, z-index o posicionamiento.

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

Aquí, el contenido de la ventana modal se renderizará en el elemento con id "modal-root", que puede estar fuera del raíz principal de la aplicación.