What is a React Fragment and when should you use it?

What is a React Fragment and when should you use it?

• A. Fragment creates a new DOM element.
• B. Fragment replaces the root element of the app.
• C. Fragment lets you group a list of children without adding extra nodes to the DOM.
• D. Fragment is a separate component which always renders nothing.

Answer: (C)

Grouping multiple children without adding extra DOM nodes is what React Fragment enables. A fragment is invisible in the DOM, so a component can return several elements as siblings without wrapping them in an extra div or other element. This keeps the DOM clean and prevents layout or styling issues that wrappers can cause. You can use the short syntax for convenience when you don’t need any props, like <> ... </>, or the full form <React.Fragment> ... </React.Fragment> when you need to pass a key—for example, when rendering a list and you want each group to have a unique key. Fragments render nothing themselves, so no extra nodes appear in the DOM. Use them whenever you need to return multiple elements from a component or group a set of siblings without introducing an additional wrapper element, such as when rendering adjacent table rows or a sequence of list items where a wrapper would disrupt the markup.

Grouping multiple children without adding extra DOM nodes is what React Fragment enables. A fragment is invisible in the DOM, so a component can return several elements as siblings without wrapping them in an extra div or other element. This keeps the DOM clean and prevents layout or styling issues that wrappers can cause.

You can use the short syntax for convenience when you don’t need any props, like <> ... </>, or the full form <React.Fragment> ... </React.Fragment> when you need to pass a key—for example, when rendering a list and you want each group to have a unique key.

Fragments render nothing themselves, so no extra nodes appear in the DOM. Use them whenever you need to return multiple elements from a component or group a set of siblings without introducing an additional wrapper element, such as when rendering adjacent table rows or a sequence of list items where a wrapper would disrupt the markup.