ESLint: Replace eslint-plugin-react-compiler with eslint-plugin-react-hooks#69962
Merged
Conversation
|
Size Change: -13 B (0%) Total Size: 7.87 MB 📦 View Changed
ℹ️ View Unchanged
|
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
tyxla
reviewed
Apr 22, 2025
Contributor
Author
|
@tyxla Thank you for the feedback! I will try to address all of your feedback. |
Member
|
Thanks, @t-hamano! We should be able to resolve e2e test failures, but ignore the test files. Linting them for React rules doesn't make sense. Additionally, we can keep this PR open while trying to resolve the remaining errors. This is what we did before enabling compiler-related rules. |
|
Flaky tests detected in 6d9116d. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/25204486064
|
t-hamano
force-pushed
the
use-eslint-plugin-react-hooks
branch
from
dbb9a54 to
eddf3e5
Compare
Contributor
Author
|
OK, I think I was able to apply the basic rule correctly.
I would like to investigate whether these directives are available for the new package. |
Contributor
Author
The As a result, there are 370 problems (36 errors, 334 warnings). Testing locallyRun with
Run with
|
Contributor
Author
|
Most errors are similar to the following: There have been similar issues reported regarding this: facebook/react#31722 |
Member
|
Fantastic work, @t-hamano! Most of the |
Member
|
Thank you for handling all this folks, much appreciated 🙇♂️ |
t-hamano
force-pushed
the
use-eslint-plugin-react-hooks
branch
from
4fc6b7c to
334a5ba
Compare
Contributor
Author
|
The 7.0 roadmap mentions upgrading to React 19, so I'd like to reopen this PR. However, I've noticed something that concerns me.
So, instead of replacing
|
t-hamano
force-pushed
the
use-eslint-plugin-react-hooks
branch
from
334a5ba to
d6be0b0
Compare
t-hamano
requested review from
a team,
ajitbohra,
nerrad and
ntwb
as code owners
github-actions
Bot
added
[Package] Data
Comment on lines
+113
to
+114
| "wait-on": "8.0.1", | ||
| "zod": "^4.0.0" |
Member
There was a problem hiding this comment.
Here is what I did
- Removed
zodfrom here - Ran
git checkout trunk package-lock.json && npm install - Then
npm run lint:jsruns successfully
Contributor
Author
There was a problem hiding this comment.
OK, let me give it a try.
The earlier root zod entry was added to satisfy eslint-plugin-react-hooks via zod-validation-error/v4 against chromium-bidi's exact zod@3 pin. Resetting the lockfile and reinstalling lets npm nest zod@4 and zod-validation-error@4 under eslint-plugin-react-hooks instead, leaving root zod at v3.23.8 (chromium-bidi) untouched. No extra root devDependency, no override gymnastics, and lint:js still passes. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
Contributor
Author
|
It seems that the rules in eslint-plugin-react-hooks v7 have been further refined, but I believe I have addressed all issues. I have temporarily disabled the following two rules globally due to an excessive number of warnings:
|
Member
Globally or selectively for components? I think we should keep https://react.dev/reference/rules/rules-of-hooks enabled. |
Contributor
Author
|
Sorry, my comment was incorrect 😅 The two rules I disabled globally are the following:
I will investigate whether these rules can be disabled in a more limited way. |
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 19 out of 20 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
… errors Comment out the `'off'` entries for `react-hooks/immutability` and `react-hooks/refs` so the existing violations are reported by ESLint. This lets us audit where and how often these rules fire across the codebase before deciding how to scope them. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
Co-authored-by: Copilot <[email protected]>
Contributor
Author
Here is the result: https://github.com/WordPress/gutenberg/actions/runs/25154597521/job/73733113283 After investigating with AI, it seems that errors are occurring in many packages. For now, it might be best to disable the rules globally. Details
react-hooks/immutability (104 warnings / 51 files)
react-hooks/refs (205 warnings / 86 files)
|
Contributor
|
Instead of disabling the rules entirely, can we maybe add current errors to bulk suppressions (and work on reducing them in follow-ups)? This will allow ESLint to flag correctly future breakages |
Member
Let's hope suppressed errors are fixed more often than the evergreen warnings we have currently 😄 |
Contributor
|
I'd hope that we can throw AI agents at most of them 🤞 |
Member
Effects are going to be the most risky migration, but I think after the React 19 upgrade, better migration skills can be used by separating "effect events". |
…pressions Instead of globally disabling these rules, suppress existing violations per file and disable the rules only for React Native sources, where legacy patterns require a separate migration. This keeps the rules active on new web code so further violations are caught.
Contributor
Author
|
Thanks for the feedback! I updated |
Member
That seems correct. I think adding small changelog entry for components package and hopefully all is green :) |
Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
A new immutability violation was introduced in packages/grid/src/resize-handle.tsx after the recent grid resize gesture changes. Add it to suppressions.json so the lint pass stays green until the underlying ref mutation pattern is reworked.
Contributor
Author
|
I regenerated |
1 task
adamsilverstein
added a commit
that referenced
this pull request
May 4, 2026
The trunk react-hooks plugin re-enable (#69962) and per-file suppression sweep flag pre-existing violations in suggestion-mode files and on grid/resize-handle.tsx that this branch has not yet picked up from trunk. Add per-file entries to the suppressions list so CI lint passes here without rewriting the underlying code. Refs and immutability fixes for these files belong with the broader hooks migration, not in this REST-permissions PR.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related PRs:
eslint-plugin-react-compiler#61788eslint-plugin-react-compilerto latest beta #67106Alternatives to #69945
What?
The Gutenberg repo has
eslint-plugin-react-compilerto make the code more React 19 and React compiler friendly.There was an announcement that the plugin was merged into
eslint-plugin-react-hooks, so let's try to use the new library.Why?
To improve code quality and prepare for React 19.
How?
Since we're using ESLint below 9.0.0, use Legacy Config, not Flat Config.Most of the errors are about React hooks not being called in the right places. For example:At this time, it is difficult to solve all these issues at once, so treat them as warnings. In follow-up, we may be able to resolve these warnings step by step. In particular, the warnings occurring in the E2E test files should be relatively easy to fix because they do not require backward compatibility. E2E related files were excluded from this lint check.I also appliedeslint-plugin-react-hooksto native files and files related to the interactivity api, whereeslint-plugin-react-compilerwas previously turned off.There don't seem to be any errors so farNative app related files were excluded from this lint check.All errors that occur with the default settings: https://github.com/WordPress/gutenberg/actions/runs/14594561408/job/40937280577Update: I have fixed as many warnings as possible from
eslint-plugin-react-hooksv7. However, I have globally disabled the following two rules, which generate a large number of warnings.react-hooks/immutabilityreact-hooks/refsTesting Instructions