{"id":10832,"library":"eslint-plugin-react","title":"ESLint Plugin for React","description":"eslint-plugin-react provides React-specific linting rules for ESLint, helping developers enforce best practices, identify potential bugs, and maintain consistent code styles in React projects. As of version 7.37.5, it supports a wide range of React features and idioms, including Hooks, JSX, and functional/class components. The project maintains an active development and release cadence, with frequent patch and minor updates to address issues and add new rules. Its key differentiators include comprehensive coverage of React patterns, automatic detection of React versions, and integration with ESLint's ecosystem for a robust static analysis setup. It is the de-facto standard for linting React codebases with ESLint.","status":"active","version":"7.37.5","language":"javascript","source_language":"en","source_url":"https://github.com/jsx-eslint/eslint-plugin-react","tags":["javascript","eslint","eslint-plugin","eslintplugin","react","typescript"],"install":[{"cmd":"npm install eslint-plugin-react","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for ESLint functionality; the plugin registers its rules with ESLint.","package":"eslint","optional":false}],"imports":[{"note":"Registers the 'react' plugin with ESLint in the legacy .eslintrc* configuration.","wrong":"plugins: [require('eslint-plugin-react')]","symbol":"Configuring the plugin","correct":"plugins: ['react']"},{"note":"Applies the recommended set of React-specific rules. Used in legacy .eslintrc* configs.","wrong":"extends: ['react/recommended']","symbol":"Recommended Ruleset","correct":"extends: ['plugin:react/recommended']"},{"note":"Disables rules that become redundant or problematic with React 17's new JSX transform (e.g., 'react/react-in-jsx-scope').","wrong":"Omitting this when using React 17+ new JSX transform.","symbol":"JSX Runtime Ruleset","correct":"extends: ['plugin:react/jsx-runtime']"},{"note":"Crucial for rules that depend on the installed React version. 'detect' automatically infers from package.json.","wrong":"settings: { react: { version: 'latest' } } (or omitting entirely)","symbol":"React Version Detection","correct":"settings: { react: { version: 'detect' } }"},{"note":"For ESLint v9+, configurations are defined in `eslint.config.js` using a flat array of config objects. The plugin exposes its configurations under `reactPlugin.configs.flat`.","wrong":"Using `extends: ['plugin:react/recommended']` in `eslint.config.js`.","symbol":"Flat Config (ESLint v9+)","correct":"import reactPlugin from 'eslint-plugin-react';\nexport default [\n  reactPlugin.configs.flat.recommended,\n  reactPlugin.configs.flat['jsx-runtime'],\n  // ... other configs\n];"}],"quickstart":{"code":"npm install --save-dev eslint eslint-plugin-react\n\n// .eslintrc.json (Legacy ESLint config)\n{\n  \"env\": {\n    \"browser\": true,\n    \"es2021\": true,\n    \"node\": true\n  },\n  \"extends\": [\n    \"eslint:recommended\",\n    \"plugin:react/recommended\",\n    \"plugin:react/jsx-runtime\" // For React 17+ new JSX transform\n  ],\n  \"parserOptions\": {\n    \"ecmaFeatures\": {\n      \"jsx\": true\n    },\n    \"ecmaVersion\": \"latest\",\n    \"sourceType\": \"module\"\n  },\n  \"plugins\": [\n    \"react\"\n  ],\n  \"settings\": {\n    \"react\": {\n      \"version\": \"detect\" // Automatically detects React version\n    }\n  },\n  \"rules\": {\n    // Add or override specific rules here, e.g.,\n    // \"react/prop-types\": \"off\"\n  }\n}\n\n// For ESLint v9+ (eslint.config.js)\n// You would need to install @eslint/js for `js.configs.recommended`\n// import globals from \"globals\";\n// import js from \"@eslint/js\";\n// import reactPlugin from \"eslint-plugin-react\";\n\n// export default [\n//   js.configs.recommended,\n//   {\n//     files: [\"**/*.{js,jsx,mjs,cjs,ts,tsx}\"],\n//     ...reactPlugin.configs.flat.recommended,\n//     ...reactPlugin.configs.flat['jsx-runtime'], // For React 17+ new JSX transform\n//     languageOptions: {\n//       globals: {\n//         ...globals.browser,\n//         ...globals.node\n//       },\n//       parserOptions: {\n//         ecmaFeatures: {\n//           jsx: true\n//         },\n//         ecmaVersion: \"latest\",\n//         sourceType: \"module\"\n//       }\n//     },\n//     settings: {\n//       react: {\n//         version: \"detect\"\n//       }\n//     },\n//     rules: {\n//       // Add or override specific rules here\n//     }\n//   }\n// ];","lang":"json","description":"Demonstrates how to install `eslint-plugin-react` and configure it using both the legacy `.eslintrc.json` format (for ESLint < v9) and the new flat config `eslint.config.js` format (for ESLint v9+), including recommended presets and React version detection."},"warnings":[{"fix":"Migrate your ESLint configuration to `eslint.config.js` using the new flat config format. Refer to `eslint-plugin-react`'s official documentation for updated flat config examples.","message":"ESLint v9 introduced a new flat configuration system (`eslint.config.js`). Legacy `.eslintrc*` files are deprecated and will not work without a compatibility layer. The plugin provides flat config presets, but migration is required for ESLint v9+ projects.","severity":"breaking","affected_versions":"eslint >= 9.0.0"},{"fix":"Ensure you add `\"plugin:react/jsx-runtime\"` to your `extends` array in your ESLint configuration.","message":"When using React 17's new JSX transform (which automatically imports the `jsx` runtime), certain rules in `plugin:react/recommended` (like `react/react-in-jsx-scope`) become redundant and can cause errors if `plugin:react/jsx-runtime` is not extended.","severity":"gotcha","affected_versions":"React >= 17.0.0"},{"fix":"Always set `settings.react.version: \"detect\"` in your ESLint configuration for automatic detection from `package.json`. Alternatively, specify the exact version string (e.g., `\"18.0\"`) if autodetection is problematic or you need to override it.","message":"Many rules in `eslint-plugin-react` depend on knowing the exact React version installed in your project. If `settings.react.version` is not configured correctly or omitted, rules may produce incorrect warnings/errors or behave unexpectedly.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Ensure your `eslint` package version in `package.json` and `node_modules` matches the peer dependency range specified by `eslint-plugin-react`. Use `npm ls eslint` to check and adjust as needed.","message":"`eslint-plugin-react` has strict peer dependency requirements for `eslint` itself (e.g., `^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7`). Installing incompatible `eslint` versions can lead to runtime errors where the plugin fails to load or function correctly.","severity":"breaking","affected_versions":"Any ESLint version outside the specified peer dependency range."}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `npm install eslint-plugin-react --save-dev` or `yarn add eslint-plugin-react --dev` to install the plugin.","cause":"The `eslint-plugin-react` npm package is not installed as a dependency in your project.","error":"Error: Failed to load plugin 'react' declared in '.eslintrc.json': Cannot find module 'eslint-plugin-react'"},{"fix":"Ensure your `.eslintrc*` file includes `parserOptions.ecmaFeatures.jsx: true` and `settings.react.version: \"detect\"`. If using React 17+, add `\"plugin:react/jsx-runtime\"` to your `extends` array to disable the `react/react-in-jsx-scope` rule.","cause":"ESLint's parser is not configured to understand JSX syntax, or the plugin is not properly recognizing the React environment. This often happens with React < 17 and `react/react-in-jsx-scope` rule, or when `jsx-runtime` is not configured for React 17+.","error":"Parsing error: Cannot find module 'react' when using JSX (or similar 'React' must be in scope error)."},{"fix":"Add `\"settings\": { \"react\": { \"version\": \"detect\" } }` to your `.eslintrc*` configuration file to enable automatic React version detection.","cause":"The `eslint-plugin-react` cannot determine which React version your project is using, which can lead to incorrect linting results for version-specific rules.","error":"Warning: React version not specified in 'eslint-plugin-react settings'. See https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#configuration."}],"ecosystem":"npm"}