What are React portals?
Why Interviewers Ask This
This tests whether you can apply React.js knowledge to real-world scenarios. Interviewers are looking for clarity of thought and evidence that you've encountered this in production code.
Answer
React Portals allow rendering a component's output into a DOM node that is outside the parent component's DOM hierarchy. ReactDOM.createPortal(child, containerDOMNode). Example: a modal dialog that should render at the <body> level to avoid CSS overflow:hidden or z-index issues: function Modal({ children }) { return ReactDOM.createPortal(<div className="modal">{children}</div>, document.body); }. Although the modal's DOM lives outside its parent in the HTML, it still behaves as a React child — events bubble up through the React component tree (not the DOM tree), and context works across portals. Common use cases: modals and dialogs, tooltips and popovers, dropdown menus, notification toasts — any UI that must visually escape its container's stacking context. Accessibility: remember to manage focus when a portal renders an interactive element, trap focus within modals, and handle keyboard events appropriately. Libraries like Radix UI and Headless UI use portals under the hood for these components.
Common Mistake
Many candidates answer correctly but can't explain the 'why'. Always be prepared to justify your answer with a concrete example or use case from your React.js experience.