Back to all comparisonsTechPref
React Component Patterns

Fragment Shorthand <> vs React.Fragment

Should React fragments use the concise JSX shorthand syntax <> or the explicit React.Fragment element? See how top TypeScript projects approach this common React styling choice.

98%

Use Fragment Shorthand

2%

Use React.Fragment Element

Fragment Shorthand

Use the compact <> shorthand for a clean, minimal fragment syntax.

Code Example

List.tsx (fragment shorthand)
function List({ items }: { items: string[] }) {
  return (
    <>
      <h2>Items</h2>
      <ul>
        {items.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </>
  );
}

Key Benefits

  • Shorter, less visually noisy syntax
  • No need to import React.Fragment explicitly
  • Widely adopted in modern React codebases
  • Reduces boilerplate in deeply nested JSX
  • Consistent with modern JSX transform
  • Encouraged by React documentation

Statistics

React.Fragment Element

Use the explicit React.Fragment element for fragments that may need a key or other props.

Code Example

List.tsx (React.Fragment element)
function List({ items }: { items: string[] }) {
  return (
    <React.Fragment>
      <h2>Items</h2>
      <ul>
        {items.map((item) => (
          <React.Fragment key={item}>
            <li>{item}</li>
          </React.Fragment>
        ))}
      </ul>
    </React.Fragment>
  );
}

Key Benefits

  • Supports the key prop for keyed fragments
  • Makes the fragment type explicit and searchable
  • Clearer intent when fragments hold semantic meaning
  • Consistent with other JSX element syntax
  • Easier to add props later without refactoring
  • More familiar to developers new to fragments

Statistics

Additional Insights

More data points to help you make an informed decision for your team.

986

repositories analyzed