Migrating from eslint-plugin-react

This guide provides a comprehensive comparison between eslint-plugin-react and ESLint React rules to help you migrate your existing configuration.

Overview

ESLint React is designed as a modern replacement for eslint-plugin-react with improved performance, better TypeScript support, and more accurate rule implementations. However, not all rules have direct ✅s, and some behave differently.

Rule Comparison Table

The following table compares all rules from eslint-plugin-react with their ESLint React equivalents:

Rule Name	ESLint React	Prev Status	Status
`boolean-prop-naming`		✅	❌
`button-has-type`	`dom/no-missing-button-type`	✅	🔧
`checked-requires-onchange-or-readonly`		✅	❌
`default-props-match-prop-types`		✅	🚫
`destructuring-assignment`	`prefer-destructuring-assignment`	🔧	✅
`display-name`	`no-missing-component-display-name`	✅	✅
`forbid-component-props`		✅	❌
`forbid-dom-props`		✅	❌
`forbid-elements`		✅	❌
`forbid-foreign-prop-types`		✅	🚫
`forbid-prop-types`	`no-prop-types`	✅	🟡
`forward-ref-uses-ref`	`no-useless-forward-ref`	✅	🟡
`function-component-definition`		🔧	❌
`hook-use-state`	`naming-convention/use-state`	✅	✅
`iframe-missing-sandbox`	`dom/no-missing-iframe-sandbox`	✅	🔧
`jsx-boolean-value`	`jsx-shorthand-boolean`	🔧	✅
`jsx-child-element-spacing`		✅	❌
`jsx-closing-bracket-location`		🔧	❌
`jsx-closing-tag-location`		🔧	❌
`jsx-curly-brace-presence`		🔧	❌
`jsx-curly-newline`		🔧	❌
`jsx-curly-spacing`		🔧	❌
`jsx-equals-spacing`		🔧	❌
`jsx-filename-extension`	`naming-convention/filename-extension`	✅	✅
`jsx-first-prop-new-line`		🔧	❌
`jsx-fragments`	`jsx-shorthand-fragment`	🔧	✅
`jsx-handler-names`		✅	❌
`jsx-indent`		🔧	❌
`jsx-indent-props`		🔧	❌
`jsx-key`	`no-missing-key`	✅	✅
`jsx-max-depth`		✅	❌
`jsx-max-props-per-line`		🔧	❌
`jsx-newline`		🔧	❌
`jsx-no-bind`		✅	❌
`jsx-no-comment-textnodes`	`jsx-no-comment-textnodes`	✅	✅
`jsx-no-constructed-context-values`	`no-unstable-context-value`	✅	✅
`jsx-no-duplicate-props`	`jsx-no-duplicate-props`	✅	✅
`jsx-no-leaked-render`	`no-leaked-conditional-rendering`	🔧	✅
`jsx-no-literals`		✅	❌
`jsx-no-script-url`	`dom/no-script-url`	✅	✅
`jsx-no-target-blank`	`dom/no-unsafe-target-blank`	🔧	✅
`jsx-no-undef`	`jsx-no-undef`	✅	✅
`jsx-no-useless-fragment`	`no-useless-fragment`	🔧	✅
`jsx-one-expression-per-line`		🔧	❌
`jsx-pascal-case`	`naming-convention/component-name`	✅	✅
`jsx-props-no-multi-spaces`		🔧	❌
`jsx-props-no-spread-multi`		✅	❌
`jsx-props-no-spreading`		✅	❌
`jsx-sort-default-props`		✅	⚠️
`jsx-sort-props`		🔧	❌
`jsx-space-before-closing`		🔧	⚠️
`jsx-tag-spacing`		🔧	❌
`jsx-uses-react`	`jsx-uses-react`	✅	✅
`jsx-uses-vars`	`jsx-uses-vars`	✅	✅
`jsx-wrap-multilines`		🔧	❌
`no-access-state-in-setstate`	`no-access-state-in-setstate`	✅	✅
`no-adjacent-inline-elements`		✅	❌
`no-array-index-key`	`no-array-index-key`	✅	✅
`no-arrow-function-lifecycle`		🔧	❌
`no-children-prop`	`no-children-prop`	✅	✅
`no-danger`	`dom/no-dangerously-set-innerhtml`	✅	✅
`no-danger-with-children`	`dom/no-dangerously-set-innerhtml-with-children`	✅	✅
`no-deprecated`		✅	❌
`no-did-mount-set-state`	`no-set-state-in-component-did-mount`	✅	✅
`no-did-update-set-state`	`no-set-state-in-component-did-update`	✅	✅
`no-direct-mutation-state`	`no-direct-mutation-state`	✅	✅
`no-find-dom-node`	`dom/no-find-dom-node`	✅	✅
`no-invalid-html-attribute`		✅	❌
`no-is-mounted`		✅	❌
`no-multi-comp`		✅	❌
`no-namespace`	`dom/no-namespace`	✅	✅
`no-object-type-as-default-prop`	`no-unstable-default-props`	✅	✅
`no-redundant-should-component-update`	`no-redundant-should-component-update`	✅	✅
`no-render-return-value`	`dom/no-render-return-value`	✅	✅
`no-set-state`		✅	❌
`no-string-refs`	`no-string-refs`	✅	✅
`no-this-in-sfc`		✅	❌
`no-typos`		✅	❌
`no-unescaped-entities`		✅	❌
`no-unknown-property`	`dom/no-unknown-property`	🔧	✅
`no-unsafe`	`no-unsafe-component-will-mount` + `no-unsafe-component-will-receive-props` + `no-unsafe-component-will-update`	✅	🟡
`no-unstable-nested-components`	`no-nested-component-definitions`	✅	✅
`no-unused-class-component-methods`	`no-unused-class-component-members`	✅	✅
`no-unused-prop-types`		✅	🚫
`no-unused-state`	`no-unused-state`	✅	✅
`no-will-update-set-state`	`no-set-state-in-component-will-update`	✅	✅
`prefer-es6-class`		✅	❌
`prefer-exact-props`		✅	❌
`prefer-read-only-props`	`prefer-read-only-props`	🔧	🟡
`prefer-stateless-function`		✅	❌
`prop-types`	`no-prop-types`	✅	🟡
`react-in-jsx-scope`		✅	🚫
`require-default-props`		✅	🚫
`require-optimization`		✅	❌
`require-render-return`		✅	❌
`self-closing-comp`		🔧	❌
`sort-comp`		✅	❌
`sort-default-props`		✅	❌
`sort-prop-types`		🔧	❌
`state-in-constructor`		✅	❌
`static-property-placement`		✅	❌
`style-prop-object`		✅	❌
`void-dom-elements-no-children`	`dom/no-void-elements-with-children`	✅	✅

Legend

Status Column

✅ Fully supported - Rule has a direct equivalent in ESLint React
🟡 Partial support - ESLint React provides similar but not identical functionality
❌ Not supported - No equivalent rule available in ESLint React
🚫 Deprecated - Rule is not applicable in modern React development
⚠️ Warning - Rule has been deprecated in eslint-plugin-react

Prev Status Column

✅ Standard rule - Original rule provided linting without auto-fix
🔧 Fixable rule - Original rule supported automatic fixes

ESLint React Column

Rule names link to ESLint React documentation
Multiple rules separated by / indicate alternative approaches
Rules with + indicate multiple rules that together provide equivalent functionality

Gradual Migration

You can migrate gradually by using both plugins together:

export default [
  // Start with ESLint React
  {
    ...eslintReact.configs.recommended,
  },
  // Add specific eslint-plugin-react rules you still need
  {
    plugins: {
      react: pluginReact,
    },
    rules: {
      "react/jsx-sort-props": "warn", // Example missing rule
    },
  },
];