How do React Portals work?

React Portals work by creating a portal between a parent component and a target DOM node. This portal bridges the gap between the React component tree and the actual DOM tree. When you render a child component using a portal, React ensures that the component’s subtree is appended to a specified DOM node, which could be anywhere in the document. This decouples the component’s rendering from its position in the component hierarchy.

Syntax:

import ReactDOM from 'react-dom';

// Create a portal
const Portal = ({ children }) => {
  const portalRoot = document.getElementById('portal-root');
  return ReactDOM.createPortal(children, portalRoot);
};

// Use the portal in your component
const MyComponent = () => (
  <Portal>
    <div>Content rendered outside the root DOM node!</div>
  </Portal>
);

Explanation: In this example, <Portal> is a component that creates a portal, and whatever you put inside it will magically appear outside the root DOM node, in an element with the id “portal-root”. This allows you to render elements in different parts of your app without breaking the rules of React.

React Portals offer a powerful mechanism for rendering elements outside of the typical DOM hierarchy in React applications. They provide a way to render content at a different place in the DOM tree from where it is defined in the component hierarchy. This capability opens up various possibilities, such as modals, tooltips, and overlays, that require rendering outside the root DOM node. In this article, we’ll see React Portals, discussing what they are, how they work, and their practical applications.

Real-Life Example: Think of your React app as a pizza shop, and the root DOM node (the <div> with an id like “root”) is the front counter where customers place their orders. Now, sometimes you need to deliver pizzas to different locations, like a party room or a school classroom. But React usually only lets you serve pizzas at the front counter (the root DOM node).That’s where React Portals come in. They’re like secret pizza delivery tunnels that allow you to send pizzas to different locations without going through the front counter.

Prerequisites:

• ReactJS
• JSX
• JavaScript