Почему модальные окна обычно реализуют через порталы?

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

Определение

Portal — это механизм React, который позволяет рендерить компонент в другой DOM-узел, не нарушая иерархию React-компонентов.

Основная проблема без порталов

Если рендерить модалку внутри обычного DOM-дерева:

• она может обрезаться из-за overflow: hidden

• возникают конфликты z-index

• усложняется позиционирование

• страдает доступность (focus, scroll)

Как порталы решают проблему

Портал позволяет:

1. Рендерить модалку, например, в document.body

2. Избежать влияния CSS-ограничений родителя

3. Сохранить контекст, пропсы и state

Пример:

ReactDOM.createPortal(
  <Modal />,
  document.body
);

Важный момент

Хотя DOM-узел другой:

• события всплывают корректно

• Context продолжает работать

• логика приложения не ломается

Вывод

Порталы позволяют корректно реализовывать модальные окна, отделяя визуальное расположение от логической структуры приложения.