React Fragments
Why Fragments Exist
Since a component must return one root element, wrapping unrelated siblings in an extra <div> just to satisfy that rule adds a meaningless node to the real DOM. A Fragment lets you group elements without adding any extra wrapper element.
Note: Use a Fragment when a wrapper <div> would break your CSS layout (for example, inside a <table> row).
Warning: Adding an unnecessary wrapper <div> around table rows/cells can break table layout in ways a Fragment avoids entirely.
Example: Why Fragments Exist
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function TwoParagraphs() {
return (
<React.Fragment>
<p>First paragraph, no wrapping div.</p>
<p>Second paragraph, still no wrapping div.</p>
</React.Fragment>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<TwoParagraphs />);
</script>
</body>
</html>The Shorthand <>...</> Syntax
React.Fragment has a shorthand syntax, empty angle brackets <> and </>, that does the exact same thing with less typing.
Note: The shorthand <> syntax can't take a key prop -- use the full <React.Fragment key={...}> form when rendering a list of fragments.
Warning: The shorthand fragment <></> looks like a typo to developers unfamiliar with it -- a brief comment can help when using it in shared code.
Example: The Shorthand <>...</> Syntax
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function ShorthandFragment() {
return (
<>
<h3>Heading</h3>
<p>Paragraph, both inside a shorthand fragment.</p>
</>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<ShorthandFragment />);
</script>
</body>
</html>Fragments with Keys in Lists
When you need a fragment inside a loop, the shorthand <>...</> syntax cannot be used because it does not accept a key attribute. In that case you must use the full <React.Fragment key={...}> form instead, so React can still track each item correctly.
Note: Only switch to the full React.Fragment form when you specifically need to pass a key -- otherwise the <> shorthand stays simpler.
Warning: Forgetting the key on a Fragment inside a list produces the same "missing key" warning as forgetting it on a normal element.
Example: Fragments with Keys in Lists
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function ItemPair({ name, id }) {
return (
<React.Fragment key={id}>
<dt>{name}</dt>
<dd>Details for {name}</dd>
</React.Fragment>
);
}
function App() {
const items = [{id: 1, name: "Apple"}, {id: 2, name: "Banana"}];
return <dl>{items.map(i => <ItemPair key={i.id} {...i} />)}</dl>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>- Wrapping JSX in an unnecessary <div> just to satisfy the single-root-element rule, cluttering the DOM.
- Trying to add a
keyprop to the <>...</> shorthand, which isn't supported. - Not realizing Fragments produce zero extra DOM nodes -- expecting to style a Fragment directly.
- JSX requires a single root element, but Fragments avoid adding an extra real DOM node for it.
- The shorthand
<>...</>is the most common way to write a Fragment. - The full
<React.Fragment>form is needed when akeyprop is required, such as in lists. - Fragments have no visual effect and add nothing to the rendered HTML.
No browser-specific restrictions -- Fragments are a React/JSX feature available since React 16.2.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: