What is fragment in React

<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.

Why Fragment?

In React every component must return one root element. Previously, JSX had to be wrapped in <div>, which cluttered DOM:

tsx

// Bad example
return (
  <div>
    <h1>Title</h1>
    <p>Description</p>
  </div>
);

With fragment:

tsx

// Good example
return (
  <Fragment>
    <h1>Title</h1>
    <p>Description</p>
  </Fragment>
);

*Or even shorter:

tsx

// Short syntax
return (
  <>
    <h1>Title</h1>
    <p>Description</p>
  </>
);

Comparison: div vs Fragment

Characteristic		/ <>
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.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?

Practice Problems

What is fragment in React

#Why Fragment?

#Comparison: div vs Fragment

Short Answer

Why Fragment?

Comparison: div vs Fragment