eslint-plugin-react
eslint-plugin-react copied to clipboard
jsx-eslint
[New Rule] prefer-function-component
Adds a new rule to enforce the use of function components over class components. Related issue: https://github.com/yannickcr/eslint-plugin-react/issues/2860
Users wanting to try this lint rule today:
This functionality exists in eslint-plugin-react-prefer-function-component.
npm install eslint-plugin-react-prefer-function-component
#2860 doesn't have a "help wanted" or "accepted" label on it - I continue to be unconvinced this is actually a good rule to have. Some things must be class components, and other things are more clear/better as class components; I don't think a lint rule is naunced enough to be appropriate.
That said, I did ask you to open the PR, so I'll give it a good faith review.
I wonder if perhaps this could be a more generic "prefer-component-style" rule, that can be used to force class components or force function components?
Yeah that seems reasonable to me, the motivating intent here is to keep consistency in a code base.
Looking at the recent work by the Relay team (and their close collaboration with the React team) and the React concurrent mode work my impression is that the longer term direction of React is going to be towards all function components, but that is speculative right now.
#2860 doesn't have a "help wanted" or "accepted" label on it - I continue to be unconvinced this is actually a good rule to have. Some things must be class components, and other things are more clear/better as class components; I don't think a lint rule is naunced enough to be appropriate.
That said, I did ask you to open the PR, so I'll give it a good faith review.
I don't have any expectations here, just something to consider. This can always sit or be closed and reopened in the future. I just want things to be code complete (or close) while I have the time.
Just wanted to add a voice of support for this approach. prefer-component-style does seem like a reasonable modification to make in the name of flexibility. That said, my/our intended use case is to steer toward function components, and I suspect this will be the case for the majority of codebases, as old class component lifecycle methods become deprecated, and the React community further embraces hooks as a standard. Either way, this seems like a valuable addition to eslint-plugin-react
Just wanted to pop in to say I'd like to have this lint rule too. As pointed out elsewhere, the biggest value here is in enabling consistency across a codebase and the ability to reuse logic between components easily.
In my case, another big use is to use these lint rules to gauge how well we are/are not doing in paying down tech debt over time on an old-ish codebase where we're about 50/50 on function components versus class components. Given the large-ish size of our org and codebase, this has to be automated via tooling so we can create dashboards/reports/etc.
Does the
function-component-definitionrule meet everyone's use cases here?
No that rule enforces the function definition and the request here is to enforce function components instead of class components. It’s complementary but none overlapping.
Does the
function-component-definitionrule meet everyone's use cases here?No that rule enforces the function definition and the request here is to enforce function components instead of class components. It’s complementary but none overlapping.
Agree with Tate. This rule, while useful, doesn't solve the issue of preventing the introduction of class components into a codebase.
Looks like this PR has gone dormant. I also support the addition of this rule. It would be useful when managing a codebase whose contributors have different levels of familiarity with React, e.g., a mix of FE specialists and mid-stack or backend devs that are more used to class-heavy OO languages.
Has anything changed from the maintainer's point of view over the last year? I feel like the greater community has almost fully abandoned classes.
@robwierzbowski nope, nothing's changed there, and ErrorBoundary in particular still is required to be a class component.
That's true. I believe this code allows error boundaries to remain class components. As you discussed above, whether this is hardcoded true or an option, the issue could be addressed.