5 questions foundWhat is a React Portal and why would you use one?
Beginner A Portal lets you render a component's content into a different part of the actual page structure, outside of its normal parent element, while it still behaves like a normal part of your React component tree. This is commonly used for things like modals and tooltips, which need to visually sit on top of everything else on the page.
import { createPortal } from 'react-dom';
function Modal({ children }) {
return createPortal(
<div className="modal">{children}</div>,
document.getElementById('modal-root')
);
}
Real-world example A shopping site renders its checkout confirmation modal directly into a special modal-root element at the very end of the page's HTML, avoiding layout and overflow issues that could happen if it stayed nested deep inside the page's normal structure.
Common follow-ups: Does a Portal still receive events the same way as a normally placed component?;What HTML element do you usually create in advance for a Portal to render into?
Components & JSX;Design Patterns in React
How do event bubbling and Portals interact with each other in React?
Intermediate Even though a Portal's content is placed elsewhere in the actual HTML, React still treats click and other events as if they bubble up through the normal component tree, not through the actual physical HTML location. This means a click inside a Portal can still be caught by an event handler higher up in your React component structure.
function App() {
return (
<div onClick={() => console.log('Parent clicked')}>
<Modal>
<button onClick={() => console.log('Button clicked')}>Click Me</button>
</Modal>
</div>
);
}
// Clicking the button logs both messages, even though the modal renders elsewhere in the HTML
Real-world example A dropdown menu rendered through a Portal still correctly closes when a click is detected on an outer wrapping div, because React's event bubbling follows the component tree rather than the actual visual location on the page.
Common follow-ups: Why does this behavior sometimes surprise developers who expect events to follow the physical HTML structure instead?;How would you detect a click outside of a Portal's content specifically?
Components & JSX;Refs useRef & forwardRef
What is a Fragment in React and why would you use one instead of a div?
Beginner A Fragment lets you group several elements together without adding an extra wrapping element to the actual page. This is useful when adding a div would break your CSS layout, such as inside a table row, or would simply add unnecessary extra markup to the page.
function TableRow() {
return (
<>
<td>Name</td>
<td>Age</td>
</>
);
}
Real-world example A table component avoids breaking its layout by wrapping two table cells in a Fragment instead of a div, since an extra div between table rows and cells would be invalid HTML and break the table's appearance.
Common follow-ups: What is the difference between the short Fragment syntax and writing React.Fragment fully?;Can a Fragment accept a key prop when used inside a list?
Components & JSX;Conditional Rendering & Lists (Keys)
How would you use a keyed Fragment when rendering a list of grouped elements?
Intermediate When mapping over a list and returning more than one element per item, you cannot use the short Fragment syntax if you also need to add a key, since the shorthand does not accept any props at all. Instead you write out React.Fragment fully and add the key directly to it.
function DefinitionList({ terms }) {
return (
<dl>
{terms.map((term) => (
<React.Fragment key={term.id}>
<dt>{term.name}</dt>
<dd>{term.definition}</dd>
</React.Fragment>
))}
</dl>
);
}
Real-world example A glossary page correctly groups each term and its definition together using a keyed Fragment, avoiding both an unnecessary wrapping div and the React warning about a missing key on list items.
Common follow-ups: Why does React require a key here even though a Fragment itself never renders any actual HTML element?;What warning does React show if you forget the key on these Fragments?
Conditional Rendering & Lists (Keys);Components & JSX
How would you build a tooltip using a Portal so it always appears above everything else on the page?
Advanced A tooltip rendered inside a deeply nested component can sometimes get visually cut off by a parent element with hidden overflow. Rendering the tooltip through a Portal, directly attached near the very end of the page's body, avoids this problem entirely, since it is no longer restricted by any parent's layout or overflow settings.
function Tooltip({ text, targetRef }) {
const position = targetRef.current?.getBoundingClientRect();
if (!position) return null;
return createPortal(
<div style={{ position: 'absolute', top: position.bottom, left: position.left }}>
{text}
</div>,
document.body
);
}
Real-world example A data table with hidden overflow settings used to cut off tooltips shown on cells near the edge, until the team fixed it by rendering the tooltip through a Portal attached directly to the document body instead.
Common follow-ups: How do you calculate the correct position for a tooltip rendered through a Portal?;What happens to a Portal's tooltip if the page is scrolled while it is open?
Design Patterns in React;Refs useRef & forwardRef