Design Converter
Education
Last updated on Dec 2, 2024
Last updated on Dec 2, 2024
React Portals are a revolutionary feature in React that allows developers to render components at a different DOM node, even outside the root DOM element of the application. This capability is particularly useful for creating UI overlays, modal dialogs, and tooltips, where content needs to be rendered outside the parent component’s DOM boundaries.
By breaking out of the parent-child relationship in the DOM, React Portals empower developers to create complex and interactive user interfaces that enhance the user experience. Even though these elements are rendered outside the typical DOM structure, they still interact with the React tree for event handling and state management.
In this blog, we'll explore the fundamental concepts and best practices for building robust and scalable portals using React.
React Portals enable rendering components outside the parent component's DOM hierarchy, providing a powerful way to create sophisticated user interfaces. By rendering components outside of the parent component’s DOM boundaries, portals offer a unique method to enhance user experience. This feature, introduced in React 16, allows developers to render components outside the regular DOM hierarchy, offering a new dimension in UI development.
To render a component using a portal, you first define a new DOM node as the target container, outside of the regular DOM hierarchy. The ReactDOM.createPortal()
method is then used to render the React component’s content into this target container. This target can be any DOM element outside the root element of the application, allowing for the creation of complex and interactive user interfaces.
Here’s an example:
1import React from 'react'; 2import ReactDOM from 'react-dom'; 3 4const Portal = ({ children }) => { 5 const portalContainer = document.getElementById('portal-container'); 6 return ReactDOM.createPortal(children, portalContainer); 7}; 8 9const App = () => { 10 return ( 11 <div> 12 <h1>Portal Demo</h1> 13 <Portal> 14 <h2>This is a portal</h2> 15 </Portal> 16 </div> 17 ); 18};
In this example, the Portal
component creates a portal container with the ID portal-container
and renders the children
prop into it using the createPortal
function. This approach allows you to render content outside the parent component’s DOM hierarchy, providing greater flexibility in UI design.
Following the React documentation for portals, developers can build a custom <Portal />
wrapper component from scratch. This wrapper component creates a portal for any React children passed into it. Utilizing the useEffect
React Hook ensures that the element is mounted at the right time and cleaned up on component unmount. This wrapper can render any React component outside the regular DOM hierarchy, offering flexibility and control over component rendering.
Managing state and props is essential for building complex UIs with React Portals. Since portals are rendered outside the parent component’s DOM hierarchy, they do not inherit state and props from their parent component.
Here’s an example of managing portal state and props:
1import React, { useState } from 'react'; 2import ReactDOM from 'react-dom'; 3 4const Portal = ({ children, isOpen }) => { 5 const [portalState, setPortalState] = useState(isOpen); 6 return ( 7 <div> 8 {portalState && children} 9 <button onClick={() => setPortalState(!portalState)}>Toggle Portal</button> 10 </div> 11 ); 12}; 13 14const App = () => { 15 const [isOpen, setIsOpen] = useState(true); 16 return ( 17 <div> 18 <h1>Portal Demo</h1> 19 <Portal isOpen={isOpen}> 20 <h2>This is a portal</h2> 21 </Portal> 22 <button onClick={() => setIsOpen(!isOpen)}>Toggle Portal</button> 23 </div> 24 ); 25};
This approach ensures that the portal’s state and props are managed effectively, allowing for dynamic and interactive UIs.
createPortal
API strategically for UI elements that require DOM separation.Portals do not inherit styles from their parent component since they exist outside the DOM hierarchy of the parent. This allows developers to pass styles directly into the portal, ensuring proper styling. Portals can render elements outside the root div
element, making them crucial for use cases where user attention is needed.
React.memo
: Memoize the portal component to prevent unnecessary re-renders.shouldComponentUpdate
: Control portal re-renders with lifecycle methods.React.useCallback
to memoize functions passed to the portal.React Portals are a powerful feature that allows developers to render components outside the regular DOM hierarchy. By understanding and utilizing portals, developers can create sophisticated and interactive user interfaces. Whether for modals, tooltips, or context menus, portals offer flexibility and control over component rendering, enhancing the overall user experience.
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.