eslint-plugin-react-prefer-function-component

5.0.0 verified Sat Apr 25 auth: no javascript

ESLint plugin that prevents the use of React class components, enforcing function components with hooks for consistency. Current stable version is 5.0.0 (released 2023). The release cadence has been stable with major version bumps for breaking changes. Key differentiators vs alternatives: stricter than eslint-plugin-react's prefer-stateless-function (which allows class components with methods other than render), supports error boundary exceptions via allowErrorBoundary, works with Preact/Inferno, and provides both legacy eslintrc and flat config support. Ships TypeScript types.

Common errors

error ESLint couldn't determine the plugin 'react-prefer-function-component' uniquely. ↓

cause Multiple plugins with same name or incorrect naming in eslintrc.

fix

Ensure the plugin is installed and use the correct plugin name: 'react-prefer-function-component' (not 'prefer-function-component').

error Configuration for rule 'react-prefer-function-component/react-prefer-function-component' is invalid: "allowComponentDidCatch" is not a valid option. ↓

cause Using deprecated option from v5.0.0.

fix

Rename 'allowComponentDidCatch' to 'allowErrorBoundary'.

error Cannot find module 'eslint-plugin-react-prefer-function-component/config' ↓

cause Using flat config import with version <3.3.0 or incorrect path.

fix

Upgrade to v3.3.0+. Ensure the import path is correct: 'eslint-plugin-react-prefer-function-component/config'.

error Invalid plugin object: Plugin react-prefer-function-component did not export a 'rules' object. ↓

cause Using flat config incorrectly (e.g., trying to spread the default export directly).

fix

Import the config from 'eslint-plugin-react-prefer-function-component/config' and include it as an object in the array, not spread.

Warnings

breaking Rule name prefix changed from 'prefer-function-component' to 'react-prefer-function-component' in flat config (v4.0.0) ↓

fix Use 'react-prefer-function-component/react-prefer-function-component' in rules, or import config from 'eslint-plugin-react-prefer-function-component/config'

breaking Option 'allowComponentDidCatch' replaced by 'allowErrorBoundary' in v5.0.0 ↓

fix Replace 'allowComponentDidCatch' with 'allowErrorBoundary' in rule options. Default behavior unchanged.

breaking Support for React.createClass dropped in v2.0.0 ↓

fix Migrate from createClass to ES6 classes or function components.

breaking Now errors on any JSX usage within a class, even if not extending React.Component (v2.0.0) ↓

fix Convert all classes using JSX to function components, or use the 'allowJsxUtilityClass' option (v3.1.0+) for utility classes.

gotcha Recommended config no longer requires explicit 'plugins' entry in eslintrc (v3.2.0+), but flat config users must import the config separately. ↓

fix Update eslintrc to omit 'plugins' if using 'extends'. For flat config, use the dedicated config import.

Install

npm install eslint-plugin-react-prefer-function-component

yarn add eslint-plugin-react-prefer-function-component

pnpm add eslint-plugin-react-prefer-function-component

Imports

plugin
wrong
```
const plugin = require('eslint-plugin-react-prefer-function-component')
```
correct
```
import plugin from 'eslint-plugin-react-prefer-function-component'
```
Default export; CJS require works but ESM is preferred. For flat config, use `import preferFC from 'eslint-plugin-react-prefer-function-component/config'`
configs.recommended
wrong
```
const configs = require('eslint-plugin-react-prefer-function-component').configs
```
correct
```
import { configs } from 'eslint-plugin-react-prefer-function-component'
```
Access via configs.recommended for legacy eslintrc. For flat config, import the config directly from 'eslint-plugin-react-prefer-function-component/config'

config (flat config)

wrong

import preferFC from 'eslint-plugin-react-prefer-function-component'

correct

import preferFC from 'eslint-plugin-react-prefer-function-component/config'

ESM-only; available since v3.3.0. This is the flat config export, not the rule itself.

rules['react-prefer-function-component']
wrong
```
rules: { 'prefer-function-component': 'error' }
```
correct
```
rules: { 'react-prefer-function-component/react-prefer-function-component': 'error' }
```
Rule name prefix changed in v4.0.0 for flat config. Legacy eslintrc uses 'react-prefer-function-component' as the plugin name, but the rule is accessed via 'react-prefer-function-component/react-prefer-function-component'.

Quickstart

Shows both flat config (ESM) and legacy eslintrc (CJS) setup for the plugin, including the recommended config and custom options.

// eslint.config.js (flat config) - ESM
import js from '@eslint/js';
import reactRecommended from 'eslint-plugin-react/configs/recommended.js';
import preferFC from 'eslint-plugin-react-prefer-function-component/config';

export default [
  js.configs.recommended,
  reactRecommended,
  preferFC,
];

// eslintrc (legacy) - CJS
module.exports = {
  plugins: ['react-prefer-function-component'],
  extends: ['plugin:react-prefer-function-component/recommended'],
  rules: {
    // Override allowErrorBoundary if needed
    'react-prefer-function-component/react-prefer-function-component': ['error', { allowErrorBoundary: true }],
  },
};