What are portals in ReactJS?

Portal is a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

The first argument (child) is any renderable React child, such as an element, string, or fragment. The second argument (container) is a DOM element.

Difficulty: 6/10

Topics: ReactDOM.createPortal, modal implementation, event handling

0-2 years experience

1
How would you render a tooltip so it appears above other elements without being clipped by its parent’s overflow:hidden style?
2
If you need to mount a modal dialog into a div that lives outside your main app root, which React feature would you use and how would you implement it?
3
What happens if you try to create a portal targeting a DOM node that hasn’t been added to the page yet?

2-5 years experience

1
We have a modal that sometimes fails to close when clicking outside while it’s rendered via a portal. How would you debug and fix it?
2
When adding a portal for a dropdown menu, what trade‑offs do you consider regarding event bubbling and focus management?
3
Explain why a portal might break server‑side rendering and how you would guard against that scenario.

5-8 years experience

1
Our app renders many portals for tooltips and popovers. How would you design a reusable portal system that minimizes re‑renders and avoids memory leaks?
2
Discuss the performance implications of mounting a large number of portals on a high‑traffic page and how you would mitigate any issues.
3
How would you handle accessibility (ARIA) and keyboard navigation for components rendered via portals across different browsers?

8+ years experience

1
We are migrating a legacy codebase that uses jQuery modals to React portals. What architectural steps would you take to ensure a smooth transition and long‑term maintainability?
2
Across multiple teams, some portals render into a shared DOM node while others use separate roots. How would you establish a consistent strategy and enforce it?
3
If you need to support server‑side rendering for a component that conditionally uses a portal, how would you design the rendering pipeline to avoid hydration mismatches?