Why Fragments Exist
Every component must return a single root element. Wrapping everything in an extra <div> just to satisfy that rule adds meaningless nodes to the DOM, which can break CSS layouts (like Flexbox or Grid) that expect specific direct children.
The Problem Fragments Solve
// Without a Fragment, this <div> becomes an unwanted extra
// wrapper in the DOM, which can interfere with a Flexbox/Grid parent.
function TableRow() {
return (
<div>
<td>Alice</td>
<td>alice@example.com</td>
</div>
);
}Using a Fragment Instead
function TableRow() {
return (
<>
<td>Alice</td>
<td>alice@example.com</td>
</>
);
}
// No extra DOM node is added at allThe Full Fragment Syntax
The shorthand <>...</> is the most common form, but Fragment also has a full-name form (<React.Fragment>) required whenever you need to add a key — for example, when a Fragment appears inside a list.
A Fragment with a key
import { Fragment } from "react";
function List({ items }) {
return items.map((item) => (
<Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.definition}</dd>
</Fragment>
));
}What is a Portal?
A portal renders a component’s children into a different DOM node than its parent — useful for UI that needs to visually "break out" of its container, like modals, tooltips, and toasts, while still behaving like a normal part of the React tree for events and context.
A Basic Portal
import { createPortal } from "react-dom";
function Modal({ children }) {
return createPortal(
<div className="modal-overlay">
<div className="modal">{children}</div>
</div>,
document.getElementById("modal-root")
);
}Why Portals Matter for Modals
Rendering a modal deep inside a normal component tree can cause it to be visually clipped by an ancestor’s overflow: hidden or z-index stacking context. A portal renders it directly into a top-level DOM node (often right before </body>), sidestepping those layout constraints entirely.
Events Still Bubble Through the React Tree
Even though a portal’s DOM node lives elsewhere in the document, events fired inside it still bubble up through the React component tree as if it were rendered in its original location — event handling stays predictable.
Best Practice
Use Fragments by default whenever a component needs to return multiple sibling elements. Reach for a portal specifically when a component’s visual position needs to escape its parent’s layout or stacking context, like modals and dropdown menus.