React Fragments Guide

Fragments let you group elements without adding extra DOM nodes. Here's how to use them.

Best Practices#

When to Use:
✓ Returning multiple elements
✓ Avoiding layout-breaking wrappers
✓ Table rows with multiple cells
✓ Definition lists

Syntax Choice:
✓ Use <></> for simple cases
✓ Use <Fragment> when you need keys
✓ Import Fragment explicitly when needed
✓ Be consistent in your codebase

Avoid:
✗ Keys on short syntax (won't work)
✗ Attributes on short syntax
✗ Unnecessary wrapper divs
✗ Over-nesting fragments

Fragments provide a clean way to group elements without adding extra DOM nodes. Use the short syntax for simple grouping and the full Fragment syntax when you need keys. They're especially useful for table rows, definition lists, and avoiding layout-breaking wrapper elements.

React Fragments Guide

Basic Fragment Syntax#

When to Use Fragments#

Keyed Fragments#

Avoiding Extra Wrappers#

With Arrays#

Conditional Fragments#

Component Composition#

Form Elements#

Performance Considerations#

Common Mistakes#

Best Practices#

Conclusion#

Share this article

Related articles

Error Boundaries in React Applications

Compound Components in React

React Render Props Patterns