What are React fragments?
Why Interviewers Ask This
This question tests conceptual clarity. Interviewers want to hear a precise, confident definition before moving to more complex React.js topics. It also reveals how well you can explain technical ideas to non-experts.
Answer
React Fragments let you return multiple elements from a component without adding an extra wrapping DOM node. Without fragments, you must wrap multiple siblings in a <div>, which adds unnecessary DOM nodes and can break CSS layouts (like flexbox or CSS grid where extra wrappers cause issues). Syntax: <React.Fragment><Child1 /><Child2 /></React.Fragment> or the shorthand <><Child1 /><Child2 /></>. The shorthand cannot accept any props; the long form accepts a key prop (useful when mapping over a list of fragments). Fragments render nothing to the DOM — the children appear as direct children of the parent in the actual DOM tree. Common use case: table rows (<tr> cannot have a wrapping <div> as a child), definition lists, CSS grid items, or any case where a semantic wrapper element would be incorrect or disruptive. Fragments make your component output cleaner and HTML-compliant.
Pro Tip
Before answering, structure your response: one-line definition → real-world analogy → concrete example from a project. This makes even complex React.js answers easy to follow.