Что такое React Portals и зачем они нужны?

Иногда элемент должен отображаться вне родительского контейнера, но логически оставаться внутри компонента.

Определение:
Portal — это способ рендеринга React-элемента в произвольный DOM-узел с помощью ReactDOM.createPortal.

Пример

ReactDOM.createPortal(
  <Modal />,
  document.getElementById("modal-root")
);

Как это работает

1. Компонент остается в дереве React.

2. В DOM он размещается в другом месте.

3. События продолжают работать как обычно.

Когда используется

1. Модальные окна.

2. Тултипы.

3. Контекстные меню.

Почему это важно

Контейнеры могут иметь overflow: hidden или ограничения по позиционированию.

Вывод

Portals позволяют корректно отображать элементы поверх интерфейса, не нарушая архитектуру компонентов.