Skip to content

Repo: migrate eslint-plugin-react to @eslint-react/eslint-plugin #11214

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JounQin opened this issue May 14, 2025 · 5 comments
Open

Repo: migrate eslint-plugin-react to @eslint-react/eslint-plugin #11214

JounQin opened this issue May 14, 2025 · 5 comments
Labels
awaiting response Issues waiting for a reply from the OP or another party repo maintenance things to do with maintenance of the repo, and not with code/docs

Comments

@JounQin
Copy link
Contributor

JounQin commented May 14, 2025

Suggestion

https://github.com/Rel1cx/eslint-react is much modern and performant by design.

Additional Info

No response

@JounQin JounQin added triage Waiting for team members to take a look repo maintenance things to do with maintenance of the repo, and not with code/docs labels May 14, 2025
@JoshuaKGoldberg
Copy link
Member

JoshuaKGoldberg commented May 14, 2025

is much modern and performant by design

I believe you, but can you back this up please? 🙂

As in: I'm totally on board with e18e initiatives, just we need details before jumping onto something new.

  • Modern: what are the API differences? Why are they better?
  • Performance: got stats? what's different?

@JoshuaKGoldberg JoshuaKGoldberg added awaiting response Issues waiting for a reply from the OP or another party and removed triage Waiting for team members to take a look labels May 14, 2025
@JounQin
Copy link
Contributor Author

JounQin commented May 14, 2025

I believe @Rel1cx may have better answer.

@JounQin
Copy link
Contributor Author

JounQin commented May 18, 2025

@JoshuaKGoldberg

Just found https://eslint-react.xyz/docs/faq

Does this make sense for you?

@JoshuaKGoldberg
Copy link
Member

It makes sense but doesn't answer my questions 🙂. This is a point of feedback that I've had on a lot of e18e-style initiatives: we need real evidence. That FAQ is a good FAQ for high-level ideas of the plugin. But I want actual answers to:

  • Modern: what are the API differences? Why are they better?
  • Performance: got stats? what's different?

The performance point in particular is not answered there. When someone says something has better performance, that needs to be backed up with actual measurements / numbers. People make incorrect performance claims all the time. Oftentimes it's because they measure in some types of projects but not others.

FWIW I like the new eslint-react project and think it has a lot of good stuff in it. But we need to do due diligence before jumping to something new.

@Rel1cx
Copy link

Rel1cx commented Jun 10, 2025

Modern: what are the API differences? Why are they better?
Performance: got stats? what's different?

@JoshuaKGoldberg We have a lot to discuss about both aspects, but for now, we’ll highlight just a few key points here (even if this issue is approved now, we recommend waiting until after the release of eslint-react 2.0.0 to proceed with migration).

Modern Aspect: The most noteworthy highlight is Context-aware linting that includes the Project-awareness via the typescript-eslint's APIs, see Configure Project Config. This is crucial for how JSX-related rules handle warnings, provide accurate error messages, and correct auto-fixes.

Performance: We’ve achieved significant measurable improvements. For specific metrics, refer to the benchmarks in react-linter-benchmark.

Highlighted Rule Timings Differences

Rule Time (ms) Times Faster
react/destructuring-assignment 1010.478
@eslint-react/prefer-destructuring-assignment 155.435 6.5x
---
react/no-direct-mutation-state 1049.529
@eslint-react/no-direct-mutation-state 7.334 142.9x
---
react/no-unstable-nested-components 980.757
@eslint-react/no-nested-component-definitions 146.133 6.7x
---
react/display-name 486.888
@eslint-react/no-missing-component-display-name 25.449 19.1x
@eslint-react/no-missing-context-display-name 15.547 7.4x
---
react/hook-use-state 465.937
@eslint-react/naming-convention/use-state 65.085 7.1x
---
react/jsx-no-constructed-context-values 461.107
@eslint-react/no-unstable-context-value 134.070 3.4x
---
react/no-object-type-as-default-prop 415.972
@eslint-react/no-unstable-default-props 110.144 3.7x
---
react/no-array-index-key 329.006
@eslint-react/no-array-index-key 97.415 3.3x
---
react/no-access-state-in-setstate 321.341
@eslint-react/no-access-state-in-setstate 20.683 15.5x
---
react/jsx-uses-react 247.526
@eslint-react/jsx-uses-react 14.471 17.1x
---
react/no-did-mount-set-state 121.180
@eslint-react/no-set-state-in-component-did-mount 12.296 9.8x
---
react/no-did-update-set-state 91.228
@eslint-react/no-set-state-in-component-did-update 12.332 7.3x
---
react/no-string-refs 60.956
@eslint-react/no-string-refs 21.642 2.8x

(lint all the .ts and .tsx files in three different types of GitHub repos - chakra-ui, tldraw, and refine at once, under the same environment)

Let me know if you'd like further information! 😊

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
awaiting response Issues waiting for a reply from the OP or another party repo maintenance things to do with maintenance of the repo, and not with code/docs
Projects
None yet
Development

No branches or pull requests

3 participants