Fragments

Return multiple elements from a component without adding extra DOM nodes

Fragments let you group a list of children without adding extra nodes to the DOM. They’re useful when you need to return multiple elements from a component but don’t want to wrap them in a container element.

Why Use Fragments?

Without fragments, you’d need to wrap multiple elements in a container:

// Without fragments - adds unnecessary div
function Component() {
  return (
    <div>
      <h1>Title</h1>
      <p>Paragraph</p>
    </div>
  );
}

This extra <div> can cause issues with:

• CSS layouts (flexbox, grid)
• Table structures
• List semantics
• Extra DOM nodes affecting performance

Using Fragments

JSX Syntax (Recommended)

The most common way to use fragments is with the short syntax <>...</>:

function Component() {
  return (
    <>
      <h1>Title</h1>
      <p>Paragraph</p>
    </>
  );
}

This renders the children without any wrapper element in the DOM.

Explicit Fragment

You can also use the explicit Fragment component:

import { Fragment } from 'preact';

function Component() {
  return (
    <Fragment>
      <h1>Title</h1>
      <p>Paragraph</p>
    </Fragment>
  );
}

Use this syntax when you need to add a key (see Keyed Fragments below).

How Fragments Work

The Fragment component is implemented simply in src/create-element.js:

// From src/create-element.js:77-79
export function Fragment(props) {
  return props.children;
}

It just returns its children directly, without wrapping them. During diffing, Preact handles fragments specially to avoid creating wrapper DOM nodes.

Reference: src/create-element.js:77-79

Common Use Cases

Table Rows

function TableRows({ items }) {
  return (
    <>
      {items.map(item => (
        <tr key={item.id}>
          <td>{item.name}</td>
          <td>{item.value}</td>
        </tr>
      ))}
    </>
  );
}

function Table({ items }) {
  return (
    <table>
      <tbody>
        <TableRows items={items} />
      </tbody>
    </table>
  );
}

Keyed Fragments

When rendering a list of fragments, you need to provide a key prop. The short syntax <> doesn’t support keys, so use the explicit Fragment component:

When mapping over fragments, always use <Fragment key={...}> instead of <>.

Fragments vs. Arrays

You might wonder: why use fragments when you can return an array?

With Fragments (Recommended)

function Component() {
  return (
    <>
      <h1>Title</h1>
      <p>Content</p>
    </>
  );
}

Advantages:

• More readable JSX syntax
• No need for keys on static elements
• Consistent with React

With Arrays

function Component() {
  return [
    <h1 key="title">Title</h1>,
    <p key="content">Content</p>
  ];
}

Disadvantages:

• Less readable
• Requires keys even for static elements
• Easy to forget keys

Practical Examples

Form Fields

function FormField({ label, name, type = 'text', error }) {
  return (
    <>
      <label htmlFor={name}>{label}</label>
      <input id={name} name={name} type={type} />
      {error && <span className="error">{error}</span>}
    </>
  );
}

function Form() {
  return (
    <form>
      <FormField label="Username" name="username" />
      <FormField label="Password" name="password" type="password" />
      <button type="submit">Login</button>
    </form>
  );
}

Best Practices

Performance Considerations

Fragments have no performance overhead - they don’t create extra DOM nodes or components. They’re just a syntax feature that tells Preact to render children directly.

// These are functionally equivalent in the DOM:

// With wrapper (creates <div> in DOM)
<div>
  <h1>Title</h1>
  <p>Text</p>
</div>

// With fragment (no wrapper in DOM)
<>
  <h1>Title</h1>
  <p>Text</p>
</>

// Resulting DOM for both:
<h1>Title</h1>
<p>Text</p>

Next Steps

Server-Side Rendering

Render Preact components on the server

TypeScript

Use Preact with TypeScript for type safety