JSX Fragment Syntax

JSX Fragments let you group multiple elements without introducing an additional DOM element. They are useful when a component must return several sibling elements while keeping the rendered DOM structure clean.

A React component normally returns a single JSX root. A Fragment provides that root without requiring an actual HTML element such as a `div` or `section`.

The shorthand syntax is `<>...</>`. It is convenient when you only need grouping and do not need to supply a `key` or other props. React also supports the explicit `<React.Fragment>...</React.Fragment>` form.

Fragments are especially useful when an extra wrapper would affect CSS layout, semantics, accessibility, or DOM structure. For example, adding a `div` around children of a table row can produce invalid table markup, while a Fragment can group the JSX without adding a node.

When rendering a list, the explicit Fragment form can receive a `key`. The shorthand `<>...</>` syntax cannot receive props, so it cannot be used when the Fragment itself needs a key.

Key points

• Fragments group multiple JSX siblings without adding a DOM element.
• Use `<>...</>` for the concise Fragment syntax.
• Use `<React.Fragment>` when the Fragment needs a `key`.
• Fragments can prevent unnecessary wrapper elements from affecting layout or HTML structure.

Interview questions

Why would you use a Fragment in React?

A Fragment lets a component return multiple sibling JSX elements without adding an extra DOM wrapper. This keeps the resulting DOM smaller and can preserve the required HTML structure. It is useful when adding a `div` would interfere with CSS, semantics, or valid markup.

What is the difference between `<>...</>` and `<React.Fragment>`?

Both represent React Fragments and avoid adding a wrapper DOM element. The shorthand form is more concise, but it cannot receive props. The explicit form is needed when the Fragment must have a `key`, such as when a Fragment represents an item in a mapped list.

What happens to a Fragment in the rendered DOM?

The Fragment itself does not produce an HTML element. Its children are inserted into the surrounding DOM structure as siblings. Therefore, browser APIs and CSS selectors cannot target the Fragment as though it were a `div` or another element.

How do you render a list where each item contains multiple elements?

Use an explicit Fragment with a `key` when each list item needs to return multiple sibling elements. For example, `items.map(item => <React.Fragment key={item.id}>...</React.Fragment>)`. The key belongs on the Fragment because it is the outer element React uses to identify that list item.