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

DOM Rules

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

Web API Rules

Rule✅Description
no-leaked-event-listener1️⃣Prevents leaked addEventListener in a component or custom hook
no-leaked-interval1️⃣Prevents leaked setInterval in a component or custom hook
no-leaked-resize-observer1️⃣Prevents leaked ResizeObserver in a component or custom hook
no-leaked-timeout1️⃣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️⃣Disallow direct calls to the set function of useState in useEffect
no-direct-set-state-in-use-layout-effect0️⃣🧪Disallow direct calls to the set function of useState in useLayoutEffect
no-unnecessary-use-callback0️⃣🧪Disallow unnecessary usage of useCallback
no-unnecessary-use-memo0️⃣🧪Disallow unnecessary usage of useMemo
no-unnecessary-use-prefix1️⃣Enforces that a function with the use prefix should use at least one hook inside of it
prefer-use-state-lazy-initialization1️⃣Enforces function calls made inside useState to be wrapped in an initializer function

Naming Convention Rules

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

Debug Rules

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-component0️⃣🐞Reports all class components
function-component0️⃣🐞Reports all function components
hook0️⃣🐞Reports all react hooks
is-from-react0️⃣🐞Reports all identifiers that are initialized from React
jsx0️⃣🐞Reports all JSX elements and fragments

References

TypeScript

Getting started using ESLint React in your TypeScript React project

avoid-shorthand-boolean

Next Page