React Fragments

React Fragments: Grouping Elements Without Extra DOM Nodes

In React, every component must return a single root JSX element. Wraping elements in extra <div> containers solely to satisfy this rule pollution the browser DOM tree, degrades styling layouts (Flexbox/Grid), and creates invalid HTML structures (such as invalid <table> markup).

React Fragments allow developers to group multiple child elements without adding extra wrappers or nodes to the real browser DOM.

Fragment Syntax Options

import React, { Fragment } from 'react';

// Option A: Short Syntax (Cannot accept key prop)
export function ColumnShort() {
  return (
    <>
      <td>Column 1 Data</td>
      <td>Column 2 Data</td>
    </>
  );
}

// Option B: Explicit Fragment Syntax (Required when passing key prop in list iterations)
export function TableGlossary({ items }) {
  return (
    <dl>
      {items.map((item) => (
        <Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.definition}</dd>
        </Fragment>
      ))}
    </dl>
  );
}

DOM Comparison

flowchart TD
    subgraph WithoutFragment ["Without Fragment (Extra <div> Wrapper)"]
        Div["<div>"] --> ChildA["<td>Item 1</td>"]
        Div --> ChildB["<td>Item 2</td>"]
    end
    subgraph WithFragment ["With React Fragment (<>...</>)"]
        ParentDOM["<tr>"] --> Child1["<td>Item 1</td>"]
        ParentDOM --> Child2["<td>Item 2</td>"]
    end

Best Practices & Gotchas

• Use Keyed Fragments in .map() Iterations: When mapping lists that require grouping multiple elements, you must use the explicit <Fragment key={id}> syntax because short tags (<>) cannot accept key attributes.
• Preserve Flexbox & Grid Layouts: Using Fragments prevents unwanted wrapper <div> elements from interfering with parent Flexbox or Grid CSS layouts.

Self-Check Challenge

Refactor a component returning <div><h1>Title</h1><p>Text</p></div> to use React Fragment short syntax <>...</>.