SoFunction
Updated on 2025-04-13

Detailed explanation of the usage and differences between React Fragment and empty tags (＜＞＜/＞)

1. Basic concepts

1.1 The role of Fragment

Fragment allows you to combine lists of child elements without adding additional nodes to the DOM. It solves the limitation that React components must have a single element.

1.2 Two syntax forms

// 1. Explicit Fragment syntaximport React, { Fragment } from 'react';
function ExampleWithFragment() {
  return (
    <Fragment>
      <h1>Title</h1>
      <p>Paragraph</p>
    </Fragment>
  );
}
// 2. Phrase syntax (empty tag)function ExampleWithShortSyntax() {
  return (
    <>
      <h1>Title</h1>
      <p>Paragraph</p>
    </>
  );
}

2. The difference between Fragment and empty tags

2.1 key attribute support

// Fragment can receive key attributesfunction ListItems({ items }) {
  return (
    <dl>
      {(item => (
        <Fragment key={}>
          <dt>{}</dt>
          <dd>{}</dd>
        </Fragment>
      ))}
    </dl>
  );
}
// Empty tags do not support any attributes, including key// This will cause an errorfunction InvalidExample({ items }) {
  return (
    <dl>
      {(item => (
        <key={}> {/* mistake!  Not supported attributes */}
          <dt>{}</dt>
          <dd>{}</dd>
        </>
      ))}
    </dl>
  );
}

2.2 Syntax Support

// Fragment needs to be importedimport React, { Fragment } from 'react';
// Empty tags do not need to be imported, use them directlyfunction NoImportNeeded() {
  return (
    <>
      <div>Item 1</div>
      <div>Item 2</div>
    </>
  );
}

3. Use scenarios

3.1 List Rendering

// Render the list using Fragment (key required)function List({ items }) {
  return (
    <ul>
      {(item => (
        <Fragment key={}>
          <li>{}</li>
          <li>{}</li>
        </Fragment>
      ))}
    </ul>
  );
}
// Simple combination (using empty tags)function SimpleComponent() {
  return (
    <>
      <header />
      <main />
      <footer />
    </>
  );
}

3.2 Table structure

// Use Fragment in the tablefunction TableRow({ data }) {
  return (
    <Fragment>
      <td>{}</td>
      <td>{}</td>
      <td>{}</td>
    </Fragment>
  );
}
function Table({ items }) {
  return (
    <table>
      <tbody>
        {(item => (
          <tr key={}>
            <TableRow data={item} />
          </tr>
        ))}
      </tbody>
    </table>
  );
}

3.3 Conditional Rendering

function ConditionalRender({ isLoggedIn }) {
  return (
    <>
      <Header />
      {isLoggedIn ? (
        <>
          <UserDashboard />
          <UserSettings />
        </>
      ) : (
        <>
          <LoginForm />
          <RegisterLink />
        </>
      )}
      <Footer />
    </>
  );
}

4. Performance considerations

4.1 DOM structure

// Using Fragment or empty tags will not generate additional DOM nodesfunction OptimizedStructure() {
  return (
    &lt;&gt;
      &lt;div&gt;First&lt;/div&gt;
      &lt;div&gt;Second&lt;/div&gt;
    &lt;/&gt;
  );
}
// Rendering result:// &lt;div&gt;First&lt;/div&gt;
// &lt;div&gt;Second&lt;/div&gt;
// instead:// &lt;div&gt;
//   &lt;div&gt;First&lt;/div&gt;
//   &lt;div&gt;Second&lt;/div&gt;
// &lt;/div&gt;

4.2 Memory usage

// Neither Fragment nor empty tags create additional DOM nodes, so there is less memory usagefunction MemoryEfficient() {
  return (
    &lt;&gt;
      {({ length: 1000 }).map((_, index) =&gt; (
        &lt;Fragment key={index}&gt;
          &lt;span&gt;Item&lt;/span&gt;
          &lt;span&gt;Description&lt;/span&gt;
        &lt;/Fragment&gt;
      ))}
    &lt;/&gt;
  );
}

5. Best Practices

5.1 Select a suggestion

Use empty tags (<>)</>) when：

  • No need to pass key attributes
  • Pursuing concise code
  • Just a simple package function is required

Use Fragment when：

  • Need to use the key attribute (such as in the list)
  • Need clear semantics
  • Need explicit types in TypeScript

5.2 Code Style

// Recommended: Keep consistent indentationfunction GoodStyle() {
  return (
    &lt;&gt;
      &lt;div&gt;Item 1&lt;/div&gt;
      &lt;div&gt;Item 2&lt;/div&gt;
    &lt;/&gt;
  );
}
// Not recommended: chaotic structurefunction BadStyle() {
  return &lt;&gt;
    &lt;div&gt;Item 1&lt;/div&gt;
      &lt;div&gt;Item 2&lt;/div&gt;
    &lt;/&gt;;
}

6. FAQs and Solutions

6.1 TypeScript Support

// Use Fragment in TypeScriptimport React, { Fragment } from 'react';
interface Props {
  items: Array&lt;{ id: string; text: string }&gt;;
}
function TypeScriptExample({ items }: Props) {
  return (
    &lt;&gt;
      {(item =&gt; (
        &lt;Fragment key={}&gt;
          &lt;div&gt;{}&lt;/div&gt;
        &lt;/Fragment&gt;
      ))}
    &lt;/&gt;
  );
}

6.2 Nested Use

// Fragment can be used in nestfunction NestedFragments() {
  return (
    &lt;&gt;
      &lt;div&gt;Level 1&lt;/div&gt;
      &lt;Fragment&gt;
        &lt;div&gt;Level 2.1&lt;/div&gt;
        &lt;&gt;
          &lt;div&gt;Level 3.1&lt;/div&gt;
          &lt;div&gt;Level 3.2&lt;/div&gt;
        &lt;/&gt;
        &lt;div&gt;Level 2.2&lt;/div&gt;
      &lt;/Fragment&gt;
    &lt;/&gt;
  );
}

7. Summary

7.1 Use scenario comparison

Fragment:

When a key attribute is required, it is necessary to clarify the code structure in TypeScript that needs to be semanticized.

Empty tags:

Simple component wrapping does not require any attributes to pursue concise code 7.2 Best practice recommendations Prioritize the use of empty tag syntax when using keys. Use Fragment to keep the code style consistent and pay attention to performance optimization.

This is the end of this article about the detailed and differences between React Fragment and empty tags (＜＞＜/＞). For more related React Fragment empty tags (＜＞＜/＞), please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!