Что такое порталы?

Порталы (Portals) в React — это способ отрендерить дочерние элементы в DOM-узел, находящийся вне родительского компонента, сохраняя при этом React-иерархию (контекст, события).

Проблема

Модалки, тултипы, дропдауны должны визуально «выходить» за пределы родителя (например, из-под overflow: hidden или контекста наложения). Обычный рендер вкладывает их в DOM родителя, что мешает позиционированию.

Решение

Портал рендерит контент в другой DOM-узел (обычно в конец <body>):

import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    <div className="modal">{children}</div>,
    document.getElementById('modal-root'), // вне дерева компонента
  );
}

Особенность

Хотя DOM-узел вне родителя, в React-дереве портал остаётся ребёнком компонента:

• События всплывают по React-иерархии (а не по DOM) — обработчик на родителе поймает клик из портала.
• Доступны контекст и props родителя.

Применение

Модальные окна, тултипы, всплывающие меню, тосты, оверлеи — всё, что должно рендериться поверх и вне ограничивающих контейнеров.

Коротко для собеседования

Портал (createPortal) рендерит контент в DOM-узел вне родителя (обычно в body), сохраняя React-иерархию: события всплывают по дереву React, контекст доступен. Нужен для модалок, тултипов, дропдаунов, чтобы обойти overflow и z-index родителя.