logoESLint React
Rules

Overview

Linter rules can have false positives, false negatives, and some rules depend 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-typescript and strict-typescript 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-dollar0️⃣ 0️⃣🔧Prevents unnecessary dollar signs ($) from being inserted before an expression in JSX
jsx-key-before-spread1️⃣ 1️⃣🧪Enforces that the key prop is placed before the spread prop in JSX elements when using the new JSX transform
jsx-no-comment-textnodes1️⃣ 1️⃣Prevents comment strings (e.g., beginning with // or /*) from being accidentally inserted into a JSX element's text nodes
jsx-no-duplicate-props0️⃣ 0️⃣Disallows duplicate props in JSX elements
jsx-no-iife0️⃣ 2️⃣🧪Disallows IIFE in JSX
jsx-no-undef0️⃣ 0️⃣Prevents using variables in JSX that are not defined in the scope
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-react0️⃣ 0️⃣Marks React variables as used when JSX is present
jsx-uses-vars0️⃣ 0️⃣Marks variables used in JSX elements as used
no-access-state-in-setstate2️⃣ 2️⃣Disallows accessing this.state inside setState calls
no-array-index-key1️⃣ 1️⃣Disallows using an item's index in the array as its key
no-children-count1️⃣ 1️⃣Disallows the use of Children.count from the react package
no-children-for-each1️⃣ 1️⃣Disallows the use of Children.forEach from the react package
no-children-map1️⃣ 1️⃣Disallows the use of Children.map from the react package
no-children-only1️⃣ 1️⃣Disallows the use of Children.only from the react package
no-children-prop0️⃣ 2️⃣Disallows passing children as a prop
no-children-to-array1️⃣ 1️⃣Disallows the use of Children.toArray from the react package
no-class-component0️⃣ 2️⃣Disallows class components except for error boundaries
no-clone-element1️⃣ 1️⃣Disallows cloneElement
no-component-will-mount2️⃣ 2️⃣🔄Replaces usage of componentWillMount with UNSAFE_componentWillMount>=16.3.0
no-component-will-receive-props2️⃣ 2️⃣🔄Replaces usage of componentWillReceiveProps with UNSAFE_componentWillReceiveProps>=16.3.0
no-component-will-update2️⃣ 2️⃣🔄Replaces usage of componentWillUpdate with UNSAFE_componentWillUpdate>=16.3.0
no-context-provider1️⃣ 1️⃣🔄Replaces usage of <Context.Provider> with <Context>>=19.0.0
no-create-ref2️⃣ 2️⃣Disallows createRef in function components
no-default-props2️⃣ 2️⃣Disallows the defaultProps property in favor of ES6 default parameters
no-direct-mutation-state2️⃣ 2️⃣Disallows direct mutation of this.state
no-duplicate-key0️⃣ 0️⃣🧪Prevents duplicate key props on sibling elements when rendering lists
no-forward-ref1️⃣ 1️⃣🔄Replaces usage 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-rendering0️⃣ 0️⃣💭Prevents problematic leaked values from being rendered
no-missing-component-display-name0️⃣ 0️⃣Enforces that all components have a displayName that can be used in devtools
no-missing-context-display-name0️⃣ 0️⃣🔧Enforces that all contexts have a displayName that can be used in devtools
no-missing-key2️⃣ 2️⃣Disallows missing key on items in list rendering
no-misused-capture-owner-stack0️⃣ 2️⃣🧪Prevents incorrect usage of captureOwnerStack
no-nested-component-definitions2️⃣ 2️⃣Disallows nesting component definitions inside other components
no-nested-lazy-component-declarations2️⃣ 2️⃣Disallows nesting lazy component declarations inside other components
no-prop-types2️⃣ 2️⃣Disallows propTypes in favor of TypeScript or another type-checking solution
no-redundant-should-component-update2️⃣ 2️⃣Disallows shouldComponentUpdate when extending React.PureComponent
no-set-state-in-component-did-mount1️⃣ 1️⃣Disallows calling this.setState in componentDidMount outside functions such as callbacks
no-set-state-in-component-did-update1️⃣ 1️⃣Disallows calling this.setState in componentDidUpdate outside functions such as callbacks
no-set-state-in-component-will-update1️⃣ 1️⃣Disallows calling this.setState in componentWillUpdate outside functions such as callbacks
no-string-refs2️⃣ 2️⃣🔄Replaces string refs with callback refs>=16.3.0
no-unnecessary-key0️⃣ 0️⃣🧪Disallows unnecessary key props on elements
no-unnecessary-use-callback0️⃣ 1️⃣🧪Disallows unnecessary usage of useCallback
no-unnecessary-use-memo0️⃣ 1️⃣🧪Disallows unnecessary usage of useMemo
no-unnecessary-use-ref0️⃣ 0️⃣🧪Disallows unnecessary usage of useRef
no-unnecessary-use-prefix1️⃣ 1️⃣Enforces that a function with the use prefix uses at least one Hook inside it
no-unsafe-component-will-mount1️⃣ 1️⃣Warns about the use of UNSAFE_componentWillMount in class components
no-unsafe-component-will-receive-props1️⃣ 1️⃣Warns about the use of UNSAFE_componentWillReceiveProps in class components
no-unsafe-component-will-update1️⃣ 1️⃣Warns about the use 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-members1️⃣ 1️⃣Warns about unused class component methods and properties
no-unused-props0️⃣ 0️⃣💭 🧪Warns about component props that are defined but never used
no-unused-state0️⃣ 1️⃣Warns about unused class component state
no-use-context1️⃣ 1️⃣🔄Replaces usage of useContext with use>=19.0.0
no-useless-forward-ref1️⃣ 1️⃣Disallows useless forwardRef calls on components that don't use refs
no-useless-fragment0️⃣ 1️⃣🔧 ⚙️Disallows useless fragment elements
prefer-destructuring-assignment0️⃣ 1️⃣Enforces destructuring assignment for component props and context
prefer-namespace-import0️⃣ 0️⃣🔧Enforces importing React via a namespace import
prefer-read-only-props0️⃣ 0️⃣💭 🧪Enforces read-only props in components
prefer-use-state-lazy-initialization1️⃣ 1️⃣Enforces wrapping function calls made inside useState in an initializer function

DOM Rules

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

Web API Rules

Rule✅🌟Description
no-leaked-event-listener1️⃣ 1️⃣Enforces that every addEventListener in a component or custom hook has a corresponding removeEventListener
no-leaked-interval1️⃣ 1️⃣Enforces that every setInterval in a component or custom hook has a corresponding clearInterval
no-leaked-resize-observer1️⃣ 1️⃣Enforces that every ResizeObserver created in a component or custom hook has a corresponding ResizeObserver.disconnect()
no-leaked-timeout1️⃣ 1️⃣Enforces that every setTimeout in a component or custom hook has a corresponding clearTimeout

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️⃣Disallows direct calls to the set function of useState in useEffect

Naming Convention Rules

Rule✅🌟Descriptionreact
component-name0️⃣ 0️⃣⚙️Enforces naming conventions for components
context-name1️⃣ 1️⃣Enforces the context name to be a valid component name with the suffix Context>=19.0.0
filename0️⃣ 0️⃣⚙️Enforces consistent file-naming conventions
filename-extension0️⃣ 0️⃣⚙️Enforces consistent use of the JSX file extension
ref-name1️⃣ 1️⃣Enforces identifier names assigned from useRef calls to be either ref or end with Ref
use-state1️⃣ 1️⃣⚙️Enforces destructuring and symmetric naming of the 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 patterns.

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

References

Migrating from eslint-plugin-react

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

jsx-dollar

Next Page