25 lines
876 B
Plaintext
25 lines
876 B
Plaintext
== Why is this an issue?
|
|
|
|
React fragments are a feature in React that allows you to group multiple elements together without adding an extra DOM element. They are a way to return multiple elements from a component's render method without requiring a wrapping parent element.
|
|
|
|
However, a fragment is redundant if it contains only one child, or if it is the child of an HTML element.
|
|
|
|
[source,javascript,diff-id=1,diff-type=noncompliant]
|
|
----
|
|
<><Foo /></>; // Noncompliant: The fragment has only one child
|
|
<p><>foo</></p>; // Noncompliant: The fragment is the child of the HTML element 'p'
|
|
----
|
|
|
|
You can safely remove the redundant fragment while preserving the original behaviour.
|
|
|
|
[source,javascript,diff-id=1,diff-type=compliant]
|
|
----
|
|
<Foo />;
|
|
<p>foo</p>;
|
|
----
|
|
|
|
== Resources
|
|
=== Documentation
|
|
|
|
* React Documentation - https://react.dev/reference/react/Fragment[Fragments]
|