React Fragments Guide

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

Basic Fragment Syntax#

import { Fragment } from 'react';

// Full syntax
function Columns() {
  return (
    <Fragment>
      <td>Hello</td>
      <td>World</td>
    </Fragment>
  );
}

// Short syntax
function ColumnsShort() {
  return (
    <>
      <td>Hello</td>
      <td>World</td>
    </>
  );
}

// Why not div?
function Table() {
  return (
    <table>
      <tbody>
        <tr>
          {/* Using div here would be invalid HTML */}
          <Columns />
        </tr>
      </tbody>
    </table>
  );
}

When to Use Fragments#

// Returning multiple elements
function UserInfo({ user }) {
  return (
    <>
      <dt>Name</dt>
      <dd>{user.name}</dd>
      <dt>Email</dt>
      <dd>{user.email}</dd>
    </>
  );
}

function DefinitionList({ users }) {
  return (
    <dl>
      {users.map(user => (
        <UserInfo key={user.id} user={user} />
      ))}
    </dl>
  );
}

// Conditional rendering
function Content({ isLoggedIn }) {
  return (
    <>
      {isLoggedIn ? (
        <>
          <Header />
          <Dashboard />
          <Footer />
        </>
      ) : (
        <>
          <Header />
          <LoginForm />
        </>
      )}
    </>
  );
}

// Avoiding wrapper div
function Navigation() {
  return (
    <nav>
      <>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </>
    </nav>
  );
}

Keyed Fragments#

import { Fragment } from 'react';

// With keys (can't use short syntax)
function GlossaryList({ items }) {
  return (
    <dl>
      {items.map(item => (
        <Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.definition}</dd>
        </Fragment>
      ))}
    </dl>
  );
}

// Table rows with multiple cells
function DataRows({ data }) {
  return (
    <>
      {data.map(row => (
        <Fragment key={row.id}>
          <tr className="main-row">
            <td>{row.name}</td>
            <td>{row.value}</td>
          </tr>
          <tr className="detail-row">
            <td colSpan={2}>{row.details}</td>
          </tr>
        </Fragment>
      ))}
    </>
  );
}

// Short syntax doesn't support keys
// This won't work:
// <> key={item.id}  // Error!

Avoiding Extra Wrappers#

// Problem: Extra wrapper div affects layout
function BadLayout() {
  return (
    <div className="flex-container">
      <FlexItems /> {/* Adds extra div, breaks flexbox */}
    </div>
  );
}

function FlexItemsBad() {
  return (
    <div> {/* This extra div breaks the flex layout */}
      <div className="flex-item">Item 1</div>
      <div className="flex-item">Item 2</div>
    </div>
  );
}

// Solution: Use Fragment
function GoodLayout() {
  return (
    <div className="flex-container">
      <FlexItems /> {/* No extra wrapper */}
    </div>
  );
}

function FlexItems() {
  return (
    <>
      <div className="flex-item">Item 1</div>
      <div className="flex-item">Item 2</div>
    </>
  );
}

// Grid layout
function GridItems() {
  return (
    <>
      <div className="grid-item">1</div>
      <div className="grid-item">2</div>
      <div className="grid-item">3</div>
    </>
  );
}

With Arrays#

// Mapping to fragments
function TagList({ tags }) {
  return (
    <div>
      {tags.map((tag, index) => (
        <Fragment key={tag}>
          {index > 0 && ', '}
          <span className="tag">{tag}</span>
        </Fragment>
      ))}
    </div>
  );
}

// Result: Tag1, Tag2, Tag3

// Alternative: join with elements
function TagListAlt({ tags }) {
  return (
    <div>
      {tags
        .map(tag => <span className="tag">{tag}</span>)
        .reduce((prev, curr, i) => (
          <Fragment key={i}>
            {prev}
            {i > 0 && ', '}
            {curr}
          </Fragment>
        ))}
    </div>
  );
}

Conditional Fragments#

// Conditional content groups
function UserProfile({ user, isOwner }) {
  return (
    <div className="profile">
      <h1>{user.name}</h1>

      {isOwner && (
        <>
          <button>Edit Profile</button>
          <button>Settings</button>
        </>
      )}

      {!isOwner && (
        <>
          <button>Follow</button>
          <button>Message</button>
        </>
      )}
    </div>
  );
}

// With ternary
function StatusBadge({ status }) {
  return (
    <div className="status">
      {status === 'active' ? (
        <>
          <span className="dot green" />
          <span>Active</span>
        </>
      ) : (
        <>
          <span className="dot gray" />
          <span>Inactive</span>
        </>
      )}
    </div>
  );
}

Component Composition#

// Higher-order component returning fragment
function withLogging(WrappedComponent) {
  return function LoggedComponent(props) {
    useEffect(() => {
      console.log('Component rendered');
    });

    return (
      <>
        <WrappedComponent {...props} />
        {process.env.NODE_ENV === 'development' && (
          <div className="debug-info">Debug Mode</div>
        )}
      </>
    );
  };
}

// Render prop with fragment
function Toggle({ children }) {
  const [isOn, setIsOn] = useState(false);

  return children({
    isOn,
    toggle: () => setIsOn(!isOn),
  });
}

function App() {
  return (
    <Toggle>
      {({ isOn, toggle }) => (
        <>
          <button onClick={toggle}>Toggle</button>
          {isOn && <div>Content is visible!</div>}
        </>
      )}
    </Toggle>
  );
}

Form Elements#

// Form field groups
function FormFields() {
  return (
    <>
      <label htmlFor="email">Email</label>
      <input id="email" type="email" />

      <label htmlFor="password">Password</label>
      <input id="password" type="password" />
    </>
  );
}

function LoginForm() {
  return (
    <form>
      <FormFields />
      <button type="submit">Login</button>
    </form>
  );
}

// Fieldset contents
function AddressFields() {
  return (
    <>
      <div className="field">
        <label>Street</label>
        <input name="street" />
      </div>
      <div className="field">
        <label>City</label>
        <input name="city" />
      </div>
      <div className="field">
        <label>ZIP</label>
        <input name="zip" />
      </div>
    </>
  );
}

Performance Considerations#

// Fragments don't create DOM nodes
// No performance overhead from wrapper elements

// Before (extra div)
<div> {/* Creates DOM node */}
  <Child1 />
  <Child2 />
</div>

// After (Fragment)
<> {/* No DOM node */}
  <Child1 />
  <Child2 />
</>

// DOM output is cleaner
// <div id="root">
//   <Child1 />
//   <Child2 />
// </div>

// vs

// <div id="root">
//   <div> <!-- Extra wrapper -->
//     <Child1 />
//     <Child2 />
//   </div>
// </div>

Common Mistakes#

// Wrong: Key on short syntax
function List({ items }) {
  return items.map(item => (
    // <> key={item.id}> // Syntax error!
    <Fragment key={item.id}>
      <span>{item.name}</span>
    </Fragment>
  ));
}

// Wrong: Attributes on short syntax
function Wrong() {
  return (
    // <> className="wrapper"> // Can't add attributes!
    <></>
  );
}

// Wrong: Using div when Fragment would work
function Unnecessary() {
  return (
    <div> {/* Why add this if you don't need it? */}
      <Child1 />
      <Child2 />
    </div>
  );
}

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.