What are React Fragments and why are they used?

Question

Accepted Answer

A React Fragment lets you group multiple elements without adding an extra DOM node . Returning a list of siblings from a component requires a single root, but you don't always want a wrapper div in the output. Two syntaxes — explicit ... or short form <>... . Cleaner DOM — avoids unnecessary div wrappers that break flexbox/grid layouts or CSS expectations. Lists with keys — use when mapping; the short form doesn't accept attributes. Required for table rows / list items — you can't wrap or

elements in a div ; fragments fix that. Zero runtime cost — doesn't emit anything to the DOM. Know both syntaxes (<> and ). The key use case to mention: keyed Fragments in lists. Explain that Fragments avoid breaking CSS layouts and invalid HTML structures.