src/content/docs/linter/rules/use-react-function-components.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v2.1.3` - Diagnostic Category: [`lint/style/useReactFunctionComponents`](/reference/diagnostics#diagnostic-category) - This rule isn't recommended, so you need to enable it. - This rule doesn't have a fix. - The default severity of this rule is [**information**](/reference/diagnostics#information). - This rule belongs to the following domains: - [`react`](/linter/domains#react) - Sources: - Same as [`react-prefer-function-component/react-prefer-function-component`](https://github.com/tatethurston/eslint-plugin-react-prefer-function-component){
"linter": {
"rules": {
"style": {
"useReactFunctionComponents": "error"
}
}
}
}
Enforce that components are defined as functions and never as classes.
React in particular allows users to create components using functions or classes. However, using functions is generally preferred. This rule enforces the use of function components.
This rule makes an exception for class components that implement componentDidCatch because there is
currently no hook alternative for React. This function is typically used for defining error boundaries.
It's recommended to define your error boundary once and then reuse it across your application.
If you are using Preact, it has a useErrorBoundary hook.
class Foo extends React.Component {
render() {
return (
<div>This is a class component.</div>
);
}
}
function Foo() {
return <div>This is a function component.</div>;
}