Registry / testing / eslint-plugin-react-prefer-function-component

eslint-plugin-react-prefer-function-component

library5.0.0jsnpmunverified

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.

testing

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

github ↗package ↗

INSTALL

IMPORT

SIG · ESLINT-PLUGIN-REAC

eslint-plugin-react-prefer-function-component

testingjavascriptv5.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

plugin

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

✗ const plugin = require('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

✓ import { configs } from 'eslint-plugin-react-prefer-function-component'

✗ const configs = require('eslint-plugin-react-prefer-function-component').configs

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)

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

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

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

rules['react-prefer-function-component']

✓ rules: { 'react-prefer-function-component/react-prefer-function-component': 'error' }

✗ rules: { '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'.

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 }], }, };

Debug

Known issues

breakingRule 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'

affects: >=4.0.0

breakingOption 'allowComponentDidCatch' replaced by 'allowErrorBoundary' in v5.0.0

fix

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

affects: >=5.0.0

breakingSupport for React.createClass dropped in v2.0.0

fix

Migrate from createClass to ES6 classes or function components.

affects: >=2.0.0

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

affects: >=2.0.0

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

affects: >=3.2.0

Errors

Common errors & fixes

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

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').

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

Using deprecated option from v5.0.0.

fix

Rename 'allowComponentDidCatch' to 'allowErrorBoundary'.

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

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

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

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.

Upgrade

Version history

5.0.0latest on npm

Audit

Dependencies

eslintrequiredpeer dependency; plugin requires ESLint to function

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/tatethurston/eslint-plugin-react-prefer-function-component ↗

packagehttps://www.npmjs.com/package/eslint-plugin-react-prefer-function-component ↗