What is a React Fragment?

1
A React Fragment is a component that allows you to group multiple elements without adding an additional DOM node to the rendered output.
2
It helps to avoid unnecessary nesting when you need to return adjacent JSX elements from a component

Two Syntax formats:

The only attribute a Fragment can accept is the key prop. This is necessary when you are rendering a list of fragments in a loop. You must use the explicit <Fragment> syntax if you need to pass a key; the shorthand <>...</> does not support attributes.

Difficulty: 4/10

Topics: JSX, DOM hierarchy, performance

Scenario Questions

0-2 years experience

1
You need to return two sibling <div> elements from a component without adding an extra wrapper element to the DOM. How would you do that using React?
2
If you accidentally wrap a list of items in a <div> instead of a fragment, what effect does that have on the rendered HTML and CSS layout?
3
Show me the JSX syntax for a fragment using both the shorthand and the long form.

2-5 years experience

1
We have a component that maps over an array and returns multiple rows, but we see a warning about keys. How would you use fragments to group each row's cells while still providing a key?
2
During a refactor, a colleague replaced a <section> wrapper with a fragment, and the page's CSS grid layout broke. Why might that happen?
3
If a fragment is used inside a <table> element, what constraints exist and how would you handle them?

5-8 years experience

1
Our UI library renders large lists with virtual scrolling. Discuss the trade‑offs of using fragments versus extra wrapper elements for each item in terms of performance and DOM size.
2
You need to expose a component's internal structure for testing but want to keep the DOM minimal in production. How could fragments help, and what pitfalls should you watch for at scale?
3
Explain how fragments interact with React's reconciliation algorithm when sibling elements are reordered.

8+ years experience

1
We are planning a migration from a legacy codebase that heavily nests layout divs to a more semantic markup using fragments. What architectural considerations and tooling changes would you propose to ensure consistency across teams?
2
In a large monorepo, some teams use the shorthand <> syntax while others use <React.Fragment>. How would you enforce a standard and what impact does this have on TypeScript typings and linting?
3
If we introduce a custom Babel plugin that transforms fragments into a specific wrapper for analytics, what are the risks and how would you mitigate them?

Follow-up Questions

❓What’s the difference between the long‑form and shorthand fragment syntax?
❓Can a fragment receive props or attributes?
❓How does React treat fragments during server‑side rendering?