Portal
Также: React Portal
React Portal — это способ отрендерить дочерний компонент вне иерархии его родителя, при этом сохраняя доступ к контексту и событиям приложения.
Представьте, что вы строите дом, где каждая комната — это отдельный компонент. Обычно всё, что вы кладете в комнату, остается внутри её стен. Но иногда вам нужно повесить картину так, чтобы её было видно всему дому, не разрушая при этом стены комнаты. React Portal работает как такое «волшебное окно» или «черный ход»: он позволяет вынести элемент (например, модальное окно или подсказку) за пределы текущего контейнера в любое место DOM-дерева, например, прямо в корень страницы.
При этом, несмотря на физическое перемещение элемента в коде, он остается «духовно» связанным с тем местом, где был создан. Это значит, что он всё еще может получать данные из контекста родителя и реагировать на события, как если бы он никуда не уходил. Это идеальное решение для элементов, которые должны перекрывать весь интерфейс, не конфликтуя с CSS-стилями родительских блоков.
Зачем это нужно
Для вайбкодера это критически важный инструмент при создании сложных интерфейсов. Без порталов модальные окна часто «застревают» внутри узких блоков с ограниченными размерами, что ломает верстку. Понимание порталов позволяет быстро собирать чистые, отзывчивые UI-компоненты, которые ведут себя предсказуемо и не требуют костылей в CSS.