Что такое Portals в React?

Разберёмся

Portal (createPortal) рендерит детей в DOM-узел вне иерархии родителя, сохраняя React-контекст: Context, принадлежность к дереву компонентов и всплытие событий в модели React. Типичные кейсы — модалки, тултипы, дропдауны, тосты поверх контейнеров с overflow: hidden или сложным z-index.

import { createPortal } from 'react-dom';

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

Важные детали для собеседования

• В DOM узел лежит под #modal-root, но логически компонент остаётся ребёнком родителя в React.
• События в React всплывают по компонентному дереву, а не строго по DOM-родителю портала — частый follow-up.
• Нужен контейнер в HTML или создаваемый в useEffect (с cleanup).
• Accessibility: фокус-трап, Esc, aria-modal, возврат фокуса.

Портал не управляет «открыто/закрыто» — только местом монтирования. Состояние модалки остаётся в React как обычно.

Итог: Portal = «логически внутри компонента, физически — в другом DOM-узле»; идеален для оверлеев и слоёв поверх страницы.

В тестах портал может рендериться вне привычного контейнера — учитывайте это в screen/within. Не забывайте размонтировать и чистить динамически созданный host-узел в cleanup эффекта, чтобы не копить DOM-мусор между переходами.