What is React Portals in React

This article explores React Portals, a powerful feature that allows developers to render components outside their parent DOM hierarchy while maintaining their position in the React component tree. You will learn how portals work, their primary use cases like modals and tooltips, how to implement them, and how event bubbling behaves when using them.

Understanding React Portals

By default, React uses a parent-child relationship where a child component is physically nested inside its parent’s DOM node. However, this structure can create CSS challenges, particularly with layouts involving z-index, overflow: hidden, or position: absolute.

React Portals solve this issue. They let you render a component into a completely different part of the DOM tree—such as directly under the <body> tag—without losing the component’s state, props, or context.

Syntax of React Portals

To create a portal, you use the ReactDOM.createPortal() method. This method takes two arguments:

ReactDOM.createPortal(child, container)

child: Any renderable React child, such as an element, string, or component.
container: A valid DOM element where the child should be rendered.

Implementation Example

To use portals, you first need a target element in your HTML file (usually index.html):

<div id="root"></div>
<!-- The portal target -->
<div id="portal-root"></div>

Next, you can create a portal component in React:

import React from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose, children }) => {
  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-overlay">
      <div className="modal-content">
        {children}
        <button onClick={onClose}>Close</button>
      </div>
    </div>,
    document.getElementById('portal-root')
  );
};

export default Modal;

Even though the Modal component is imported and called inside a deeply nested component within the #root div, its actual HTML markup will render inside the #portal-root div.

Common Use Cases

Portals are ideal for UI components that need to break out of their visual containers:

Modals and Dialogs: To ensure the modal overlay covers the entire viewport without being clipped by parent containers with overflow: hidden.
Tooltips and Popovers: To position the tooltips relative to the viewport or screen, preventing clipping or distortion.
Dropdown Menus: To prevent parent container boundaries from cutting off the dropdown list.

Event Bubbling in Portals

A key advantage of React Portals is that they only change the physical DOM structure, not the React virtual DOM tree.

Because the portal remains in the React tree, features like Context and event bubbling work exactly as they would normally. If an event (like a click) occurs inside a portal, it will bubble up to its ancestors in the React component tree, even if those ancestors are not ancestors in the physical HTML DOM. This allows developers to manage state and events seamlessly without worrying about the physical location of the rendered elements.