What is the purpose of React portals?

Due to its adaptability, reuse, and efficiency, React has become a well-known JavaScript library. Among its many features, React portals stand out as a powerful tool for rendering components outside of their usual DOM hierarchy.

What are React portals?

React portals allow us to render the output of a component in a different location in the DOM tree than its parent component. Portals, in essence, allow us to break out from the usual parent-child relationship and create a more flexible and dynamic component structure.

Syntax

Here, the first argument (child) is the component, which can be an element, string, or fragment, and the second argument (container) is a DOM element.

Purpose

The fundamental goal of React portals is to avoid the DOM hierarchy's constraints. We can render components into other parts of the DOM tree, even outside the parent component's DOM hierarchy, by using portals. This functionality opens up a world of possibilities, allowing us to create unique UI experiences that were previously challenging or impossible to achieve.

Advantages

• Flexible component rendering: React portals allow components to be rendered at any location in the DOM tree, giving us more freedom when developing complicated UI layouts.

• Improved performance: React portals can avoid wasteful re-rendering of parent components by rendering components outside of their parent hierarchy, resulting in performance improvements.

• Integration with third-party libraries: Portals facilitate the integration of third-party libraries that require rendering their content at specific DOM locations, ensuring seamless compatibility and functionality.

• Encapsulation and isolation: React portals promote encapsulation and isolation of components, allowing for cleaner component hierarchies and better code maintainability.

Limitations

• DOM structure limitations: While React portals offer flexibility, they are still bound by the constraints of the underlying DOM structure. Some advanced use cases, such as rendering components in completely different windows or non-DOM environments, may require additional solutions.

• Event bubbling and event handling: Events triggered within portals may not bubble up the React component hierarchy as expected. Careful event handling and propagation management are required to ensure consistent behavior.

• Complexity and maintenance: The use of portals can introduce additional complexity to the application, especially when dealing with multiple portals and their interdependencies. This complexity may impact code readability, maintainability, and debugging efforts.

Use cases

React portals offer a versatile solution for various use cases, allowing components to be rendered outside their regular DOM hierarchy like creating floating menus, implementing drag-and-drop functionality, or building toast notification systems, etc. React portals provide the flexibility needed to enhance the user experience and create interactive UIs. We will see the implementation of some of the use cases of React portals.

Dialog

Dialogs are modal components that overlay the main content to display important messages, notifications, or user interactions.

Explanation

• Line 4: This line declares a functional component called DialogExample that takes in three props: isOpen, onClose, and children. These props will be used to control the visibility of the dialog, handle the close event, and render the content within the dialog.

• Line 5: This line checks if the isOpen prop is false. If it is, the component returns null, indicating that the dialog should not be rendered.

• Lines 7–18: This block of code renders the dialog using ReactDOM.createPortal(), which renders the component into a different DOM element outside of its parent component's DOM hierarchy.

• Line 16: This line specifies the target container where the dialog will be rendered, identified by the element with the id 'dialog-root'.

Modal

A common use case for React portals is the implementation of modals. This UI element often requires rendering outside the normal DOM flow to maintain a desired overlay effect. Let's see how a portal can be used to create a modal.

Creating a floating menu

A floating menu is a common UI element that remains fixed on the screen while its content scrolls. React portals can be used to render the menu outside the scrolling container, ensuring its position remains fixed.

Explanation

• Line 4: This line declares a functional component called FloatingMenu that takes in a prop called children. The children prop represents the content that will be rendered inside the floating menu.

• Lines 4–9: This block of code uses ReactDOM.createPortal() to create a portal that renders the children prop into a different DOM element outside of its parent component's DOM hierarchy. It specifies the target container where the content will be rendered, identified by the element with the id 'menu-root'.

Implementing drag-and-drop functionality

React portals can be leveraged to create drag-and-drop functionality by rendering draggable components outside the normal component hierarchy.

Explanation

• Line 4: This line declares a functional component called DraggableItem that takes in a prop called children. The children prop represents the content that will be rendered inside the draggable item.

• Lines 4–7: These lines define the handleDragStart function that is triggered when the drag operation starts. It sets the data in the drag event's dataTransfer object, specifying the type and value of the data being dragged.

• Lines 9–15: This code creates a portal using ReactDOM.createPortal() to render the draggable item inside the element with the id 'draggable-root'. The onDragStart event handler is attached to trigger the handleDragStart function. The children prop is rendered as the content of the draggable item.

Conclusion

By rendering components outside of their typical DOM structure, we can create flexible and interactive user interfaces with React portals. Portals provide a wide range of possibilities, from building modals and dialogs to improving speed and interacting with third-party libraries.