Rules Overview

Emoji Legend

  • 💼 - Rule Category
  • ⛔ - Restriction
  • ✔️ - Correctness
  • 🎨 - Style
  • 🐞 - Debug
  • 📖 - Convention
  • 🔒 - Security
  • 🚀 - Performance
  • 🤔 - Pedantic
  • 🤯 - Complexity
  • 🧐 - Suspicious
  • 💭 - Requires Type Information
  • 🔧 - Fixable
  • 🗑️ - Deprecated
  • 🚧 - WIP

Core Rules

RuleDescription💼💭
avoid-shorthand-booleanPrevents using shorthand syntax for boolean attributes.🎨🔧
avoid-shorthand-fragmentPrevents using shorthand syntax for fragments.🎨
ensure-forward-ref-using-refRequires that components wrapped with forwardRef must have a ref parameter.✔️
jsx-no-duplicate-propsPrevents duplicate props in JSX.✔️
jsx-uses-varsPrevents variables used in JSX to be marked as unused.✔️
no-access-state-in-setstatePrevents accessing this.state inside setState calls.✔️
no-array-index-keyPrevents using array index as key.🧐
no-children-countPrevents using Children.count.
no-children-for-eachPrevents using Children.forEach.
no-children-mapPrevents using Children.map.
no-children-onlyPrevents using Children.only.
no-children-propPrevents using children as a prop.
no-children-to-arrayPrevents using Children.toArray.
no-class-componentPrevents using class component.
no-clone-elementPrevents using cloneElement.
no-comment-textnodesPrevents comments from being inserted as text nodes.🧐
no-complex-conditional-renderingPrevents complex conditional rendering in JSX.🤯
no-component-will-mountPrevents using componentWillMount.
no-component-will-receive-propsPrevents using componentWillReceiveProps.
no-component-will-updatePrevents using componentWillUpdate.
no-create-refPrevents using createRef.
no-default-propsPrevents using defaultProps property in favor of ES6 default parameters.✔️
no-direct-mutation-statePrevents direct mutation of this.state.✔️
no-duplicate-keyPrevents duplicate key on elements in the same array or a list of children.✔️
no-forward-refPrevents using React.forwardRef.
no-implicit-keyPrevents key from not being explicitly specified (e.g. spreading key from objects).🧐
no-leaked-conditional-renderingPrevents problematic leaked values from being rendered.🧐💭
no-missing-component-display-nameEnforces that all components have a displayName which can be used in devtools.🐞
no-missing-keyPrevents missing key on items in list rendering.✔️
no-nested-componentsPrevents nesting component definitions inside other components.✔️
no-prop-typesPrevents using propTypes in favor of TypeScript or another type-checking solution.
no-redundant-should-component-updatePrevents using shouldComponentUpdate when extending React.PureComponent.✔️
no-set-state-in-component-did-mountPrevents calling this.setState in componentDidMount outside of functions, such as callbacks.🧐
no-set-state-in-component-did-updatePrevents calling this.setState in componentDidUpdate outside of functions, such as callbacks.🧐
no-set-state-in-component-will-updatePrevents calling this.setState in componentWillUpdate outside of functions, such as callbacks.🧐
no-string-refsPrevents using deprecated string refs.
no-unsafe-component-will-mountWarns the usage of UNSAFE_componentWillMount in class components.🧐
no-unsafe-component-will-receive-propsWarns the usage of UNSAFE_componentWillReceiveProps in class components.🧐
no-unsafe-component-will-updateWarns the usage of UNSAFE_componentWillUpdate in class components.🧐
no-unstable-context-valuePrevents non-stable values (i.e. object literals) from being used as a value for Context.Provider.🚀
no-unstable-default-propsPrevents using referential-type values as default props in object destructuring.🚀
no-unused-class-component-membersWarns unused class component methods and properties.✔️
no-unused-stateWarns unused class component state.✔️
no-useless-fragmentPrevents using useless fragment components or <> syntax.✔️
prefer-destructuring-assignmentEnforces using destructuring assignment over property assignment.🎨
prefer-react-namespace-importEnforce React is imported via a namespace import🎨🔧
prefer-read-only-propsEnforces read-only props in components.✔️💭
prefer-shorthand-booleanEnforces using shorthand syntax for boolean attributes.🎨🔧
prefer-shorthand-fragmentEnforces using shorthand syntax for fragments.🎨

DOM Rules

RuleDescription💼💭
dom/no-children-in-void-dom-elementsPrevents using children in void DOM elements.✔️
dom/no-dangerously-set-innerhtml-with-childrenPrevents DOM element using dangerouslySetInnerHTML and children at the same time.✔️
dom/no-dangerously-set-innerhtmlPrevents DOM element using dangerouslySetInnerHTML.🔒
dom/no-find-dom-nodePrevents using findDOMNode.
dom/no-missing-button-typeEnforces explicit type attribute for <button> elements.✔️
dom/no-missing-iframe-sandboxEnforces explicit sandbox attribute for iframe elements.🔒
dom/no-namespaceEnforces the absence of a namespace in React elements.✔️
dom/no-render-return-valuePrevents using the return value of ReactDOM.render.
dom/no-script-urlPrevents using javascript: URLs as the value of certain attributes.🔒
dom/no-unknown-propertyPrevents using unknown DOM property🧐🔧
dom/no-unsafe-iframe-sandboxEnforces sandbox attribute for iframe elements is not set to unsafe combinations.🔒
dom/no-unsafe-target-blankPrevents using target="_blank" without rel="noreferrer noopener".🔒

Web API Rules

RuleDescription💼💭
web-api/no-leaked-event-listenerPrevents leaked addEventListener in a component or custom hook.✔️
web-api/no-leaked-intervalPrevents leaked setInterval in a component or custom hook.✔️
web-api/no-leaked-resize-observerPrevents leaked ResizeObserver in a component or custom hook.✔️
web-api/no-leaked-timeoutPrevents leaked setTimeout in a component or custom hook.✔️

Hooks Extra Rules

RuleDescription💼💭
hooks-extra/no-direct-set-state-in-use-effectDisallow direct calls to the set function of useState in useEffect.✔️
hooks-extra/no-direct-set-state-in-use-layout-effectDisallow direct calls to the set function of useState in useLayoutEffect.✔️
hooks-extra/no-redundant-custom-hookWarns when custom Hooks that don’t use other Hooks.✔️
hooks-extra/no-unnecessary-use-callbackDisallow unnecessary usage of useCallback.✔️
hooks-extra/no-unnecessary-use-memoDisallow unnecessary usage of useMemo.✔️
hooks-extra/prefer-use-state-lazy-initializationWarns function calls made inside useState calls.🚀

Naming Convention Rules

RuleDescription💼💭
naming-convention/component-nameEnforces naming conventions for components.📖
naming-convention/filenameEnforces naming convention for JSX files.📖
naming-convention/filename-extensionEnforces consistent use of the JSX file extension.📖
naming-convention/use-stateEnforces destructuring and symmetric naming of useState hook value and setter variables.📖

Debug Rules

RuleDescription💼💭
debug/class-componentReports all class components.🐞
debug/function-componentReports all function components.🐞
debug/hookReports all react hooks.🐞
debug/is-from-reactReports all identifiers that are initialized from React.🐞