React: What are React fragments and when to use them?

1// ❌ Extra div (unnecessary DOM node)
2function List() {
3  return (
4    <div>
5      <h1>Title</h1>
6      <p>Description</p>
7    </div>
8  );
9}
10
11// ✅ Fragment (no extra DOM node)
12function List() {
13  return (
14    <>
15      <h1>Title</h1>
16      <p>Description</p>
17    </>
18  );
19}
20
21// Explicit syntax (when you need key)
22function Table() {
23  return (
24    <table>
25      <tbody>
26        {rows.map((row, i) => (
27          <Fragment key={row.id}>
28            <tr>
29              <td>{row.name}</td>
30            </tr>
31            <tr>
32              <td>{row.description}</td>
33            </tr>
34          </Fragment>
35        ))}
36      </tbody>
37    </table>
38  );
39}