React Portals and event bubbling

Photo by Yong Chuan Tan on Unsplash

Portals can be a very handy tool in React. But you need to be careful about how you think about event bubbling.

Portals are a way of rendering children to a DOM node that exists outside the DOM hierarchy of the parent component. This is commonly used to allow child component’s to visually ‘break out’ of its container.

Event bubbling in Portals follows the React Tree

Since a portal can be anywhere in the DOM tree, it may seem that event propagation may occur separately. However, this is not the case.

The portal retains its position in the React tree, regardless of its actual position in the DOM tree. This means that events fired in a portal will propagate upwards to ancestors in the containing React tree, even if it is somewhere else in the DOM tree.

DOM Tree =/= React Tree

The fact that that the DOM tree is not equivalent to the React tree is obvious, in principle. But things can get a bit confusing with Portals since they purposefully place items within a React tree outside the normal flow of the DOM hierarchy.

A situation this was relevant in the real world