Loading...
Loading...
By continuing to use the platform, you accept the terms of the Privacy Policy and the use of cookies.
<Fragment> is a component provided by React that allows grouping multiple child elements without adding extra node to DOM.
It doesn't render in HTML but allows returning multiple elements from component.
In React every component must return one root element. Previously, JSX had to be wrapped in <div>, which cluttered DOM:
// Bad example
return (
<div>
<h1>Title</h1>
<p>Description</p>
</div>
);
With fragment:
// Good example
return (
<Fragment>
<h1>Title</h1>
<p>Description</p>
</Fragment>
);
*Or even shorter:
// Short syntax
return (
<>
<h1>Title</h1>
<p>Description</p>
</>
);
| Characteristic | <div> | <Fragment> / <> |
|---|---|---|
| Render in DOM | Yes | No |
| Style | Can affect | Neutral |
| Semantics | Can violate | Clean |
Conclusion:
React.Fragment is a useful tool for grouping JSX without adding extra HTML. It helps make DOM cleaner, code — neater, and avoid unexpected styles from extra wrappers.