What is a React fragment?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// With a wrapper div: an extra level in the DOM, and flex/grid
// layouts get a new child they did not ask for.
function BadRow() {
  return (
    <div>
      <td>Name</td>
      <td>Price</td>
    </div>
  );
}

// With a fragment: same JSX, no extra node
function GoodRow() {
  return (
    <>
      <td>Name</td>
      <td>Price</td>
    </>
  );
}

// Keyed fragment, needed when returning a list of groups
import { Fragment } from 'react';
const groups = rows.map(g => (
  <Fragment key={g.id}>
    {g.items.map(i => <li key={i.id}>{i.label}</li>)}
  </Fragment>
));