Skip to content

ref(lint): ban React.Fragment in favor of named Fragment import#115939

Merged
natemoo-re merged 1 commit into
masterfrom
nm/lint/react-fragment
May 20, 2026
Merged

ref(lint): ban React.Fragment in favor of named Fragment import#115939
natemoo-re merged 1 commit into
masterfrom
nm/lint/react-fragment

Conversation

@natemoo-re
Copy link
Copy Markdown
Member

@natemoo-re natemoo-re commented May 20, 2026

Adds no-restricted-syntax rules banning both React.Fragment and <React.Fragment> — enforces import {Fragment} from 'react' instead. Same pattern as the existing React.forwardRef ban.

Fragment was already used in 936 files vs 23 files that used React.Fragment. These have been updated. Left snapshot strings and lint rule test fixtures alone.

Unfortunately not autofixable via no-restricted-syntax, but agents should take care of these automatically most of the time.

Add no-restricted-syntax rules for both MemberExpression and
JSXMemberExpression forms of React.Fragment, and fix all existing usage.
@natemoo-re natemoo-re requested review from a team as code owners May 20, 2026 19:50
@github-actions github-actions Bot added the Scope: Frontend Automatically applied to PRs that change frontend components label May 20, 2026
@github-actions
Copy link
Copy Markdown
Contributor

📊 Type Coverage Diff

✅ No new type safety issues introduced. Coverage: 93.57%

@natemoo-re natemoo-re requested a review from priscilawebdev May 20, 2026 19:54
Copy link
Copy Markdown
Member

@JoshuaKGoldberg JoshuaKGoldberg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯 yessss I was hoping to eventually bring up standardizing!

https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-fragments.md might be a good place to look that already does this with auto-fixing? If it doesn't have exactly what we prefer, maybe a good OSS contribution?

Edit: I mean, I don't think that rule has this style, but maybe there's a contribution opportunity to add that there, or to a separate stylistic rule?

@natemoo-re
Copy link
Copy Markdown
Member Author

@JoshuaKGoldberg that's a good point, we already use it to enforce the longhand! There's a help wanted issue so that would likely be accepted. In the middle of a bunch of stuff, but if I get any time I'll try to circle back.

@natemoo-re natemoo-re merged commit 5fd9671 into master May 20, 2026
73 checks passed
@natemoo-re natemoo-re deleted the nm/lint/react-fragment branch May 20, 2026 20:07
JonasBa pushed a commit that referenced this pull request May 21, 2026
)

Adds `no-restricted-syntax` rules banning both `React.Fragment` and
`<React.Fragment>` — enforces `import {Fragment} from 'react'` instead.
Same pattern as the existing `React.forwardRef` ban.

`Fragment` was already used in 936 files vs 23 files that used
`React.Fragment`. These have been updated. Left snapshot strings and
lint rule test fixtures alone.

Unfortunately not autofixable via `no-restricted-syntax`, but agents
should take care of these automatically most of the time.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants