В чем особенность портала (React Portal) и почему его нужно использовать

Что проверяют

Понимаете ли вы, что портал меняет место в DOM, но не в дереве React, и знаете ли, зачем это нужно.

Как отвечать

Портал рендерит потомков в другой узел DOM, вне родительского:

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

Ключевая особенность: для DOM это другое место, а для React дерево остаётся прежним. Значит контекст доступен как обычно, а события всплывают по дереву React, то есть к логическому родителю, а не к тому узлу, куда портал отрендерился. Это часто удивляет.

Зачем нужен: модальные окна, всплывающие подсказки, выпадающие меню, уведомления. Причина техническая. Родитель может иметь overflow: hidden, из-за которого содержимое обрежется; transform или filter создают новый содержащий блок, и position: fixed начинает отсчитываться от него; z-index внутри контекста наложения не поднимет элемент выше соседей родителя. Портал выносит элемент в конец body, где ничего из этого не мешает.

О чём стоит помнить: доступность порталом не решается автоматически. Модальному окну всё равно нужны фокус-ловушка, возврат фокуса при закрытии, закрытие по Escape и aria-modal. Готовые библиотеки (Radix, antd) делают это за вас.

И про серверный рендер: document там нет, поэтому портал создают после монтирования либо берут компонент, который это учитывает.

Где спотыкаются

Думают, что события не всплывают к родителю.

Решают проблему z-index наращиванием числа вместо разбора контекста наложения.

Забывают про фокус и клавиатуру, из-за чего модальное окно недоступно.

Пытаются создать портал во время серверного рендера и падают на отсутствии document.