logoESLint React
Rules

Overview

Linter rules can have false positives, false negatives, and some rules are dependent on the react or react-dom version you are using.

  • 🌟 - Feature
  • ⚙️ - Configurable
  • 🧪 - Experimental
  • 🐞 - Debug
  • 💭 - Type Checking
  • 🔧 - Fixable
  • 🔄 - Codemod
  • 0️⃣ - Severity 0
  • 1️⃣ - Severity 1
  • 2️⃣ - Severity 2
  • ✅ - Severity in recommended and strict presets

X Rules

The jsx-* rules check for issues exclusive to JSX syntax, which are absent from standard JavaScript (like handwritten createElement() calls).

Rule✅🌟Descriptionreact
jsx-key-before-spread1️⃣ 1️⃣Enforces that the 'key' prop is placed before the spread prop in JSX elements
jsx-no-comment-textnodes1️⃣ 1️⃣Prevents comments from being inserted as text nodes
jsx-no-duplicate-props1️⃣ 1️⃣Disallow duplicate props in JSX elements
jsx-no-iife0️⃣ 2️⃣🧪Disallows IIFE in JSX elements
jsx-no-undef0️⃣ 0️⃣Disallow undefined variables in JSX elements
jsx-shorthand-boolean0️⃣ 0️⃣🔧 ⚙️Enforces the use of shorthand syntax for boolean attributes
jsx-shorthand-fragment0️⃣ 0️⃣🔧 ⚙️Enforces the use of shorthand syntax for fragments
jsx-uses-react1️⃣ 1️⃣Marks React variables as used when JSX is used
jsx-uses-vars1️⃣ 1️⃣Marks variables used in JSX elements as used
no-access-state-in-setstate2️⃣ 2️⃣Disallow accessing this.state inside setState calls
no-array-index-key1️⃣ 1️⃣Disallow an item's index in the array as its key
no-children-count1️⃣ 1️⃣Disallow Children.count
no-children-for-each1️⃣ 1️⃣Disallow Children.forEach
no-children-map1️⃣ 1️⃣Disallow Children.map
no-children-only1️⃣ 1️⃣Disallow Children.only
no-children-prop0️⃣ 2️⃣Disallow passing children as a prop
no-children-to-array1️⃣ 1️⃣Disallow Children.toArray
no-class-component0️⃣ 2️⃣Disallow class components except for error boundaries
no-clone-element1️⃣ 1️⃣Disallow cloneElement
no-component-will-mount2️⃣ 2️⃣🔄Replaces usages of componentWillMount with UNSAFE_componentWillMount>=16.3.0
no-component-will-receive-props2️⃣ 2️⃣🔄Replaces usages of componentWillReceiveProps with UNSAFE_componentWillReceiveProps>=16.3.0
no-component-will-update2️⃣ 2️⃣🔄Replaces usages of componentWillUpdate with UNSAFE_componentWillUpdate>=16.3.0
no-context-provider1️⃣ 1️⃣🔄Replaces usages of <Context.Provider> with <Context>>=19.0.0
no-create-ref2️⃣ 2️⃣Disallow createRef in function components
no-default-props2️⃣ 2️⃣Disallow defaultProps property in favor of ES6 default parameters
no-direct-mutation-state2️⃣ 2️⃣Disallow direct mutation of this.state
no-duplicate-key2️⃣ 2️⃣Disallow duplicate key on elements in the same array or a list of children
no-forbidden-props1️⃣ 1️⃣🔧Disallow certain props on components
no-forward-ref1️⃣ 1️⃣🔄Replaces usages of forwardRef with passing ref as a prop>=19.0.0
no-implicit-key1️⃣ 1️⃣🧪Prevents key from not being explicitly specified (e.g. spreading key from objects)
no-leaked-conditional-rendering1️⃣ 1️⃣💭Prevents problematic leaked values from being rendered
no-missing-component-display-name0️⃣ 0️⃣Enforces that all components have a displayName which can be used in devtools
no-missing-context-display-name0️⃣ 0️⃣🔧Enforces that all contexts have a displayName which can be used in devtools
no-missing-key2️⃣ 2️⃣Disallow missing key on items in list rendering
no-misused-capture-owner-stack0️⃣ 2️⃣🧪Prevents incorrect usage of captureOwnerStack
no-nested-component-definitions2️⃣ 2️⃣Disallow nesting component definitions inside other components
no-nested-lazy-component-declarations2️⃣ 2️⃣Disallow nesting lazy component declarations inside other components
no-prop-types2️⃣ 2️⃣Disallow propTypes in favor of TypeScript or another type-checking solution
no-redundant-should-component-update2️⃣ 2️⃣Disallow shouldComponentUpdate when extending React.PureComponent
no-set-state-in-component-did-mount1️⃣ 1️⃣Disallow calling this.setState in componentDidMount outside of functions, such as callbacks
no-set-state-in-component-did-update1️⃣ 1️⃣Disallow calling this.setState in componentDidUpdate outside of functions, such as callbacks
no-set-state-in-component-will-update1️⃣ 1️⃣Disallow calling this.setState in componentWillUpdate outside of functions, such as callbacks
no-string-refs2️⃣ 2️⃣🔄Replaces string refs with callback refs>=16.3.0
no-unnecessary-key0️⃣ 1️⃣🧪Prevents key from being placed on non-top-level elements in a list rendering
no-unnecessary-use-callback0️⃣ 1️⃣🧪Disallow unnecessary usage of useCallback
no-unnecessary-use-memo0️⃣ 1️⃣🧪Disallow unnecessary usage of useMemo
no-unnecessary-use-prefix1️⃣ 1️⃣🧪Enforces that a function with the use prefix should use at least one Hook inside of it
no-unsafe-component-will-mount1️⃣ 1️⃣Warns the usage of UNSAFE_componentWillMount in class components
no-unsafe-component-will-receive-props1️⃣ 1️⃣Warns the usage of UNSAFE_componentWillReceiveProps in class components
no-unsafe-component-will-update1️⃣ 1️⃣Warns the usage of UNSAFE_componentWillUpdate in class components
no-unstable-context-value0️⃣ 1️⃣Prevents non-stable values (i.e. object literals) from being used as a value for Context.Provider
no-unstable-default-props0️⃣ 1️⃣Prevents using referential-type values as default props in object destructuring
no-unused-class-component-members0️⃣ 0️⃣Warns unused class component methods and properties
no-unused-props0️⃣ 0️⃣🧪 💭Warns component props that are defined but never used
no-unused-state0️⃣ 1️⃣Warns unused class component state
no-use-context1️⃣ 1️⃣🔄Replaces usages of useContext with use>=19.0.0
no-useless-forward-ref1️⃣ 1️⃣Disallow useless forwardRef calls on components that don't use refs
no-useless-fragment0️⃣ 1️⃣🔧 ⚙️Disallow useless fragment elements
prefer-destructuring-assignment0️⃣ 1️⃣Enforces destructuring assignment for component props and context
prefer-namespace-import0️⃣ 0️⃣🔧Enforces React is imported via a namespace import
prefer-read-only-props0️⃣ 0️⃣💭Enforces read-only props in components
prefer-use-state-lazy-initialization1️⃣ 1️⃣Enforces function calls made inside useState to be wrapped in an initializer function

DOM Rules

Rule✅🌟Descriptionreact-dom
no-dangerously-set-innerhtml1️⃣ 1️⃣Disallow dangerouslySetInnerHTML
no-dangerously-set-innerhtml-with-children2️⃣ 2️⃣Disallow dangerouslySetInnerHTML and children at the same time
no-find-dom-node2️⃣ 2️⃣Disallow findDOMNode
no-flush-sync2️⃣ 2️⃣Disallow flushSync
no-hydrate2️⃣ 2️⃣🔄Replaces usages of ReactDom.hydrate() with hydrateRoot()>=18.0.0
no-missing-button-type0️⃣ 1️⃣🔧Enforces explicit type attribute for button elements
no-missing-iframe-sandbox0️⃣ 1️⃣🔧Enforces explicit sandbox attribute for iframe elements
no-namespace2️⃣ 2️⃣Enforces the absence of a namespace in React elements
no-render2️⃣ 2️⃣🔄Replaces usages of ReactDom.render() with createRoot(node).render()>=18.0.0
no-render-return-value2️⃣ 2️⃣Disallow the return value of ReactDOM.render
no-script-url1️⃣ 1️⃣Disallow javascript: URLs as attribute values
no-string-style-prop2️⃣ 2️⃣Disallow string values for the style prop
no-unknown-property0️⃣ 0️⃣🔧 ⚙️Disallow unknown DOM property
no-unsafe-iframe-sandbox0️⃣ 0️⃣Enforces sandbox attribute for iframe elements is not set to unsafe combinations
no-unsafe-target-blank0️⃣ 1️⃣🔧Disallow target="_blank" without rel="noreferrer noopener"
no-use-form-state2️⃣ 2️⃣🔄Replaces usages of useFormState with useActionState>=19.0.0
no-void-elements-with-children2️⃣ 2️⃣Disallow children in void DOM elements
prefer-namespace-import0️⃣ 0️⃣🔧Enforces React DOM is imported via a namespace import

Web API Rules

Rule✅Description
no-leaked-event-listener1️⃣ 1️⃣Prevents leaked addEventListener in a component or custom hook
no-leaked-interval1️⃣ 1️⃣Prevents leaked setInterval in a component or custom hook
no-leaked-resize-observer1️⃣ 1️⃣Prevents leaked ResizeObserver in a component or custom hook
no-leaked-timeout1️⃣ 1️⃣Prevents leaked setTimeout in a component or custom hook

Hooks Extra Rules

This section contains rules that are not part of the official eslint-plugin-react-hooks plugin but are useful for specific use cases or patterns.

Rule✅🌟Description
no-direct-set-state-in-use-effect1️⃣ 1️⃣🧪Disallow direct calls to the set function of useState in useEffect

Naming Convention Rules

Rule✅🌟Description
component-name0️⃣ 0️⃣⚙️Enforces naming conventions for components
context-name1️⃣ 1️⃣Enforces context name to be a valid component name with the suffix Context
filename0️⃣ 0️⃣⚙️Enforces consistent file naming conventions
filename-extension0️⃣ 0️⃣⚙️Enforces consistent use of the JSX file extension
use-state1️⃣ 1️⃣Enforces destructuring and symmetric naming of useState hook value and setter

Debug Rules

The eslint-plugin-react-debug package is not included in the unified plugin. You need to install and configure it separately.

These rules are useful for code metrics, code transformation, issue reporting, or when building custom tooling that needs to identify specific React patterns.

Rule🌟Description
class-component🐞Reports all class components
function-component🐞Reports all function components
hook🐞Reports all react hooks
is-from-react🐞Reports all identifiers that are initialized from React
jsx🐞Reports all JSX elements and fragments

References

Migrating from eslint-plugin-react

Complete guide for migrating from eslint-plugin-react to ESLint React

jsx-key-before-spread

Next Page