You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
# Enforce shorthand or standard form for React fragments (react/jsx-fragments)
2
+
3
+
In JSX, a React fragment is created either with `<React.Fragment>...</React.Fragment>`, or, using the shorthand syntax, `<>...</>`. This rule allows you to enforce one way or the other.
4
+
5
+
Support for fragments was added in React v16.2, so the rule will warn on either of these forms if an older React version is specified in [shared settings][shared_settings].
6
+
7
+
## Rule Options
8
+
9
+
```js
10
+
...
11
+
"react/jsx-fragments": [<enabled>, <mode>]
12
+
...
13
+
```
14
+
15
+
### `syntax` mode
16
+
17
+
This is the default mode. It will enforce the shorthand syntax for React fragments, with one exception. [Keys or attributes are not supported by the shorthand syntax][short_syntax], so the rule will not warn on standard-form fragments that use those.
18
+
19
+
The following pattern is considered a warning:
20
+
21
+
```jsx
22
+
<React.Fragment><Foo /></React.Fragment>
23
+
```
24
+
25
+
The following patterns are **not** considered warnings:
Copy file name to clipboardExpand all lines: docs/rules/jsx-no-bind.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# No `.bind()` or Arrow Functions in JSX Props (react/jsx-no-bind)
2
2
3
-
A `bind` call or [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) in a JSX prop will create a brand new function on every single render. This is bad for performance, as it will result in the garbage collector being invoked way more than is necessary. It may also cause unnecessary re-renders if a brand new function is passed as a prop to a component that uses reference equality check on the prop to determine if it should update.
3
+
A `bind` call or [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) in a JSX prop will create a brand new function on every single render. This is bad for performance, as it may cause unnecessary re-renders if a brand new function is passed as a prop to a component that uses reference equality check on the prop to determine if it should update.
Copy file name to clipboardExpand all lines: docs/rules/jsx-sort-props.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -92,7 +92,7 @@ When `reservedFirst` is defined, React reserved props (`children`, `dangerouslyS
92
92
93
93
If given as an array, the array's values will override the default list of reserved props. **Note**: the values in the array may only be a **subset** of React reserved props.
94
94
95
-
With `reservedFirst: [2, ["key"]]`, the following will **not** warn:
95
+
With `reservedFirst: ["key"]`, the following will **not** warn:
0 commit comments