Portals in React are a way to render a component's content in a different part of the DOM (Document Object Model) hierarchy than where the component itself is rendered. Portals provide a mechanism to break out of the normal parent-child hierarchy in React and render a component's content into a different DOM element that may not be a direct child of the component's parent. This can be useful for scenarios like modals, tooltips, and other UI elements that need to be rendered at a higher level in the DOM hierarchy.

Here's a simplified explanation of the concept of portals in React:

Normal React Rendering:

In a typical React application, when you render a component, its output is placed within the DOM element where the component is mounted. For example, if you render a modal component within another component, the modal's content will be a child of the parent component's DOM element.

Portals:

Portals allow you to render a component's content into a different DOM element outside of the component's parent hierarchy. This means you can render a component's content at a higher level in the DOM, often directly under the body or any other element of your choice.

Use Cases:

Portals are particularly useful for scenarios like modals, tooltips, context menus, and any UI element that should appear above all other content on the page. By using a portal, you can ensure that these elements are rendered in the desired location and don't interfere with the CSS or event handling of other components.

Here's a simplified example of how you can use a portal in React:

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

class MyModal extends React.Component {
  render() {
    // Create a portal to render this component's content outside its parent hierarchy
    return ReactDOM.createPortal(
      <div className="modal">
        <h1>Modal Content</h1>
        <p>This modal is rendered outside of its parent component.</p>
      </div>,
      document.getElementById('portal-root') // Specify the target DOM element
    );
  }
}

// In your main application component, render the modal
function App() {
  return (
    <div>
      <h1>My App</h1>
      {/* The portal will render the modal outside of this component's hierarchy */}
      <MyModal />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

In this example, the MyModal component uses createPortal to render its content into an element with the id portal-root, which can be anywhere in the DOM hierarchy. This allows the modal to appear above all other content on the page, even though it's defined within the App component.