What is a React portal primarily used for?

What is a React portal primarily used for?

• A. It renders components only on the server.
• B. It creates an isolated DOM subtree within the same parent node.
• C. It renders every child as a separate React root.
• D. It renders children into a DOM node outside the parent DOM hierarchy, useful for modals and overlays.

Answer: (D)

Portals are about rendering a part of your React component tree into a different place in the actual DOM. You render the children into a DOM node that sits outside the parent’s DOM hierarchy, using a portal. This is especially handy for modals, dialogs, tooltips, and overlays that need to appear above other content or avoid being clipped by overflow or stacking contexts in their parent container. Even though the DOM location is outside the parent, the portal content remains connected to the React tree: it preserves props, state, and context, and events bubble through React as if the content were still inside its parent. In short, the primary use is to render children into a DOM node outside the parent DOM hierarchy, which makes it perfect for modals and overlays.

Portals are about rendering a part of your React component tree into a different place in the actual DOM. You render the children into a DOM node that sits outside the parent’s DOM hierarchy, using a portal. This is especially handy for modals, dialogs, tooltips, and overlays that need to appear above other content or avoid being clipped by overflow or stacking contexts in their parent container. Even though the DOM location is outside the parent, the portal content remains connected to the React tree: it preserves props, state, and context, and events bubble through React as if the content were still inside its parent. In short, the primary use is to render children into a DOM node outside the parent DOM hierarchy, which makes it perfect for modals and overlays.