react/prefer-function-component Restriction
What it does
Enforces that React components are written as function components instead of class components.
Why is this bad?
Function components are simpler, easier to read, and support React hooks. Class components are a legacy pattern that is discouraged in modern React.
This rule is based on the rule from eslint-plugin-react-prefer-function-component.
Examples
Examples of incorrect code for this rule:
class Foo extends React.Component {
render() {
return <div>{this.props.foo}</div>;
}
}
class Bar extends React.PureComponent {
render() {
return <div>{this.props.bar}</div>;
}
}Examples of correct code for this rule:
const Foo = function (props) {
return <div>{props.foo}</div>;
};
const Bar = ({ bar }) => <div>{bar}</div>;Configuration
This rule accepts a configuration object with the following properties:
allowErrorBoundary
type: boolean
default: true
If true, error boundary classes (those implementing componentDidCatch or static getDerivedStateFromError) are allowed as class components.
This is because these classes are not easily converted to function components, and so they are exempted from this rule by default.
allowJsxUtilityClass
type: boolean
default: false
If true, classes that contain JSX but do not extend Component or PureComponent are allowed.
How to use
To enable this rule using the config file or in the CLI, you can use:
{
"plugins": ["react"],
"rules": {
"react/prefer-function-component": "error"
}
}import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react"],
rules: {
"react/prefer-function-component": "error",
},
});oxlint --deny react/prefer-function-component --react-pluginVersion
This rule was added in v1.59.0.