logoESLint React
Rules

Overview

Legend

  • ⚙️ - Configurable
  • 🔍 - Linting
  • 🔧 - Fixable
  • 🔄 - Codemod
  • 💭 - Type Chcking
  • 🐞 - Debug
  • 0️⃣ - Severity 0
  • 1️⃣ - Severity 1
  • 2️⃣ - Severity 2
  • ✅ - Severity in recommended presets

Core Rules

Rule✅FeaturesDescriptionReact
ensure-forward-ref-using-ref1️⃣🔍Requires that components wrapped with forwardRef must have a ref parameter.
no-access-state-in-setstate2️⃣🔍Prevents accessing this.state inside setState calls.
no-array-index-key1️⃣🔍Prevents using array index as key.
no-children-count1️⃣🔍Prevents using Children.count.
no-children-for-each1️⃣🔍Prevents using Children.forEach.
no-children-map1️⃣🔍Prevents using Children.map.
no-children-only1️⃣🔍Prevents using Children.only.
no-children-prop0️⃣🔍Prevents using children as a prop.
no-children-to-array1️⃣🔍Prevents using Children.toArray.
no-class-component0️⃣🔍Prevents using class component.
no-clone-element1️⃣🔍Prevents using cloneElement.
no-comment-textnodes1️⃣🔍Prevents comments from being inserted as text nodes.
no-complex-conditional-rendering0️⃣🔍Prevents complex conditional rendering in JSX.
no-component-will-mount2️⃣🔍 🔄Prevents using componentWillMount.>=16.3.0
no-component-will-receive-props2️⃣🔍 🔄Prevents using componentWillReceiveProps.>=16.3.0
no-component-will-update2️⃣🔍 🔄Prevents using componentWillUpdate.>=16.3.0
no-context-provider1️⃣🔍 🔄Prevents using <Context.Provider>.>=19.0.0
no-create-ref2️⃣🔍Prevents using createRef.
no-default-props2️⃣🔍Prevents using defaultProps property in favor of ES6 default parameters.
no-direct-mutation-state2️⃣🔍Prevents direct mutation of this.state.
no-duplicate-jsx-props1️⃣🔍Prevents duplicate props in JSX.
no-duplicate-key2️⃣🔍Prevents duplicate key on elements in the same array or a list of children.
no-forward-ref1️⃣🔍 🔄Prevents using React.forwardRef.>=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-key2️⃣🔍Prevents missing key on items in list rendering.
no-nested-components2️⃣🔍Prevents nesting component definitions inside other components.
no-prop-types2️⃣🔍Prevents using propTypes in favor of TypeScript or another type-checking solution.
no-redundant-should-component-update2️⃣🔍Prevents using shouldComponentUpdate when extending React.PureComponent.
no-set-state-in-component-did-mount1️⃣🔍Prevents calling this.setState in componentDidMount outside of functions, such as callbacks.
no-set-state-in-component-did-update1️⃣🔍Prevents calling this.setState in componentDidUpdate outside of functions, such as callbacks.
no-set-state-in-component-will-update1️⃣🔍Prevents calling this.setState in componentWillUpdate outside of functions, such as callbacks.
no-string-refs2️⃣🔍Prevents using deprecated string refs.
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-members0️⃣🔍Warns unused class component methods and properties.
no-unused-state1️⃣🔍Warns unused class component state.
no-use-context1️⃣🔍 🔄Prevents using useContext in favor of use.>=19.0.0
no-useless-fragment1️⃣🔍 🔧 ⚙️Prevents using useless fragment components or <> syntax.
prefer-destructuring-assignment0️⃣🔍Enforces using destructuring assignment over property assignment.
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 using shorthand syntax for boolean attributes.
prefer-shorthand-fragment0️⃣🔍 🔧Enforces using shorthand syntax for fragments.
use-jsx-vars1️⃣Helpes eslint/no-unused-vars to correctly detect variables used in JSX.

Deprecated

RuleReplaced by
jsx-uses-varsuse-jsx-vars
jsx-no-duplicate-propsno-duplicate-jsx-props
no-complicated-conditional-renderingno-complex-conditional-rendering

DOM Rules

Rule✅FeaturesDescription
no-void-elements-with-children2️⃣🔍Prevents using children in void DOM elements.
no-dangerously-set-innerhtml-with-children2️⃣🔍Prevents DOM element using dangerouslySetInnerHTML and children at the same time.
no-dangerously-set-innerhtml1️⃣🔍Prevents DOM element using dangerouslySetInnerHTML.
no-find-dom-node2️⃣🔍Prevents using findDOMNode.
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-render-return-value2️⃣🔍Prevents using the return value of ReactDOM.render.
no-script-url1️⃣🔍Prevents using javascript: URLs as the value of attributes.
no-unknown-property0️⃣🔍 🔧 ⚙️Prevents using unknown DOM property
no-unsafe-iframe-sandbox1️⃣🔍Enforces sandbox attribute for iframe elements is not set to unsafe combinations.
no-unsafe-target-blank1️⃣🔍Prevents using target="_blank" without rel="noreferrer noopener".

Deprecated

RuleReplaced by
dom-no-children-in-void-dom-elementsno-void-elements-with-children

Web API Rules

Rule✅FeaturesDescription
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✅FeaturesDescription
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-useless-custom-hooks1️⃣🔍Enforces custom Hooks to use at least one other Hook inside.
prefer-use-state-lazy-initialization1️⃣🔍Enforces function calls made inside useState to be wrapped in an initializer function.

Deprecated

RuleReplaced by
no-redundant-custom-hookno-useless-custom-hooks
ensure-custom-hooks-using-other-hooksno-useless-custom-hooks
ensure-use-memo-has-non-empty-depsno-unnecessary-use-memo
ensure-use-callback-has-non-empty-depsno-unnecessary-use-callback

Naming Convention Rules

Rule✅FeaturesDescription
component-name0️⃣🔍 ⚙️Enforces naming conventions for components.
filename0️⃣🔍 ⚙️Enforces naming convention for JSX files.
filename-extension0️⃣🔍 ⚙️Enforces consistent use of the JSX file extension.
use-state0️⃣🔍Enforces destructuring and symmetric naming of useState hook value and setter variables.

Debug Rules

Rule✅FeaturesDescription
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.

Previous

TypeScript with alternative parser

Next

ensure-forward-ref-using-ref