feat(linter): Implement react/prefer-function-component

[connorshea]

This is based on the rule provided in eslint-plugin-react-prefer-function-component. This rule is proposed for eslint-plugin-react, but so far not merged.

The goal of the rule is pretty simple. We want to discourage class components like this, as they are not used very often in modern React:

class Foo extends React.Component {
  render() {
    return <div>{this.props.foo}</div>;
  }
}

class Bar extends React.PureComponent {
  render() {
    return <div>{this.props.bar}</div>;
  }
}

And encourage function components like this:

const Foo = function(props) {
  return <div>{props.foo}</div>;
};

const Bar = ({ bar }) => <div>{bar}</div>;

• Original Rule Source
• Original Rule Tests

The original eslint-plugin-react plugin lacks a lint rule like this, which is very silly as it has one for preferring class components (which are notably discouraged by React itself nowadays). It does have prefer-stateless-functions, however I would strongly recommend we mark that rule as unsupported in favor of this rule. If you look at the tests for prefer-stateless-function, you can see how lenient it is in allowing class components (anything with a method other than render() is allowed, basically). And it has the usual eslint-plugin-react smells of supporting things from many many many years ago. This rule is much more straight-forward, and generally a better implementation of the concept.

We could, alternatively, implement this based on this rule from @eslint-react/eslint-plugin (different from eslint-plugin-react), however I generally prefer the prefer-function-component name and the @eslint-react rule was generally going to be more complex to implement.

AI Disclosure: Generated with Claude Code w/ Opus 4.5, after prep work by me. Tested and reviewed by me. I created the rule via the rulegen tooling, then manually copied over the initial set of test cases myself. I then had Claude create the remaining tests from the original source code. From looking through the tests, I am confident in the quality/accuracy of the ported tests, and will be doing further testing via oxc-ecosystem-ci.

Ecosystem CI run: https://github.com/oxc-project/oxc-ecosystem-ci/actions/runs/22334972119

Bsky for example.

main:

Found 0 warnings and 78356 errors.
Finished in 1.7s on 1553 files with 629 rules using 4 threads.

this PR:

Found 0 warnings and 78361 errors.
Finished in 1.5s on 1553 files with 630 rules using 4 threads.

The 5 extra violations are due to this rule, and all 5 are correctly catching class component usage. In terms of performance, there's clearly no noticeable difference here, even on a React codebase of a decent size.

[codspeed-hq]

Merging this PR will not alter performance

✅ 4 untouched benchmarks
⏩ 52 skipped benchmarks¹

---

_{Comparing react-prefer-func-comp (296000d) with main (871f9d9)}

Footnotes

1. 52 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

[Copilot]

Pull request overview

Adds a new React lint rule to discourage class components in favor of function components, based on eslint-plugin-react-prefer-function-component, and wires it into the linter’s rule registry and snapshots.

Changes:

• Implement react/prefer-function-component with configurable allowances for error boundaries and JSX utility classes.
• Add comprehensive rule tests and a snapshot for expected diagnostics.
• Register the new rule in the React module list and generated rule enum/runner plumbing.

Reviewed changes

Copilot reviewed 3 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
crates/oxc_linter/src/rules/react/prefer_function_component.rs	New rule implementation, config, and test coverage/snapshot generation.
crates/oxc_linter/src/snapshots/react_prefer_function_component.snap	Snapshot output for the new rule’s diagnostics.
crates/oxc_linter/src/rules.rs	Exposes the new React rule module.
crates/oxc_linter/src/generated/rules_enum.rs	Adds the rule to the generated enum, IDs, and metadata dispatch.
crates/oxc_linter/src/generated/rule_runner_impls.rs	Registers the rule runner node type (Class) for execution.

[connorshea]

Tested on the bsky codebase and confirmed that all of these are correct violations that should indeed be showing up:

  × eslint-plugin-react(prefer-function-component): Class component should be written as a function component.
    ╭─[modules/bottom-sheet/src/BottomSheetNativeComponent.tsx:40:14]
 39 │ 
 40 │ export class BottomSheetNativeComponent extends React.Component<
    ·              ──────────────────────────
 41 │   BottomSheetViewProps,
    ╰────
  help: Convert the class component to a function component.
  note: See https://react.dev/reference/react/Component#migrating-a-simple-component-from-a-class-to-a-function

  × eslint-plugin-react(prefer-function-component): Class component should be written as a function component.
    ╭─[__mocks__/react-native-svg.js:7:10]
  6 │     const createComponent = function (name) {
  7 │ ╭─▶   return class extends React.Component {
  8 │ │       // overwrite the displayName, since this is a class created dynamically
  9 │ │       static displayName = name
 10 │ │   
 11 │ │       render() {
 12 │ │         return React.createElement(name, this.props, this.props.children)
 13 │ │       }
 14 │ ╰─▶   }
 15 │     }
    ╰────
  help: Convert the class component to a function component.
  note: See https://react.dev/reference/react/Component#migrating-a-simple-component-from-a-class-to-a-function

  × eslint-plugin-react(prefer-function-component): Class component should be written as a function component.
    ╭─[__mocks__/@gorhom/bottom-sheet.tsx:10:7]
  9 │ }
 10 │ class BottomSheet extends React.Component<{
    ·       ───────────
 11 │   onClose?: () => void
    ╰────
  help: Convert the class component to a function component.
  note: See https://react.dev/reference/react/Component#migrating-a-simple-component-from-a-class-to-a-function

  × eslint-plugin-react(prefer-function-component): Class component should be written as a function component.
   ╭─[modules/expo-bluesky-gif-view/src/GifView.web.tsx:6:14]
 5 │ 
 6 │ export class GifView extends React.PureComponent<GifViewProps> {
   ·              ───────
 7 │   private readonly videoPlayerRef: React.RefObject<HTMLMediaElement> =
   ╰────
  help: Convert the class component to a function component.
  note: See https://react.dev/reference/react/Component#migrating-a-simple-component-from-a-class-to-a-function

  × eslint-plugin-react(prefer-function-component): Class component should be written as a function component.
    ╭─[modules/expo-bluesky-gif-view/src/GifView.tsx:12:14]
 11 │ 
 12 │ export class GifView extends React.PureComponent<GifViewProps> {
    ·              ───────
 13 │   // TODO native types, should all be the same as those in this class
    ╰────
  help: Convert the class component to a function component.
  note: See https://react.dev/reference/react/Component#migrating-a-simple-component-from-a-class-to-a-function

Found 0 warnings and 5 errors.
Finished in 75ms on 1553 files with 1 rules using 8 threads.

[camc314]

💪 LGTM - thanks!