diff --git a/apps/website/content/docs/migration.mdx b/apps/website/content/docs/migration.mdx index 3ee0a22eea..5ca4c6b6d2 100644 --- a/apps/website/content/docs/migration.mdx +++ b/apps/website/content/docs/migration.mdx @@ -1,6 +1,7 @@ --- title: "Migrating from eslint-plugin-react" description: "Complete guide for migrating from eslint-plugin-react to ESLint React" +full: true --- import { Callout } from "fumadocs-ui/components/callout"; @@ -15,121 +16,120 @@ This guide provides a comprehensive comparison between [`eslint-plugin-react`](h 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`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/boolean-prop-naming.md) | | ✅ | ❌ | -| [`button-has-type`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/button-has-type.md) | [`dom-no-missing-button-type`](/docs/rules/dom-no-missing-button-type) | ✅ | 🔧 | -| [`checked-requires-onchange-or-readonly`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/checked-requires-onchange-or-readonly.md) | | ✅ | ❌ | -| [`default-props-match-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/default-props-match-prop-types.md) | | ✅ | 🚫 | -| [`destructuring-assignment`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/destructuring-assignment.md) | [`prefer-destructuring-assignment`](/docs/rules/prefer-destructuring-assignment) | 🔧 | ✅ | -| [`display-name`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/display-name.md) | [`no-missing-component-display-name`](/docs/rules/no-missing-component-display-name) | ✅ | ✅ | -| [`forbid-component-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-component-props.md) | | ✅ | ❌ | -| [`forbid-dom-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-dom-props.md) | | ✅ | ❌ | -| [`forbid-elements`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-elements.md) | | ✅ | ❌ | -| [`forbid-foreign-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-foreign-prop-types.md) | | ✅ | 🚫 | -| [`forbid-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-prop-types.md) | [`no-prop-types`](/docs/rules/no-prop-types) | ✅ | 🟡 | -| [`forward-ref-uses-ref`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forward-ref-uses-ref.md) | [`no-useless-forward-ref`](/docs/rules/no-useless-forward-ref) | ✅ | 🟡 | -| [`function-component-definition`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md) | | 🔧 | ❌ | -| [`hook-use-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/hook-use-state.md) | [`naming-convention-use-state`](/docs/rules/naming-convention-use-state) | ✅ | ✅ | -| [`iframe-missing-sandbox`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/iframe-missing-sandbox.md) | [`dom-no-missing-iframe-sandbox`](/docs/rules/dom-no-missing-iframe-sandbox) | ✅ | 🔧 | -| [`jsx-boolean-value`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md) | [`jsx-shorthand-boolean`](/docs/rules/jsx-shorthand-boolean) / [`avoid-shorthand-boolean`](/docs/rules/avoid-shorthand-boolean) | 🔧 | ✅ | -| [`jsx-child-element-spacing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-child-element-spacing.md) | | ✅ | ❌ | -| [`jsx-closing-bracket-location`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md) | | 🔧 | ❌ | -| [`jsx-closing-tag-location`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-closing-tag-location.md) | | 🔧 | ❌ | -| [`jsx-curly-brace-presence`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-brace-presence.md) | | 🔧 | ❌ | -| [`jsx-curly-newline`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-newline.md) | | 🔧 | ❌ | -| [`jsx-curly-spacing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md) | | 🔧 | ❌ | -| [`jsx-equals-spacing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-equals-spacing.md) | | 🔧 | ❌ | -| [`jsx-filename-extension`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md) | [`naming-convention-filename-extension`](/docs/rules/naming-convention-filename-extension) | ✅ | ✅ | -| [`jsx-first-prop-new-line`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-first-prop-new-line.md) | | 🔧 | ❌ | -| [`jsx-fragments`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-fragments.md) | [`jsx-shorthand-fragment`](/docs/rules/jsx-shorthand-fragment) / [`avoid-shorthand-fragment`](/docs/rules/avoid-shorthand-fragment) | 🔧 | ✅ | -| [`jsx-handler-names`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-handler-names.md) | | ✅ | ❌ | -| [`jsx-indent`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-indent.md) | | 🔧 | ❌ | -| [`jsx-indent-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-indent-props.md) | | 🔧 | ❌ | -| [`jsx-key`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-key.md) | [`no-missing-key`](/docs/rules/no-missing-key) | ✅ | ✅ | -| [`jsx-max-depth`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-max-depth.md) | | ✅ | ❌ | -| [`jsx-max-props-per-line`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-max-props-per-line.md) | | 🔧 | ❌ | -| [`jsx-newline`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-newline.md) | | 🔧 | ❌ | -| [`jsx-no-bind`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md) | | ✅ | ❌ | -| [`jsx-no-comment-textnodes`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-comment-textnodes.md) | [`jsx-no-comment-textnodes`](/docs/rules/jsx-no-comment-textnodes) / [`no-comment-textnodes`](/docs/rules/no-comment-textnodes) | ✅ | ✅ | -| [`jsx-no-constructed-context-values`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-constructed-context-values.md) | [`no-unstable-context-value`](/docs/rules/no-unstable-context-value) | ✅ | ✅ | -| [`jsx-no-duplicate-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-duplicate-props.md) | [`jsx-no-duplicate-props`](/docs/rules/jsx-no-duplicate-props) | ✅ | ✅ | -| [`jsx-no-leaked-render`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-leaked-render.md) | [`no-leaked-conditional-rendering`](/docs/rules/no-leaked-conditional-rendering) | 🔧 | ✅ | -| [`jsx-no-literals`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-literals.md) | | ✅ | ❌ | -| [`jsx-no-script-url`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-script-url.md) | [`dom-no-script-url`](/docs/rules/dom-no-script-url) | ✅ | ✅ | -| [`jsx-no-target-blank`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-target-blank.md) | [`dom-no-unsafe-target-blank`](/docs/rules/dom-no-unsafe-target-blank) | 🔧 | ✅ | -| [`jsx-no-undef`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-undef.md) | [`jsx-no-undef`](/docs/rules/jsx-no-undef) | ✅ | ✅ | -| [`jsx-no-useless-fragment`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-useless-fragment.md) | [`no-useless-fragment`](/docs/rules/no-useless-fragment) | 🔧 | ✅ | -| [`jsx-one-expression-per-line`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-one-expression-per-line.md) | | 🔧 | ❌ | -| [`jsx-pascal-case`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md) | [`naming-convention-component-name`](/docs/rules/naming-convention-component-name) | ✅ | ✅ | -| [`jsx-props-no-multi-spaces`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-multi-spaces.md) | | 🔧 | ❌ | -| [`jsx-props-no-spread-multi`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spread-multi.md) | | ✅ | ❌ | -| [`jsx-props-no-spreading`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md) | | ✅ | ❌ | -| [`jsx-sort-default-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-sort-default-props.md) | | ✅ | ⚠️ | -| [`jsx-sort-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-sort-props.md) | | 🔧 | ❌ | -| [`jsx-space-before-closing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-space-before-closing.md) | | 🔧 | ⚠️ | -| [`jsx-tag-spacing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-tag-spacing.md) | | 🔧 | ❌ | -| [`jsx-uses-react`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-uses-react.md) | [`jsx-uses-react`](/docs/rules/jsx-uses-react) | ✅ | ✅ | -| [`jsx-uses-vars`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-uses-vars.md) | [`jsx-uses-vars`](/docs/rules/jsx-uses-vars) | ✅ | ✅ | -| [`jsx-wrap-multilines`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-wrap-multilines.md) | | 🔧 | ❌ | -| [`no-access-state-in-setstate`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-access-state-in-setstate.md) | [`no-access-state-in-setstate`](/docs/rules/no-access-state-in-setstate) | ✅ | ✅ | -| [`no-adjacent-inline-elements`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-adjacent-inline-elements.md) | | ✅ | ❌ | -| [`no-array-index-key`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-array-index-key.md) | [`no-array-index-key`](/docs/rules/no-array-index-key) | ✅ | ✅ | -| [`no-arrow-function-lifecycle`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-arrow-function-lifecycle.md) | | 🔧 | ❌ | -| [`no-children-prop`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-children-prop.md) | [`no-children-prop`](/docs/rules/no-children-prop) | ✅ | ✅ | -| [`no-danger`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-danger.md) | [`dom-no-dangerously-set-innerhtml`](/docs/rules/dom-no-dangerously-set-innerhtml) | ✅ | ✅ | -| [`no-danger-with-children`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-danger-with-children.md) | [`dom-no-dangerously-set-innerhtml-with-children`](/docs/rules/dom-no-dangerously-set-innerhtml-with-children) | ✅ | ✅ | -| [`no-deprecated`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-deprecated.md) | | ✅ | ❌ | -| [`no-did-mount-set-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-did-mount-set-state.md) | [`no-set-state-in-component-did-mount`](/docs/rules/no-set-state-in-component-did-mount) | ✅ | ✅ | -| [`no-did-update-set-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-did-update-set-state.md) | [`no-set-state-in-component-did-update`](/docs/rules/no-set-state-in-component-did-update) | ✅ | ✅ | -| [`no-direct-mutation-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-direct-mutation-state.md) | [`no-direct-mutation-state`](/docs/rules/no-direct-mutation-state) | ✅ | ✅ | -| [`no-find-dom-node`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-find-dom-node.md) | [`dom-no-find-dom-node`](/docs/rules/dom-no-find-dom-node) | ✅ | ✅ | -| [`no-invalid-html-attribute`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-invalid-html-attribute.md) | | ✅ | ❌ | -| [`no-is-mounted`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md) | | ✅ | ❌ | -| [`no-multi-comp`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md) | | ✅ | ❌ | -| [`no-namespace`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-namespace.md) | [`dom-no-namespace`](/docs/rules/dom-no-namespace) | ✅ | ✅ | -| [`no-object-type-as-default-prop`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-object-type-as-default-prop.md) | [`no-unstable-default-props`](/docs/rules/no-unstable-default-props) | ✅ | ✅ | -| [`no-redundant-should-component-update`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-redundant-should-component-update.md) | [`no-redundant-should-component-update`](/docs/rules/no-redundant-should-component-update) | ✅ | ✅ | -| [`no-render-return-value`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-render-return-value.md) | [`dom-no-render-return-value`](/docs/rules/dom-no-render-return-value) | ✅ | ✅ | -| [`no-set-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-set-state.md) | | ✅ | ❌ | -| [`no-string-refs`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-string-refs.md) | [`no-string-refs`](/docs/rules/no-string-refs) | ✅ | ✅ | -| [`no-this-in-sfc`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-this-in-sfc.md) | | ✅ | ❌ | -| [`no-typos`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-typos.md) | | ✅ | ❌ | -| [`no-unescaped-entities`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unescaped-entities.md) | | ✅ | ❌ | -| [`no-unknown-property`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md) | [`dom-no-unknown-property`](/docs/rules/dom-no-unknown-property) | 🔧 | ✅ | -| [`no-unsafe`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unsafe.md) | [`no-unsafe-component-will-mount`](/docs/rules/no-unsafe-component-will-mount) + [`no-unsafe-component-will-receive-props`](/docs/rules/no-unsafe-component-will-receive-props) + [`no-unsafe-component-will-update`](/docs/rules/no-unsafe-component-will-update) | ✅ | 🟡 | -| [`no-unstable-nested-components`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unstable-nested-components.md) | [`no-nested-component-definitions`](/docs/rules/no-nested-component-definitions) | ✅ | ✅ | -| [`no-unused-class-component-methods`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-class-component-methods.md) | [`no-unused-class-component-members`](/docs/rules/no-unused-class-component-members) | ✅ | ✅ | -| [`no-unused-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-prop-types.md) | | ✅ | 🚫 | -| [`no-unused-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-state.md) | [`no-unused-state`](/docs/rules/no-unused-state) | ✅ | ✅ | -| [`no-will-update-set-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-will-update-set-state.md) | [`no-set-state-in-component-will-update`](/docs/rules/no-set-state-in-component-will-update) | ✅ | ✅ | -| [`prefer-es6-class`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md) | | ✅ | ❌ | -| [`prefer-exact-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-exact-props.md) | | ✅ | ❌ | -| [`prefer-read-only-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-read-only-props.md) | [`prefer-read-only-props`](/docs/rules/prefer-read-only-props) | 🔧 | 🟡 | -| [`prefer-stateless-function`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md) | | ✅ | ❌ | -| [`prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prop-types.md) | [`no-prop-types`](/docs/rules/no-prop-types) | ✅ | 🟡 | -| [`react-in-jsx-scope`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md) | | ✅ | 🚫 | -| [`require-default-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/require-default-props.md) | | ✅ | 🚫 | -| [`require-optimization`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/require-optimization.md) | | ✅ | ❌ | -| [`require-render-return`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/require-render-return.md) | | ✅ | ❌ | -| [`self-closing-comp`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md) | | 🔧 | ❌ | -| [`sort-comp`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/sort-comp.md) | | ✅ | ❌ | -| [`sort-default-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/sort-default-props.md) | | ✅ | ❌ | -| [`sort-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/sort-prop-types.md) | | 🔧 | ❌ | -| [`state-in-constructor`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/state-in-constructor.md) | | ✅ | ❌ | -| [`static-property-placement`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/static-property-placement.md) | | ✅ | ❌ | -| [`style-prop-object`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/style-prop-object.md) | | ✅ | ❌ | -| [`void-dom-elements-no-children`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/void-dom-elements-no-children.md) | [`dom-no-void-elements-with-children`](/docs/rules/dom-no-void-elements-with-children) | ✅ | ✅ | - +| Rule Name | ESLint React | Prev Status | Status | +|:-------------------------------------------------------------------------------------------------------------------------------------------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:------------|:-------| +| [`boolean-prop-naming`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/boolean-prop-naming.md) | | ✅ | ❌ | +| [`button-has-type`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/button-has-type.md) | [`dom/no-missing-button-type`](/docs/rules/dom-no-missing-button-type) | ✅ | 🔧 | +| [`checked-requires-onchange-or-readonly`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/checked-requires-onchange-or-readonly.md) | | ✅ | ❌ | +| [`default-props-match-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/default-props-match-prop-types.md) | | ✅ | 🚫 | +| [`destructuring-assignment`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/destructuring-assignment.md) | [`prefer-destructuring-assignment`](/docs/rules/prefer-destructuring-assignment) | 🔧 | ✅ | +| [`display-name`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/display-name.md) | [`no-missing-component-display-name`](/docs/rules/no-missing-component-display-name) | ✅ | ✅ | +| [`forbid-component-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-component-props.md) | | ✅ | ❌ | +| [`forbid-dom-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-dom-props.md) | | ✅ | ❌ | +| [`forbid-elements`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-elements.md) | | ✅ | ❌ | +| [`forbid-foreign-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-foreign-prop-types.md) | | ✅ | 🚫 | +| [`forbid-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-prop-types.md) | [`no-prop-types`](/docs/rules/no-prop-types) | ✅ | 🟡 | +| [`forward-ref-uses-ref`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forward-ref-uses-ref.md) | [`no-useless-forward-ref`](/docs/rules/no-useless-forward-ref) | ✅ | 🟡 | +| [`function-component-definition`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md) | | 🔧 | ❌ | +| [`hook-use-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/hook-use-state.md) | [`naming-convention/use-state`](/docs/rules/naming-convention-use-state) | ✅ | ✅ | +| [`iframe-missing-sandbox`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/iframe-missing-sandbox.md) | [`dom/no-missing-iframe-sandbox`](/docs/rules/dom-no-missing-iframe-sandbox) | ✅ | 🔧 | +| [`jsx-boolean-value`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md) | [`jsx-shorthand-boolean`](/docs/rules/jsx-shorthand-boolean) | 🔧 | ✅ | +| [`jsx-child-element-spacing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-child-element-spacing.md) | | ✅ | ❌ | +| [`jsx-closing-bracket-location`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md) | | 🔧 | ❌ | +| [`jsx-closing-tag-location`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-closing-tag-location.md) | | 🔧 | ❌ | +| [`jsx-curly-brace-presence`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-brace-presence.md) | | 🔧 | ❌ | +| [`jsx-curly-newline`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-newline.md) | | 🔧 | ❌ | +| [`jsx-curly-spacing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md) | | 🔧 | ❌ | +| [`jsx-equals-spacing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-equals-spacing.md) | | 🔧 | ❌ | +| [`jsx-filename-extension`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md) | [`naming-convention/filename-extension`](/docs/rules/naming-convention-filename-extension) | ✅ | ✅ | +| [`jsx-first-prop-new-line`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-first-prop-new-line.md) | | 🔧 | ❌ | +| [`jsx-fragments`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-fragments.md) | [`jsx-shorthand-fragment`](/docs/rules/jsx-shorthand-fragment) | 🔧 | ✅ | +| [`jsx-handler-names`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-handler-names.md) | | ✅ | ❌ | +| [`jsx-indent`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-indent.md) | | 🔧 | ❌ | +| [`jsx-indent-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-indent-props.md) | | 🔧 | ❌ | +| [`jsx-key`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-key.md) | [`no-missing-key`](/docs/rules/no-missing-key) | ✅ | ✅ | +| [`jsx-max-depth`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-max-depth.md) | | ✅ | ❌ | +| [`jsx-max-props-per-line`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-max-props-per-line.md) | | 🔧 | ❌ | +| [`jsx-newline`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-newline.md) | | 🔧 | ❌ | +| [`jsx-no-bind`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md) | | ✅ | ❌ | +| [`jsx-no-comment-textnodes`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-comment-textnodes.md) | [`jsx-no-comment-textnodes`](/docs/rules/jsx-no-comment-textnodes) | ✅ | ✅ | +| [`jsx-no-constructed-context-values`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-constructed-context-values.md) | [`no-unstable-context-value`](/docs/rules/no-unstable-context-value) | ✅ | ✅ | +| [`jsx-no-duplicate-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-duplicate-props.md) | [`jsx-no-duplicate-props`](/docs/rules/jsx-no-duplicate-props) | ✅ | ✅ | +| [`jsx-no-leaked-render`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-leaked-render.md) | [`no-leaked-conditional-rendering`](/docs/rules/no-leaked-conditional-rendering) | 🔧 | ✅ | +| [`jsx-no-literals`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-literals.md) | | ✅ | ❌ | +| [`jsx-no-script-url`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-script-url.md) | [`dom/no-script-url`](/docs/rules/dom-no-script-url) | ✅ | ✅ | +| [`jsx-no-target-blank`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-target-blank.md) | [`dom/no-unsafe-target-blank`](/docs/rules/dom-no-unsafe-target-blank) | 🔧 | ✅ | +| [`jsx-no-undef`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-undef.md) | [`jsx-no-undef`](/docs/rules/jsx-no-undef) | ✅ | ✅ | +| [`jsx-no-useless-fragment`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-useless-fragment.md) | [`no-useless-fragment`](/docs/rules/no-useless-fragment) | 🔧 | ✅ | +| [`jsx-one-expression-per-line`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-one-expression-per-line.md) | | 🔧 | ❌ | +| [`jsx-pascal-case`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md) | [`naming-convention/component-name`](/docs/rules/naming-convention-component-name) | ✅ | ✅ | +| [`jsx-props-no-multi-spaces`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-multi-spaces.md) | | 🔧 | ❌ | +| [`jsx-props-no-spread-multi`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spread-multi.md) | | ✅ | ❌ | +| [`jsx-props-no-spreading`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md) | | ✅ | ❌ | +| [`jsx-sort-default-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-sort-default-props.md) | | ✅ | ⚠️ | +| [`jsx-sort-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-sort-props.md) | | 🔧 | ❌ | +| [`jsx-space-before-closing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-space-before-closing.md) | | 🔧 | ⚠️ | +| [`jsx-tag-spacing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-tag-spacing.md) | | 🔧 | ❌ | +| [`jsx-uses-react`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-uses-react.md) | [`jsx-uses-react`](/docs/rules/jsx-uses-react) | ✅ | ✅ | +| [`jsx-uses-vars`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-uses-vars.md) | [`jsx-uses-vars`](/docs/rules/jsx-uses-vars) | ✅ | ✅ | +| [`jsx-wrap-multilines`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-wrap-multilines.md) | | 🔧 | ❌ | +| [`no-access-state-in-setstate`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-access-state-in-setstate.md) | [`no-access-state-in-setstate`](/docs/rules/no-access-state-in-setstate) | ✅ | ✅ | +| [`no-adjacent-inline-elements`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-adjacent-inline-elements.md) | | ✅ | ❌ | +| [`no-array-index-key`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-array-index-key.md) | [`no-array-index-key`](/docs/rules/no-array-index-key) | ✅ | ✅ | +| [`no-arrow-function-lifecycle`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-arrow-function-lifecycle.md) | | 🔧 | ❌ | +| [`no-children-prop`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-children-prop.md) | [`no-children-prop`](/docs/rules/no-children-prop) | ✅ | ✅ | +| [`no-danger`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-danger.md) | [`dom/no-dangerously-set-innerhtml`](/docs/rules/dom-no-dangerously-set-innerhtml) | ✅ | ✅ | +| [`no-danger-with-children`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-danger-with-children.md) | [`dom/no-dangerously-set-innerhtml-with-children`](/docs/rules/dom-no-dangerously-set-innerhtml-with-children) | ✅ | ✅ | +| [`no-deprecated`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-deprecated.md) | | ✅ | ❌ | +| [`no-did-mount-set-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-did-mount-set-state.md) | [`no-set-state-in-component-did-mount`](/docs/rules/no-set-state-in-component-did-mount) | ✅ | ✅ | +| [`no-did-update-set-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-did-update-set-state.md) | [`no-set-state-in-component-did-update`](/docs/rules/no-set-state-in-component-did-update) | ✅ | ✅ | +| [`no-direct-mutation-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-direct-mutation-state.md) | [`no-direct-mutation-state`](/docs/rules/no-direct-mutation-state) | ✅ | ✅ | +| [`no-find-dom-node`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-find-dom-node.md) | [`dom/no-find-dom-node`](/docs/rules/dom-no-find-dom-node) | ✅ | ✅ | +| [`no-invalid-html-attribute`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-invalid-html-attribute.md) | | ✅ | ❌ | +| [`no-is-mounted`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md) | | ✅ | ❌ | +| [`no-multi-comp`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md) | | ✅ | ❌ | +| [`no-namespace`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-namespace.md) | [`dom/no-namespace`](/docs/rules/dom-no-namespace) | ✅ | ✅ | +| [`no-object-type-as-default-prop`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-object-type-as-default-prop.md) | [`no-unstable-default-props`](/docs/rules/no-unstable-default-props) | ✅ | ✅ | +| [`no-redundant-should-component-update`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-redundant-should-component-update.md) | [`no-redundant-should-component-update`](/docs/rules/no-redundant-should-component-update) | ✅ | ✅ | +| [`no-render-return-value`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-render-return-value.md) | [`dom/no-render-return-value`](/docs/rules/dom-no-render-return-value) | ✅ | ✅ | +| [`no-set-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-set-state.md) | | ✅ | ❌ | +| [`no-string-refs`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-string-refs.md) | [`no-string-refs`](/docs/rules/no-string-refs) | ✅ | ✅ | +| [`no-this-in-sfc`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-this-in-sfc.md) | | ✅ | ❌ | +| [`no-typos`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-typos.md) | | ✅ | ❌ | +| [`no-unescaped-entities`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unescaped-entities.md) | | ✅ | ❌ | +| [`no-unknown-property`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md) | [`dom/no-unknown-property`](/docs/rules/dom-no-unknown-property) | 🔧 | ✅ | +| [`no-unsafe`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unsafe.md) | [`no-unsafe-component-will-mount`](/docs/rules/no-unsafe-component-will-mount) + [`no-unsafe-component-will-receive-props`](/docs/rules/no-unsafe-component-will-receive-props) + [`no-unsafe-component-will-update`](/docs/rules/no-unsafe-component-will-update) | ✅ | 🟡 | +| [`no-unstable-nested-components`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unstable-nested-components.md) | [`no-nested-component-definitions`](/docs/rules/no-nested-component-definitions) | ✅ | ✅ | +| [`no-unused-class-component-methods`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-class-component-methods.md) | [`no-unused-class-component-members`](/docs/rules/no-unused-class-component-members) | ✅ | ✅ | +| [`no-unused-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-prop-types.md) | | ✅ | 🚫 | +| [`no-unused-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-state.md) | [`no-unused-state`](/docs/rules/no-unused-state) | ✅ | ✅ | +| [`no-will-update-set-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-will-update-set-state.md) | [`no-set-state-in-component-will-update`](/docs/rules/no-set-state-in-component-will-update) | ✅ | ✅ | +| [`prefer-es6-class`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md) | | ✅ | ❌ | +| [`prefer-exact-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-exact-props.md) | | ✅ | ❌ | +| [`prefer-read-only-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-read-only-props.md) | [`prefer-read-only-props`](/docs/rules/prefer-read-only-props) | 🔧 | 🟡 | +| [`prefer-stateless-function`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md) | | ✅ | ❌ | +| [`prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prop-types.md) | [`no-prop-types`](/docs/rules/no-prop-types) | ✅ | 🟡 | +| [`react-in-jsx-scope`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md) | | ✅ | 🚫 | +| [`require-default-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/require-default-props.md) | | ✅ | 🚫 | +| [`require-optimization`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/require-optimization.md) | | ✅ | ❌ | +| [`require-render-return`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/require-render-return.md) | | ✅ | ❌ | +| [`self-closing-comp`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md) | | 🔧 | ❌ | +| [`sort-comp`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/sort-comp.md) | | ✅ | ❌ | +| [`sort-default-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/sort-default-props.md) | | ✅ | ❌ | +| [`sort-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/sort-prop-types.md) | | 🔧 | ❌ | +| [`state-in-constructor`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/state-in-constructor.md) | | ✅ | ❌ | +| [`static-property-placement`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/static-property-placement.md) | | ✅ | ❌ | +| [`style-prop-object`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/style-prop-object.md) | | ✅ | ❌ | +| [`void-dom-elements-no-children`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/void-dom-elements-no-children.md) | [`dom/no-void-elements-with-children`](/docs/rules/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 @@ -137,10 +137,12 @@ The following table compares all rules from `eslint-plugin-react` with their ESL - ⚠️ **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