[New Rule] prefer-function-component

[tatethurston]

Adds a new rule to enforce the use of function components over class components. Related issue: #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

[ljharb]

#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.

[ljharb]

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?

[ljharb]

i'm not clear on why this is an option. A class component that's an error boundary can never be a functional component (pending changes from React itself), so there'd never be any value in this rule warning on it. I think that this option shouldn't be an option, it should just be hardcoded to true.

[tatethurston]

Many codebases I've seen don't implement error boundaries from scratch in their code base, instead they import library solutions that use error boundaries internally. I made this configurable (though with the default value of true so most clients can ignore it) for clients who want all class component usage to be flagged. This also provides a migration path should React release functional component error boundaries.

[tatethurston]

Also, Preact does offer functional error boundaries via a hook, so this would be valuable for those users.

[ljharb]

is there a reason this rule isn't fixable?

Any component with a constructor body or class methods, of course, couldn't be fixable, but the example in the readme could.

[tatethurston]

Partially fixable seemed odd to me on first thought, but the same logic as used by prefer-stateless-function could be used here.

[ljharb]

Lots of rules are partially fixable; obv it's ideal when things are fully fixable tho.

Actually wait, I'd forgotten about prefer-stateless-function. How is this rule different from that one? https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md

[tatethurston]

I think #2860 explains the difference well:

The prefer-stateless-function rule is not enough for this case, since it allows class components provided they have a state or additional methods (like handlers defined as a class methods). It is not possible to forbid the use of state altogether (you can disable setState, but defining state is still allowed, silencing prefer-stateless-function), and filtering class methods using eslint rules without interfering with other code is complicated.

[ljharb]

i see, so this is a stronger thing than that, where prefer-stateless-function pushes SFCs when possible, this rule would ban class components entirely in favor of hook-using SFCs. Gotcha.

[tatethurston]

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.

[tatethurston]

#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.

[rusackas]

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

[nebrius]

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.

[ljharb]

Does the function-component-definition rule meet everyone's use cases here?

[tatethurston]

Does the function-component-definition rule 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.

[nebrius]

Does the function-component-definition rule 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.

[robwierzbowski]

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.

[ljharb]

@robwierzbowski nope, nothing's changed there, and ErrorBoundary in particular still is required to be a class component.

[robwierzbowski]

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.