17. What are React Portals and why are they useful?
hard

A Portal is a feature provided by the react-dom package that allows rendering children into a different DOM location. This enables developers to render content outside of their component's parent element, effectively "porting" the content to another part of the page.


Why Do We Need Portals?

  • Mounting components anywhere: With portals, you can render React components anywhere in your application's DOM tree, not just inside a specific component or container.
  • Improved accessibility: By rendering content outside of its parent element, you can improve accessibility by making it easier to focus on the rendered content.

Example: Using Portals

Here's an example of using a portal to render a popup message:

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

function MyComponent() {
    const [isOpen, setIsOpen] = React.useState(false);

    const handleClick = () => {
        setIsOpen(true);
    };

    if (isOpen) {
        return (
            <>
                {/* Render content in the portal */}
                <MyPortal>
                    <div className="popup">
                        <p>This is a popup message.</p>
                    </div>
                </MyPortal>

                {/* Rest of your component here */}
                <button onClick={handleClick}>Toggle Popup</button>
            </>
        );
    }

    return (
        <button onClick={handleClick}>
            Toggle Popup
        </button>
    );
}

// Create a portal container
const MyPortal = ({ children }) => {
    const container = document.getElementById('portal');
    if (!container) {
        // If no container is found, create one.
        container = document.createElement('div');
        document.body.appendChild(container);
    }

    // Render the children in the portal container
    return ReactDOM.createPortal(children, container);
};

// Attach a key to the portal container for improved performance
const portalContainer = document.getElementById('portal');
if (!portalContainer) {
    const portalNode = document.createElement('div');
    portalNode.id = 'portal';
    document.body.appendChild(portalNode);
}

In this example, we create a MyPortal component that serves as the container for our portal. We use ReactDOM.createPortal to render the children within this container.


When to Use Portals


Use portals when:

  • Need to mount components outside of their parent element: If you need to display content in a specific location on your page without being confined by the component's structure.
  • Improve accessibility and focus management: By rendering content outside its parent element, you can make it easier for users to navigate and interact with your application.

Key Takeaways

Portals provide a powerful way to render React components anywhere in your DOM tree. They're especially useful when working with complex layouts or when you need to improve accessibility by allowing users to focus on the rendered content.


When deciding whether to use a portal, consider the specific requirements of your project and how it can benefit from rendering content outside its parent element.


Example: Using Portals for Popups

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

function MyComponent() {
    const [isOpen, setIsOpen] = React.useState(false);

    const handleClick = () => {
        setIsOpen(true);
    };

    if (isOpen) {
        return (
            <>
                {/* Render content in the portal */}
                <MyPortal>
                    <div className="popup">
                        <p>This is a popup message.</p>
                    </div>
                </MyPortal>

                {/* Rest of your component here */}
                <button onClick={handleClick}>Toggle Popup</button>
            </>
        );
    }

    return (
        <button onClick={handleClick}>
            Toggle Popup
        </button>
    );
}

In this example, we use the portal to render a popup message when the user clicks the toggle button.


Note

  • Portal Container: To ensure proper performance and avoid unnecessary re-renders, attach a key to your portal container using document.getElementById.
  • portalContainer: Be sure to create a unique key for each portal container to prevent unexpected behavior.
PreviousNext