Rules Overview

Emoji Legend

  • ⚙️ - Configurable
  • 🔍 - Linting
  • 🔧 - Fixable
  • 🔄 - Codemod
  • 💭 - Type Chcking
  • 🐞 - Debug
  • 🗑️ - Deprecated

Core Rules

RuleFeaturesMin. ReactDescription
ensure-forward-ref-using-ref🔍Requires that components wrapped with forwardRef must have a ref parameter.
jsx-no-duplicate-props🔍Prevents duplicate props in JSX.
jsx-uses-varsHelper rule to mark variables as used in JSX.
no-access-state-in-setstate🔍Prevents accessing this.state inside setState calls.
no-array-index-key🔍Prevents using array index as key.
no-children-count🔍Prevents using Children.count.
no-children-for-each🔍Prevents using Children.forEach.
no-children-map🔍Prevents using Children.map.
no-children-only🔍Prevents using Children.only.
no-children-prop🔍Prevents using children as a prop.
no-children-to-array🔍Prevents using Children.toArray.
no-class-component🔍Prevents using class component.
no-clone-element🔍Prevents using cloneElement.
no-comment-textnodes🔍Prevents comments from being inserted as text nodes.
no-complex-conditional-rendering🔍Prevents complex conditional rendering in JSX.
no-component-will-mount🔍 🔄16.3.0Prevents using componentWillMount.
no-component-will-receive-props🔍 🔄16.3.0Prevents using componentWillReceiveProps.
no-component-will-update🔍 🔄16.3.0Prevents using componentWillUpdate.
no-context-provider🔍 🔄19.0.0Prevents using <Context.Provider>.
no-create-ref🔍Prevents using createRef.
no-default-props🔍Prevents using defaultProps property in favor of ES6 default parameters.
no-direct-mutation-state🔍Prevents direct mutation of this.state.
no-duplicate-key🔍Prevents duplicate key on elements in the same array or a list of children.
no-forward-ref🔍 🔄19.0.0Prevents using React.forwardRef.
no-implicit-key🔍Prevents key from not being explicitly specified (e.g. spreading key from objects).
no-leaked-conditional-rendering🔍 💭Prevents problematic leaked values from being rendered.
no-missing-component-display-name🔍Enforces that all components have a displayName which can be used in devtools.
no-missing-key🔍Prevents missing key on items in list rendering.
no-nested-components🔍Prevents nesting component definitions inside other components.
no-prop-types🔍Prevents using propTypes in favor of TypeScript or another type-checking solution.
no-redundant-should-component-update🔍Prevents using shouldComponentUpdate when extending React.PureComponent.
no-set-state-in-component-did-mount🔍Prevents calling this.setState in componentDidMount outside of functions, such as callbacks.
no-set-state-in-component-did-update🔍Prevents calling this.setState in componentDidUpdate outside of functions, such as callbacks.
no-set-state-in-component-will-update🔍Prevents calling this.setState in componentWillUpdate outside of functions, such as callbacks.
no-string-refs🔍Prevents using deprecated string refs.
no-unsafe-component-will-mount🔍Warns the usage of UNSAFE_componentWillMount in class components.
no-unsafe-component-will-receive-props🔍Warns the usage of UNSAFE_componentWillReceiveProps in class components.
no-unsafe-component-will-update🔍Warns the usage of UNSAFE_componentWillUpdate in class components.
no-unstable-context-value🔍Prevents non-stable values (i.e. object literals) from being used as a value for Context.Provider.
no-unstable-default-props🔍Prevents using referential-type values as default props in object destructuring.
no-unused-class-component-members🔍Warns unused class component methods and properties.
no-unused-state🔍Warns unused class component state.
no-useless-fragment🔍 ⚙️Prevents using useless fragment components or <> syntax.
prefer-destructuring-assignment🔍Enforces using destructuring assignment over property assignment.
prefer-react-namespace-import🔍 🔧Enforce React is imported via a namespace import
prefer-read-only-props🔍 💭Enforces read-only props in components.
prefer-shorthand-boolean🔍 🔧Enforces using shorthand syntax for boolean attributes.
prefer-shorthand-fragment🔍Enforces using shorthand syntax for fragments.

DOM Rules

RuleFeaturesDescription
no-children-in-void-dom-elements🔍Prevents using children in void DOM elements.
no-dangerously-set-innerhtml-with-children🔍Prevents DOM element using dangerouslySetInnerHTML and children at the same time.
no-dangerously-set-innerhtml🔍Prevents DOM element using dangerouslySetInnerHTML.
no-find-dom-node🔍Prevents using findDOMNode.
no-missing-button-type🔍Enforces explicit type attribute for <button> elements.
no-missing-iframe-sandbox🔍Enforces explicit sandbox attribute for iframe elements.
no-namespace🔍Enforces the absence of a namespace in React elements.
no-render-return-value🔍Prevents using the return value of ReactDOM.render.
no-script-url🔍Prevents using javascript: URLs as the value of certain attributes.
no-unknown-property🔍 🔧 ⚙️Prevents using unknown DOM property
no-unsafe-iframe-sandbox🔍Enforces sandbox attribute for iframe elements is not set to unsafe combinations.
no-unsafe-target-blank🔍Prevents using target="_blank" without rel="noreferrer noopener".

Web API Rules

RuleFeaturesDescription
no-leaked-event-listener🔍Prevents leaked addEventListener in a component or custom hook.
no-leaked-interval🔍Prevents leaked setInterval in a component or custom hook.
no-leaked-resize-observer🔍Prevents leaked ResizeObserver in a component or custom hook.
no-leaked-timeout🔍Prevents leaked setTimeout in a component or custom hook.

Hooks Extra Rules

RuleFeaturesDescription
no-direct-set-state-in-use-effect🔍Disallow direct calls to the set function of useState in useEffect.
no-direct-set-state-in-use-layout-effect🔍Disallow direct calls to the set function of useState in useLayoutEffect.
no-redundant-custom-hook🔍Warns when custom Hooks that don’t use other Hooks.
no-unnecessary-use-callback🔍Disallow unnecessary usage of useCallback.
no-unnecessary-use-memo🔍Disallow unnecessary usage of useMemo.
prefer-use-state-lazy-initialization🔍Warns function calls made inside useState calls.

Naming Convention Rules

RuleFeaturesDescription
component-name🔍 ⚙️Enforces naming conventions for components.
filename🔍 ⚙️Enforces naming convention for JSX files.
filename-extension🔍 ⚙️Enforces consistent use of the JSX file extension.
use-state🔍Enforces destructuring and symmetric naming of useState hook value and setter variables.

Debug Rules

RuleFeaturesDescription
class-component🐞Reports all class components.
function-component🐞Reports all function components.
hook🐞Reports all react hooks.
is-from-react🐞Reports all identifiers that are initialized from React.
Configurationensure-forward-ref-using-ref