Blog>
Snippets

Nested Fragments

Present nesting of fragments within other fragments to build a component tree that doesn't produce excess DOM nodes.
import React from 'react';

function MyComponent() {
  return (
    <>
      <h1>Welcome to my app</h1>
      <>
        <p>This is a nested fragment</p>
        <>
          <span>Nested even deeper</span>
        </>
      </>
    </>
  );
}

export default MyComponent;
This example demonstrates how to use React Fragments to group a list of elements without adding extra nodes to the DOM. The '<></>' syntax represents a Fragment. Nested fragments are used here to avoid unnecessary divs or other wrapping elements, preserving a clean DOM structure.