logoESLint React
Rules

Overview

TIP

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 Chcking
  • 🔧 - Fixable
  • 🔄 - Codemod
  • 0️⃣ - Severity 0
  • 1️⃣ - Severity 1
  • 2️⃣ - Severity 2
  • ✅ - Severity in recommended presets

X Rules

Rule✅🌟Descriptionreact
jsx-no-duplicate-props1️⃣Disallow duplicate props 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

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

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

jsx-no-duplicate-props

Next Page