logoESLint React
Rules

Overview

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

Core Rules

Rule✅FeaturesDescriptionReact
avoid-shorthand-boolean0️⃣🔍 🔧Enforces the use of explicit boolean values for boolean attributes.
avoid-shorthand-fragment0️⃣🔍Enforces the use of explicit <Fragment> components instead of the shorthand <> or </> syntax.
no-access-state-in-setstate2️⃣🔍Prevents accessing this.state inside setState calls.
no-array-index-key1️⃣🔍Prevents using an item's index in the array as its 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️⃣🔍 🔄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️⃣🔍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️⃣🔍 🔄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 React can use as its displayName in devtools.
no-missing-key2️⃣🔍Prevents missing key on items in list rendering.
no-nested-component-definitions2️⃣🔍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-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️⃣🔍Requires that components wrapped with forwardRef must have a ref parameter.
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 the use of shorthand syntax for boolean attributes.
prefer-shorthand-fragment0️⃣🔍 🔧Enforces the use of shorthand syntax for fragments.
use-jsx-vars1️⃣Marks variables used in JSX as used.

DOM Rules

Rule✅FeaturesDescriptionReact DOM
no-dangerously-set-innerhtml1️⃣🔍Prevents DOM elements using dangerouslySetInnerHTML.
no-dangerously-set-innerhtml-with-children2️⃣🔍Prevents DOM elements using dangerouslySetInnerHTML and children at the same time.
no-find-dom-node2️⃣🔍Prevents using findDOMNode.
no-flush-sync2️⃣🔍Prevents using 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️⃣🔍Prevents using the return value of ReactDOM.render.
no-script-url1️⃣🔍Prevents using javascript: URLs as the value of attributes.
no-unknown-property1️⃣🔍 🔧 ⚙️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".
no-use-form-state2️⃣🔍 🔄Replaces the usages of useFormState with useActionState.>=19.0.0
no-void-elements-with-children2️⃣🔍Prevents using children in void DOM elements.

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-unnecessary-use-prefix1️⃣🔍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.

Naming Convention Rules

Rule✅FeaturesDescription
component-name0️⃣🔍 ⚙️Enforces naming conventions for components.
context-name0️⃣🔍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✅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.

References

Previous

TypeScript

Next

avoid-shorthand-boolean