Hint
<></> lets you return multiple elements without adding an extra DOM node
Fragments let you group multiple elements without adding an extra DOM wrapper node.
// ❌ Extra div pollutes the DOM
function TableRow() {
return (
{/* invalid inside */}
Name
Age
);
}
// ✅ Fragment — no DOM node added
function TableRow() {
return (
<>
Name
Age
);
}
// Keyed fragments — use the long form syntax (shorthand doesn't support key)
function List({ items }) {
return items.map(item => (
{item.term}
{item.description}
));
}
💡 Fragments matter most in table structures (tr/td/th must be direct children) and flexbox/grid layouts where an extra wrapper breaks the CSS.