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

Core Rules

Rule✅🌟DescriptionReact
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✅🌟DescriptionReact 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✅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 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✅🌟Description
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✅🌟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.

References

Previous

TypeScript

Next

avoid-shorthand-boolean