Migrate from eslint-plugin-react to @eslint-react/eslint-plugin for ESLint 10 - #3017
Closed
tanem wants to merge 2 commits into
Closed
Migrate from eslint-plugin-react to @eslint-react/eslint-plugin for ESLint 10#3017tanem wants to merge 2 commits into
tanem wants to merge 2 commits into
Conversation
…SLint 10 eslint-plugin-react@7.37.5 caps its peer at eslint ^9.7 and is runtime-incompatible with ESLint 10 (upstream #3977/#3970 open), making it the sole blocker for the ESLint 10 upgrade. Switch to @eslint-react/eslint-plugin@5.8.4 — a modern, TypeScript-first replacement that supports ESLint 10 today. Accept the loss of jsx-sort-props (no equivalent in the new plugin). Also bump eslint-plugin-react-hooks to 7.1.1 which adds eslint ^10 peer support. Violations surfaced by the new plugin: - Turn off @eslint-react/exhaustive-deps (covered by react-hooks/exhaustive-deps) - Turn off @eslint-react/naming-convention-ref-name (library internals use descriptive ref names intentionally) - Turn off @eslint-react/use-state (intentional pattern in useGetSetState) - Fix no-useless-assignment in useGetSetState (++num -> num + 1) - Update next-app-router example: use() over useContext(), <Context> over <Context.Provider> (React 19 conventions) Supersedes Renovate PR #2988.
Re-enable naming-convention-ref-name and use-state by fixing the code: rename useRef bindings to end in Ref and replace the useState-based force-update in useGetSetState with useReducer (the idiomatic pattern). Replace the single @eslint-react/exhaustive-deps off with an explicit dedup pair that keeps eslint-plugin-react-hooks as the hooks authority: @eslint-react/exhaustive-deps and @eslint-react/rules-of-hooks are both disabled because react-hooks/exhaustive-deps and react-hooks/rules-of-hooks (the React team's canonical implementations) already cover those concerns.
3 tasks
Owner
Author
|
Superseded by #3018, now merged as 14fffc7. That PR does the same migration but keeps it separate from the ESLint 10 bump itself, matching the sequence already proven in the sibling
Closing in favour of that. |
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
1 participant
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.
Summary
eslint-plugin-react@7.37.5with@eslint-react/eslint-plugin@5.8.4— the blocker for ESLint 10 adoption. The old plugin caps its peer ateslint ^9.7and has a known runtime incompatibility with ESLint 10 (jsx-eslint/eslint-plugin-react#3977, #3970).eslint9.39.3 → 10.4.0,@eslint/js9.39.3 → 10.0.1, andeslint-plugin-react-hooks7.0.1 → 7.1.1 (adds ESLint 10 peer support).react/jsx-sort-props(no equivalent in@eslint-react).@eslint-react/exhaustive-deps(covered byreact-hooks/exhaustive-deps),@eslint-react/naming-convention-ref-name(library internals use descriptive ref names intentionally), and@eslint-react/use-state(intentional pattern inuseGetSetState).no-useless-assignmentlint error insrc/useGetSetState.ts(++num→num + 1).examples/next-app-router/components/NavigationProgress.tsxwith React 19 patterns:use()overuseContext(),<Context>over<Context.Provider>.Supersedes and closes #2988.
Test plan
npm run lint— clean (no errors or warnings)npm run check:types— passesnpm test— full suite passes: format, types, lint, build, test:cjs, test:cjsprod, test:es, test:react (React 16.14 / 17.0 / 18.0 / 18.3 / 19.0), test:src (100% coverage), test:umd, test:umdprod