- It’s a tiny bit faster and has less memory usage (no need to create an extra DOM node). This only has a real benefit on very large and/or deep trees, but application performance often suffers from death by a thousand cuts. This is one cut less.
- Some CSS mechanisms like Flexbox and CSS Grid have a special parent-child relationship, and adding
divs in the middle makes it hard to keep the desired layout while extracting logical components. - The DOM inspector is less cluttered. 🙂
You can find the descriptions of some other use cases in this React issue: Add fragment API to allow returning multiple components from render