When returning a number of components from a element’s render methodology, they should be wrapped in a single mother or father DOM node:
// Wants a <div> wrapper
return (
<div>
<ChildA />
<ChildB />
</div>
);
This additional wrapper <div>
within the DOM is commonly undesirable. Enter React fragments – a technique to group components with out including additional nodes.
Quick Syntax
The only fragment syntax is:
return (
<>
<ChildA />
<ChildB />
</>
);
The <></>
syntax declares a React fragment. Fragments allow you to skip the wrapper <div>
.
Keyed Fragments
Fragments may also be keyed to provide little one components a context:
operate Dad or mum() {
const objects = ['A', 'B', 'C'];
return (
<MyFragment>
{objects.map(merchandise => <Baby key={merchandise} />)}
</MyFragment>
);
}
const MyFragment = React.Fragment;
Keyed fragments are useful for record objects that want a context.
Motivation
Fragments have 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 objects with out including wrappers
This improves render effectivity and semantics.
Utilization Ideas
- Use brief syntax for inline element teams
- Key fragments to offer record merchandise context
- Choose fragments over wrapper divs
- Don’t overuse – attempt to maintain parts logically grouped
Fragments are a software for cleaner, extra readable element bushes.
Abstract
- Fragments allow you to group components with out a DOM node
- Supplies shorter syntax vs wrapper divs
- Keyed fragments present context for lists
- Improves render effectivity and semantics
- Use judiciously in line with use case
React fragments are a key software for constructing element hierarchies. No extra thriller bins!