{"id":19903,"library":"eslint-plugin-react-prefer-function-component","title":"eslint-plugin-react-prefer-function-component","description":"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.","status":"active","version":"5.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/tatethurston/eslint-plugin-react-prefer-function-component","tags":["javascript","eslint react no class","eslint react class","lint react no class","lint react class","lint jsx no class","lint jsx class","typescript"],"install":[{"cmd":"npm install eslint-plugin-react-prefer-function-component","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-react-prefer-function-component","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-react-prefer-function-component","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; plugin requires ESLint to function","package":"eslint","optional":false}],"imports":[{"note":"Default export; CJS require works but ESM is preferred. For flat config, use `import preferFC from 'eslint-plugin-react-prefer-function-component/config'`","wrong":"const plugin = require('eslint-plugin-react-prefer-function-component')","symbol":"plugin","correct":"import plugin from 'eslint-plugin-react-prefer-function-component'"},{"note":"Access via configs.recommended for legacy eslintrc. For flat config, import the config directly from 'eslint-plugin-react-prefer-function-component/config'","wrong":"const configs = require('eslint-plugin-react-prefer-function-component').configs","symbol":"configs.recommended","correct":"import { configs } from 'eslint-plugin-react-prefer-function-component'"},{"note":"ESM-only; available since v3.3.0. This is the flat config export, not the rule itself.","wrong":"import preferFC from 'eslint-plugin-react-prefer-function-component'","symbol":"config (flat config)","correct":"import preferFC from 'eslint-plugin-react-prefer-function-component/config'"},{"note":"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'.","wrong":"rules: { 'prefer-function-component': 'error' }","symbol":"rules['react-prefer-function-component']","correct":"rules: { 'react-prefer-function-component/react-prefer-function-component': 'error' }"}],"quickstart":{"code":"// eslint.config.js (flat config) - ESM\nimport js from '@eslint/js';\nimport reactRecommended from 'eslint-plugin-react/configs/recommended.js';\nimport preferFC from 'eslint-plugin-react-prefer-function-component/config';\n\nexport default [\n  js.configs.recommended,\n  reactRecommended,\n  preferFC,\n];\n\n// eslintrc (legacy) - CJS\nmodule.exports = {\n  plugins: ['react-prefer-function-component'],\n  extends: ['plugin:react-prefer-function-component/recommended'],\n  rules: {\n    // Override allowErrorBoundary if needed\n    'react-prefer-function-component/react-prefer-function-component': ['error', { allowErrorBoundary: true }],\n  },\n};","lang":"javascript","description":"Shows both flat config (ESM) and legacy eslintrc (CJS) setup for the plugin, including the recommended config and custom options."},"warnings":[{"fix":"Use 'react-prefer-function-component/react-prefer-function-component' in rules, or import config from 'eslint-plugin-react-prefer-function-component/config'","message":"Rule name prefix changed from 'prefer-function-component' to 'react-prefer-function-component' in flat config (v4.0.0)","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Replace 'allowComponentDidCatch' with 'allowErrorBoundary' in rule options. Default behavior unchanged.","message":"Option 'allowComponentDidCatch' replaced by 'allowErrorBoundary' in v5.0.0","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Migrate from createClass to ES6 classes or function components.","message":"Support for React.createClass dropped in v2.0.0","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Convert all classes using JSX to function components, or use the 'allowJsxUtilityClass' option (v3.1.0+) for utility classes.","message":"Now errors on any JSX usage within a class, even if not extending React.Component (v2.0.0)","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Update eslintrc to omit 'plugins' if using 'extends'. For flat config, use the dedicated config import.","message":"Recommended config no longer requires explicit 'plugins' entry in eslintrc (v3.2.0+), but flat config users must import the config separately.","severity":"gotcha","affected_versions":">=3.2.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure the plugin is installed and use the correct plugin name: 'react-prefer-function-component' (not 'prefer-function-component').","cause":"Multiple plugins with same name or incorrect naming in eslintrc.","error":"ESLint couldn't determine the plugin 'react-prefer-function-component' uniquely."},{"fix":"Rename 'allowComponentDidCatch' to 'allowErrorBoundary'.","cause":"Using deprecated option from v5.0.0.","error":"Configuration for rule 'react-prefer-function-component/react-prefer-function-component' is invalid: \"allowComponentDidCatch\" is not a valid option."},{"fix":"Upgrade to v3.3.0+. Ensure the import path is correct: 'eslint-plugin-react-prefer-function-component/config'.","cause":"Using flat config import with version <3.3.0 or incorrect path.","error":"Cannot find module 'eslint-plugin-react-prefer-function-component/config'"},{"fix":"Import the config from 'eslint-plugin-react-prefer-function-component/config' and include it as an object in the array, not spread.","cause":"Using flat config incorrectly (e.g., trying to spread the default export directly).","error":"Invalid plugin object: Plugin react-prefer-function-component did not export a 'rules' object."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}