What are React Portals use cases?
Why Interviewers Ask This
This question targets practical, hands-on experience with React.js. Interviewers want to see if you've worked with these concepts in real projects, not just read about them. Strong answers include concrete examples.
Answer
React Portals render children into a DOM node outside the component's position in the DOM tree. Primary use cases: (1) Modals and Dialogs: must appear above all other content. Rendering inside a parent with overflow: hidden or low z-index would clip the modal. Portaling to document.body avoids this. (2) Tooltips: must escape any ancestor with overflow: hidden and appear at the top of the stacking context. (3) Dropdown menus: same overflow/z-index issues as tooltips. (4) Toast notifications: fixed-position elements that overlay all content. (5) Full-screen overlays. How portals maintain React behavior: although the DOM node is outside the parent, the portal is still part of the React tree — event bubbling follows the React component hierarchy, not the DOM hierarchy. Clicking inside a portal triggers React event handlers in parent components even though the DOM is elsewhere. Context works across portals. Accessibility: portaling a dialog requires proper focus management, ARIA attributes (role="dialog", aria-modal), and focus trapping to be accessible. Libraries like Radix UI primitives handle all accessibility requirements.
Pro Tip
Demonstrate both theoretical understanding and practical experience. Say what it is, then give an example of how you actually used it in a React.js codebase.
Previous
What is the Context API performance issue and how do you fix it?
Next
What is the React Profiler API?