Migrating from eslint-plugin-react

This page is a work in progress and may be incomplete.

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 equivalents, and some behave differently.

Rule Comparison Table

Legend

🔧 Fully supported - Rule is supported, and has an auto-fix
✅ Mostly supported - Rule is supported but doesn't have an auto-fix
🟡 Partial support - Similar but not identical functionality
❌ Not supported - No equivalent rule
➡️ External plugin - Rule is available in another ESLint plugin
🚫 Legacy - Rule is not applicable in modern React development (e.g. class-based components, propTypes)
⚠️ Warning - Rule has been deprecated in eslint-plugin-react

A variety of rules are marked legacy, but still have equivalent rules. This distinction was done to more accurately assess migration for React written with function components and no longer use propTypes.

Table

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

`eslint-plugin-react` Rule Name	New Rule Name	Prev Status	Status
`boolean-prop-naming`		✅	❌
`button-has-type`	`dom/no-missing-button-type`	✅	🔧
`checked-requires-onchange-or-readonly`		✅	❌
`default-props-match-prop-types`	`no-prop-types`	✅	🚫
`destructuring-assignment`	`prefer-destructuring-assignment`	🔧	✅
`display-name`	`no-missing-component-display-name`	✅	✅
`forbid-component-props`		✅	❌
`forbid-dom-props`		✅	❌
`forbid-elements`	`no-prop-types`	✅	❌
`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` / `avoid-shorthand-boolean`	🔧	✅
`jsx-child-element-spacing`	`@stylistic/jsx-child-element-spacing`	✅	➡️
`jsx-closing-bracket-location`	`@stylistic/jsx-closing-bracket-location`	🔧	➡️
`jsx-closing-tag-location`	`@stylistic/jsx-closing-tag-location`	🔧	➡️
`jsx-curly-brace-presence`	`@stylistic/jsx-curly-brace-presence`	🔧	➡️
`jsx-curly-newline`	`@stylistic/jsx-curly-newline`	🔧	➡️
`jsx-curly-spacing`	`@stylistic/jsx-curly-spacing`	🔧	➡️
`jsx-equals-spacing`	`@stylistic/jsx-equals-spacing`	🔧	➡️
`jsx-filename-extension`	`naming-convention/filename-extension`	✅	✅
`jsx-first-prop-new-line`	`@stylistic/jsx-first-prop-new-line`	🔧	➡️
`jsx-fragments`	`jsx-shorthand-fragment` / `avoid-shorthand-fragment`	🔧	✅
`jsx-handler-names`		✅	❌
`jsx-indent`	`@stylistic/jsx-indent`	🔧	➡️
`jsx-indent-props`	`@stylistic/jsx-indent-props`	🔧	➡️
`jsx-key`	`no-missing-key`	✅	✅
`jsx-max-depth`		✅	❌
`jsx-max-props-per-line`	`@stylistic/jsx-max-props-per-line`	🔧	➡️
`jsx-newline`	`@stylistic/jsx-newline`	🔧	➡️
`jsx-no-bind`		✅	❌
`jsx-no-comment-textnodes`	`jsx-no-comment-textnodes` / `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`	`@stylistic/jsx-one-expression-per-line`	🔧	➡️
`jsx-pascal-case`	`naming-convention/component-name`	✅	✅
`jsx-props-no-multi-spaces`	`@stylistic/jsx-props-no-multi-spaces`	🔧	➡️
`jsx-props-no-spread-multi`		✅	❌
`jsx-props-no-spreading`		✅	❌
`jsx-sort-default-props`		⚠️
`jsx-sort-props`	`@stylistic/jsx-sort-props`	🔧	➡️
`jsx-space-before-closing`		⚠️
`jsx-tag-spacing`	`@stylistic/jsx-tag-spacing`	🔧	➡️
`jsx-uses-react`	`jsx-uses-react`	✅	✅
`jsx-uses-vars`	`jsx-uses-vars`	✅	✅
`jsx-wrap-multilines`	`@stylistic/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-component-will-mount` + `no-component-will-receive-props` + `no-component-will-update` + `no-create-ref` + `no-forward-ref`	✅	🟡
`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-prop-types`	✅	🚫
`no-unused-state`	`no-unused-state`	✅	🚫
`no-will-update-set-state`	`no-set-state-in-component-will-update`	✅	✅
`prefer-es6-class`	`no-prop-types`	✅	🚫
`prefer-exact-props`	`no-prop-types`	✅	🚫
`prefer-read-only-props`	`prefer-read-only-props`	🔧	🚫
`prefer-stateless-function`		✅	🚫
`prop-types`	`no-prop-types`	✅	🚫
`react-in-jsx-scope`		✅	🚫
`require-default-props`	`no-prop-types`	✅	🚫
`require-optimization`		✅	🚫
`require-render-return`		✅	🚫
`self-closing-comp`	`@stylistic/jsx-self-closing-comp`	🔧	➡️
`sort-comp`		✅	🚫
`sort-default-props`	`no-prop-types`	✅	🚫
`sort-prop-types`	`no-prop-types`	🔧	🚫
`state-in-constructor`		✅	🚫
`static-property-placement`		✅	🚫
`style-prop-object`		✅	❌
`void-dom-elements-no-children`	`dom/no-void-elements-with-children`	✅	✅

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, using the disableConflictEslintPluginReact ruleset:

import reactPlugin from "eslint-plugin-react";
import eslintReact from "@eslint-react/eslint-plugin";
export default [
  // Start with the eslint-plugin-react
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    // Whatever config you had enabled with eslint-plugin-react
    ...reactPlugin.configs.flat.recommended,

    // Now disable all conflicting rules
    ...eslintReact.configs['disable-conflict-eslint-plugin-react],

    // Now enable the desired rules
    ...eslintReact.configs.recommended,
  }
];