Frontend interview practice question

Why do events from a portal still bubble to the parent? React portals

HighIntermediateReact

By FrontendAtlas Editorial · Updated Oct 12, 2026

Interview quick answer

Portals render children into another DOM node while keeping them in the React tree, so synthetic events bubble to React parents and context flows through. Explain why that is the feature for modals and tooltips, the trap for outside-click logic, and the focus and accessibility work portals still need.

Interview focus

This React interview question tests whether you can explain Portal Events Still Bubble: React Portals Explained, connect it to production trade-offs, and handle common follow-up questions.

Portal Events Still Bubble: React Portals Explained explanation without falling back to memorized definitions
Portals and Modals reasoning, edge cases, and production failure modes
How you would answer the most likely React interview follow-up

Practice more React interview questions

Interview answer drill

Use this React interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.

Practice more React interview questions Follow 30-day foundations study plan Open Essential 60

Full interview answer

The surprise to explain

A modal rendered through a portal sits at document.body, yet a click inside it still runs the onClick on the React parent that rendered the modal. Portals change where the DOM nodes go, not where the component lives in the React tree, so synthetic events bubble through React ancestors and context flows down as usual. That is the feature for modals and tooltips, and the trap for outside-click handlers that assume DOM containment.

Quick answer
Portals render children into a DOM node outside the parent hierarchy, useful for modals, tooltips, and overlays while preserving React event bubbling. Portals help overlays but require focus management and accessibility checks; test event bubbling and scroll lock.

Overview

By default, components in React render into a specific section of the DOM tree — typically inside a root element. However, there are cases where you need to render an element outside of this hierarchy (like a modal that overlays the entire page). React Portals make this possible while preserving the component’s state and event bubbling behavior.

JSX

// Example: Creating a Portal
import { createPortal } from 'react-dom';

function Modal({ children }) {
  const modalRoot = document.getElementById('modal-root');
  return createPortal(
    <div className='modal-overlay'>
      <div className='modal-content'>{children}</div>
    </div>,
    modalRoot
  );
}

// Usage
function App() {
  return (
    <>
      <h1>Main App</h1>
      <Modal>
        <p>This modal is rendered outside the main DOM hierarchy!</p>
      </Modal>
    </>
  );
}

Feature	Description
DOM Separation	Renders children into a different part of the DOM while still being part of the same React component tree.
Event Propagation	Events (like clicks) still bubble up through the React tree even if rendered elsewhere.
Reusability	Useful for rendering overlays, tooltips, dropdowns, and notifications without CSS positioning issues.

Key characteristics of React Portals

When to Use React Portals

Modals and Dialogs: To overlay content on top of the entire app while avoiding nested CSS stacking contexts.
Tooltips and Popovers: To position elements outside of overflow or clipping containers.
Floating UI Elements: For global notifications, menus, or context-sensitive actions.

HTML

<!-- Typical setup in index.html -->
<body>
  <div id='root'></div>
  <div id='modal-root'></div>
</body>

How It Works Internally
React’s createPortal() function takes two arguments: a React child (JSX element) and a DOM node. It attaches the child to the specified DOM node, but keeps it part of the React component hierarchy — meaning it still shares state, context, and event propagation with its parent.

Advantages of Using Portals

Solves z-index and overflow issues by detaching UI from parent containers.
Keeps React’s declarative structure intact.
Maintains event propagation and context links even when rendered outside the normal DOM flow.

Portals act like ‘wormholes’ in React — they render elements somewhere else in the DOM while keeping them connected to their original logic and context.

Practical scenario
A modal and tooltip must render above the app shell, so you render them into a portal root outside the main DOM tree.

Common pitfalls