When returning a number of components from a part’s render technique, they should be wrapped in a single father or mother DOM node:
// Wants a <div> wrapper
return (
<div>
<ChildA />
<ChildB />
</div>
);
This additional wrapper <div>
within the DOM is usually undesirable. Enter React fragments – a option to group components with out including additional nodes.
Quick Syntax
The best fragment syntax is:
return (
<>
<ChildA />
<ChildB />
</>
);
The <></>
syntax declares a React fragment. Fragments allow you to skip the wrapper <div>
.
Keyed Fragments
Fragments can be keyed to present youngster components a context:
operate Mother or father() {
const gadgets = ['A', 'B', 'C'];
return (
<MyFragment>
{gadgets.map(merchandise => <Youngster key={merchandise} />)}
</MyFragment>
);
}
const MyFragment = React.Fragment;
Keyed fragments are useful for record gadgets that want a context.
Motivation
Fragments had been launched to scale back additional DOM nodes. Some advantages are:
- Keep away from wrapper nodes in DOM tree
- Semantically group parts collectively
- Key record gadgets with out including wrappers
This improves render effectivity and semantics.
Utilization Suggestions
- Use brief syntax for inline part teams
- Key fragments to offer record merchandise context
- Choose fragments over wrapper divs
- Don’t overuse – attempt to hold parts logically grouped
Fragments are a instrument for cleaner, extra readable part timber.
Abstract
- Fragments allow you to group components with out a DOM node
- Offers shorter syntax vs wrapper divs
- Keyed fragments present context for lists
- Improves render effectivity and semantics
- Use judiciously based on use case
React fragments are a key instrument for constructing part hierarchies. No extra thriller packing containers!