Klasyczna aplikacja zbudowana w React opiera swoją strukturę na jednym węźle DOM. Innymi słowy w pliku HTML tworzymy jeden element, najczęściej div, przypisujemy mu id, a następnie informujemy React’a, że w tym elemencie powinien renderować drzewo DOM. Taka konstrukcja jest bardzo wygodna do zarządzania z perspektywy samej biblioteki, łatwo odtworzyć samą strukturę czy wykryć zmiany, które w jej ramach powstają.

Czasami jednak może zdarzyć się sytuacja, gdy nie chcemy tworzyć nowych elementów w naszej strukturze drzewa React. Jednocześnie zbudowanie drugiej aplikacji nie byłoby optymalnym rozwiązaniem, gdy obie aplikacje miałyby współdzielić dane i stan. Dobrym przykładem mogą być wszelkiego rodzaju modale, powiadomienia, elementy, które musimy wydzielić do nowych okien. Modale i powiadomienia najczęściej potrzebujemy na najwyższym poziomie aplikacji (wysoko w strukturze DOM), tak aby nie były przykrywane przez pozostałe elementy. Nowe okna przeglądarki to zupełnie inny temat - mają swoją własną strukturę niepowiązaną z bieżącą stroną.

Portale

Portale w React to nic innego jak mechanizm pozwalający nam na renderowanie elementów React poza miejscem w strukturze, gdzie zasadniczo powinny być one wyrenderowane. Właściwie to pozwala nam one renderować nasze elementy w dowolnym miejscu DOM (Document Object Model) a nawet w oknach zależnych (dzięki właściwościom Window.opener oraz Document.referrer możemy mieć dostęp do okien, które otworzyły dane okno i nim niejako zarządzać). Portale mogę nam się przydać również, kiedy stylowanie komponentu ogranicza możliwości poprawnego wyrenderowania danego elementu, np. gdy komponent ma ustawiony overflow: hidden lub z-index.

Co ważne element, który jest renderowany poprzez mechanizm Portali nadal pozostaje pod pełną kontrolą Reacta, co więcej - z perspektywy aplikacji zachowuje się on tak, jakby był wyrenderowany w miejscu, w którym normalnie trafiłby do struktury. Daje nam to szereg możliwości - jak np. współdzielenie stanu, dostęp do przekazywanych w dół props’ów czy dostęp do Context API. Warto też zaznaczyć, że event bubbling (bąbelkowanie zdarzeń) będzie działać tak samo jak bez Portalu, czyli zdarzenia odpalone wewnątrz Portalu będą propagowane w górę drzewa w ramach struktur drzewa React.

Portale wpływają tylko na strukturę drzewa DOM, pozostają bez wpływu na drzewo komponentów React.

Otwieranie portalu

Właściwie nie ma tutaj żadnej magii. Nie jest też potrzebna zaawansowana wiedza z fizyki kwantowej. Do otwierania portali służy metoda createPortal dostarczona przez bibliotekę react-dom.

Warto zwrócić uwagę na fakt, że metoda otwierająca Portal przyjmuje dwa argumenty: komponent, który renderujemy oraz węzeł, w którym będziemy go umieszczać. Co istotne, taki element powinien być wcześniej przygotowany. Możemy to przewidzieć i dodać go bezpośrednio do naszego pierwotnego HTMLa. Oczywiście wszystko zależy od naszych potrzeb i zastosowania, do którego chcemy wykorzystać Portale. Elementy, w których chcemy otwierać Portale mogą być też tworzone dynamicznie.

Podsumowanie

Jak widać React Portals to proste w użyciu narzędzie, ale bardzo przydatne w kontekście bardziej złożonych aplikacji. Należy pamiętać, że pomimo iż nasz komponent przekazany zostanie poprzez Portal do nowego miejsca w strukturze DOM, to nadal będzie znajdował się w drzewie komponentów React i podlegał tym samym zasadom co zwykły komponent Reactowy.

Wydaje mi się, że jest to jedna z kilku niedocenionych funkcjonalności Reacta, podobnie zresztą jak hook useLayoutEffect. Wiele osób o ich istnieniu zapomina, a niejednokrotnie mogłyby one rozwiązać część naszych problemów.