What is a React Fragment?

0-2 years experience

1. 1You 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. 2If 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. 3Show me the JSX syntax for a fragment using both the shorthand and the long form.

2-5 years experience

1. 1We 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. 2During a refactor, a colleague replaced a <section> wrapper with a fragment, and the page's CSS grid layout broke. Why might that happen?
3. 3If a fragment is used inside a <table> element, what constraints exist and how would you handle them?

5-8 years experience

1. 1Our 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. 2You 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. 3Explain how fragments interact with React's reconciliation algorithm when sibling elements are reordered.

8+ years experience

1. 1We 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. 2In 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. 3If 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?