Beginner LevelReact JS & React 19
What are React Fragments (<>...</>) and why are they preferable to container <div> tags?
❓ Interview Prompt: Explain `<React.Fragment>` and short syntax `<>...</>`, avoiding DOM wrapper pollution, flex/grid breakage, and passing keys.
React components must return a single root element. React Fragments ('<Fragment>' or '<>...</>') allow grouping multiple children without adding extra unnecessary DOM nodes:
Benefits:
•
Clean DOM Tree: Prevents "div soup" (excessive wrapper '<div>' tags).
•
CSS Layout Protection: Extra wrapper divs often break Flexbox and CSS Grid parent-child layout relationships!
•
Keyed Fragments: Use '<React.Fragment key={id}>' when mapping lists of fragments.
Code Implementation Example
jsx
import { Fragment } from 'react';
function TableRows({ items }) {
return (
<>
{items.map(item => (
<Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</Fragment>
))}
</>
);
}💡Grouping multiple JSX elements without wrapper DOM nodes using Fragments.
🎯 Interview Key Takeaway
Use Fragments (<>...</>) to group elements without introducing extra DOM nodes that disrupt CSS Flexbox/Grid.
#Fragment#JSX#DOM Tree#Beginner
Back to all React JS & React 19 Questions→