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

Короткий ответ

React Portal - это механизм для рендеринга дочерних элементов в DOM-узел, находящийся вне иерархии родительского компонента. Основная особенность - сохранение контекста React (пропсы, события, context API) при физическом размещении в другом месте DOM. Используется для модальных окон, тултипов, дропдаунов, чтобы избежать проблем с z-index, overflow: hidden и clip-path.

Подробное объяснение

Порталы решают фундаментальную проблему CSS: дочерний элемент ограничен родительским контейнером по z-index, overflow и трансформациям. Например, модальное окно внутри компонента с overflow: hidden будет обрезано. Portal позволяет отрендерить его в document.body или другом контейнере, сохранив при этом реактивность и контекст.

Ключевые особенности:

• Сохранение event bubbling: события от портала всплывают по React-дереву, а не по DOM-дереву. Это значит, что обработчик клика на родителе сработает, даже если DOM-узел портала находится в другом месте.
• Context API работает: портал не разрывает цепочку провайдеров - дочерние компоненты получают контекст от родителя.
• Управление фокусом и a11y: порталы упрощают реализацию focus trapping для модалок и корректной работы скринридеров.

Без порталов разработчики прибегали к хакам: абсолютное позиционирование с высоким z-index, перенос модалки в корневой компонент через props. Portal даёт чистое решение.

На практике

Порталы незаменимы в трёх сценариях:

1. Модальные окна и диалоги - чтобы не зависеть от overflow и z-index родительских контейнеров.
2. Тултипы и попаверы - для корректного позиционирования относительно триггера без обрезания границами родителя.
3. Глобальные уведомления (toast/notification) - рендерятся в фиксированном контейнере в конце body.

Важно: портал не решает проблему позиционирования - за это отвечает CSS (absolute/fixed). Portal лишь даёт свободу размещения в DOM.

Пример кода

JSX
import { createPortal } from 'react-dom';

function Modal({ children, isOpen }) {
  if (!isOpen) return null;

  return createPortal(
    <div className="modal-overlay">
      <div className="modal-content" role="dialog" aria-modal="true">
        {children}
      </div>
    </div>,
    document.body
  );
}

// Использование - контекст сохраняется
function App() {
  const [open, setOpen] = useState(false);
  return (
    <ThemeProvider value="dark">
      <button onClick={() => setOpen(true)}>Open</button>
      <Modal isOpen={open} onClose={() => setOpen(false)}>
        <p>Контент в портале</p>
      </Modal>
    </ThemeProvider>
  );
}

Как отвечать на собеседовании

Начни с краткого определения портала. Затем объясни проблему, которую он решает (CSS-ограничения). Подчеркни, что портал не разрывает React-дерево - это частая ошибка. Приведи конкретные use cases: модалки, тултипы, тосты. Упомяни, что для a11y нужно добавлять role и управлять фокусом. Если спросят про альтернативы - скажи про ReactDOM.render вручную (устаревший подход) и про библиотеки типа react-modal. Избегай излишней теории - интервьюер ждёт практического понимания.

Что проверяет интервьюер

• Понимание разницы между DOM-деревом и React-деревом.
• Знание CSS-проблем (z-index, overflow, stacking context).
• Умение объяснить, почему портал не ломает контекст и события.
• Практический опыт: когда портал нужен, а когда - избыточен.
• Awareness про accessibility (aria-modal, focus trapping).

Типичные ошибки

• Путают портал с телепортацией данных: портал меняет только DOM-узел, не поток пропсов.
• Думают, что портал решает проблемы позиционирования: он лишь даёт свободу выбора контейнера, позиционирование - CSS.
• Забывают про очистку: при анмаунте портал автоматически удаляется, но если контейнер создан динамически - нужно управлять вручную.
• Игнорируют a11y: модалка в портале без role="dialog" и управления фокусом - плохая практика.
• Используют портал для всего подряд: для простых тултипов без overflow-проблем портал избыточен.