> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/preactjs/preact/llms.txt
> Use this file to discover all available pages before exploring further.

# Fragment

> Render multiple children without a wrapper element

A special component that allows grouping multiple children without adding extra DOM nodes.

## Signature

```typescript theme={null}
const Fragment: FunctionComponent<{}>
```

## Type Definition

```typescript theme={null}
interface FunctionComponent<P = {}> {
  (props: RenderableProps<P>, context?: any): ComponentChildren;
  displayName?: string;
}
```

## Description

`Fragment` is a built-in component that renders its children directly without creating a wrapper DOM element. It's useful when you need to return multiple elements from a component but don't want to add an extra `<div>` or other container to the DOM.

## Implementation

The Fragment is implemented in `src/create-element.js:77` as a simple pass-through function:

```javascript theme={null}
export function Fragment(props) {
  return props.children;
}
```

## Usage Examples

### Basic Fragment

```jsx theme={null}
import { Fragment } from 'preact';

function List() {
  return (
    <Fragment>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </Fragment>
  );
}

// Renders:
// <li>Item 1</li>
// <li>Item 2</li>
// <li>Item 3</li>
// (No wrapper element)
```

### Short Syntax

```jsx theme={null}
import { h, Fragment } from 'preact';

function Columns() {
  return (
    <>
      <td>Column 1</td>
      <td>Column 2</td>
      <td>Column 3</td>
    </>
  );
}

// Equivalent to using <Fragment>
```

### Conditional Rendering

```jsx theme={null}
import { Fragment } from 'preact';

function UserInfo({ user, showDetails }) {
  return (
    <div>
      <h2>{user.name}</h2>
      {showDetails && (
        <Fragment>
          <p>Email: {user.email}</p>
          <p>Phone: {user.phone}</p>
          <p>Address: {user.address}</p>
        </Fragment>
      )}
    </div>
  );
}
```

### Lists and Keys

```jsx theme={null}
import { Fragment } from 'preact';

function Glossary({ items }) {
  return (
    <dl>
      {items.map(item => (
        <Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </Fragment>
      ))}
    </dl>
  );
}
```

### Multiple Return Elements

```jsx theme={null}
import { Fragment } from 'preact';

function Layout() {
  return (
    <Fragment>
      <header>
        <h1>My App</h1>
      </header>
      <main>
        <p>Content goes here</p>
      </main>
      <footer>
        <p>Footer content</p>
      </footer>
    </Fragment>
  );
}
```

### With Map

```jsx theme={null}
import { Fragment } from 'preact';

function Table({ rows }) {
  return (
    <table>
      <tbody>
        {rows.map((row, i) => (
          <Fragment key={i}>
            <tr>
              <td>{row.label}</td>
              <td>{row.value}</td>
            </tr>
            {row.hasDetail && (
              <tr>
                <td colSpan={2}>{row.detail}</td>
              </tr>
            )}
          </Fragment>
        ))}
      </tbody>
    </table>
  );
}
```

### Nested Fragments

```jsx theme={null}
import { Fragment } from 'preact';

function ComplexLayout({ showSidebar, showHeader }) {
  return (
    <Fragment>
      {showHeader && (
        <Fragment>
          <nav>Navigation</nav>
          <header>Header</header>
        </Fragment>
      )}
      <main>Content</main>
      {showSidebar && <aside>Sidebar</aside>}
    </Fragment>
  );
}
```

## JSX Configuration

To use the `<>` short syntax, configure your JSX transform:

**TypeScript (tsconfig.json)**

```json theme={null}
{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment"
  }
}
```

**Babel (.babelrc)**

```json theme={null}
{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "pragma": "h",
      "pragmaFrag": "Fragment"
    }]
  ]
}
```

**Import Configuration**

```jsx theme={null}
/** @jsx h */
/** @jsxFrag Fragment */
import { h, Fragment } from 'preact';
```

## When to Use Fragments

### Good Use Cases

```jsx theme={null}
// ✅ Returning multiple elements
function Header() {
  return (
    <>
      <title>Page Title</title>
      <meta name="description" content="Description" />
    </>
  );
}

// ✅ Valid table structures
function Columns() {
  return (
    <>
      <td>A</td>
      <td>B</td>
    </>
  );
}

// ✅ Conditional groups
function Content({ showExtra }) {
  return (
    <div>
      <p>Always visible</p>
      {showExtra && (
        <>
          <p>Extra 1</p>
          <p>Extra 2</p>
        </>
      )}
    </div>
  );
}
```

### When Not Needed

```jsx theme={null}
// ❌ Unnecessary wrapper
function App() {
  return (
    <Fragment>
      <div>Only one child</div>
    </Fragment>
  );
}

// ✅ Better - no Fragment needed
function App() {
  return <div>Only one child</div>;
}
```

## Key Prop Support

Fragments support the `key` prop for lists:

```jsx theme={null}
function Items({ items }) {
  return items.map(item => (
    <Fragment key={item.id}>
      <dt>{item.term}</dt>
      <dd>{item.definition}</dd>
    </Fragment>
  ));
}
```

**Note:** Fragments do not support other props besides `key` and `children`.

## Differences from Wrapper Elements

```jsx theme={null}
// With Fragment
function WithFragment() {
  return (
    <>
      <span>A</span>
      <span>B</span>
    </>
  );
}
// Renders: <span>A</span><span>B</span>

// With div wrapper
function WithDiv() {
  return (
    <div>
      <span>A</span>
      <span>B</span>
    </div>
  );
}
// Renders: <div><span>A</span><span>B</span></div>
```

## Performance Considerations

* Fragments have zero overhead - they don't create DOM nodes
* No CSS/layout impact from wrapper elements
* Slightly faster than rendering a wrapper element
* Ideal for keeping DOM structure clean and semantic

## Related APIs

* [`h`](/api/h) - Create virtual nodes
* [`createElement`](/api/create-element) - React-compatible node creation
* [`render`](/api/render) - Render components to DOM