Rules Overview

Emoji Legend

  • πŸ’Ό - Rule Category
  • πŸ’­ - Requires Type Information
  • β›” - Restriction
  • βœ”οΈ - Correctness
  • ❌ - Deprecated
  • 🎨 - Style
  • 🐞 - Debug
  • πŸ‘€ - Suspicious
  • πŸ“– - Convention
  • πŸ”’ - Security
  • πŸš€ - Performance
  • πŸ€” - Pedantic
  • 🀯 - Complexity

Core Rules

avoid-shorthand-booleanEnforces the use of shorthand syntax for boolean attributes.🎨
avoid-shorthand-fragmentEnforces the use of shorthand syntax for fragments.🎨
ensure-forward-ref-using-refRequires that components wrapped with forwardRef must have a ref parameter.βœ”οΈ
no-access-state-in-setstatePrevents accessing this.state inside setState calls.βœ”οΈ
no-array-index-keyWarns when an array index is used as a key prop.πŸ‘€
no-children-countPrevents usage of Children.count.β›”
no-children-for-eachPrevents usage of Children.forEach.β›”
no-children-mapPrevents usage ofβ›”
no-children-onlyPrevents usage of Children.only.β›”
no-children-propPrevents usage of children as a prop.β›”
no-children-to-arrayPrevents usage of Children.toArray.β›”
no-class-componentPrevents usage of class component.β›”
no-clone-elementPrevents usage of cloneElement.β›”
no-comment-textnodesPrevents comments from being inserted as text nodes.πŸ‘€
no-complicated-conditional-renderingPrevents complicated conditional rendering in JSX.🀯❌
no-component-will-mountPrevents usage of componentWillMount.β›”
no-component-will-receive-propsPrevents usage of componentWillReceiveProps.β›”
no-component-will-updatePrevents usage of componentWillUpdate.β›”
no-create-refPrevents usage of createRef.β›”
no-direct-mutation-statePrevents direct mutation of this.state.βœ”οΈ
no-duplicate-keyPrevents duplicate key props on elements in the same array or a list of children.βœ”οΈ
no-implicit-keyPrevents key prop from not being explicitly specified (e.g. spreading key prop 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 prop on items in list rendering.βœ”οΈ
no-nested-componentsPrevents nesting component definitions inside other components.βœ”οΈ
no-redundant-should-component-updatePrevents usage of shouldComponentUpdate when extending React.PureComponent.βœ”οΈ
no-set-state-in-component-did-mountDisallows calling this.setState in componentDidMount outside of functions, such as callbacks.πŸ‘€
no-set-state-in-component-did-updateDisallows calling this.setState in componentDidUpdate outside of functions, such as callbacks.πŸ‘€
no-set-state-in-component-will-updateDisallows calling this.setState in componentWillUpdate outside of functions, such as callbacks.πŸ‘€
no-string-refsDisallows using deprecated string refs.β›”
no-unsafe-component-will-mountWarns usage of UNSAFE_componentWillMount in class components.πŸ‘€
no-unsafe-component-will-receive-propsWarns usage of UNSAFE_componentWillReceiveProps in class components.πŸ‘€
no-unsafe-component-will-updateWarns 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 usage of 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 the use of useless fragment components or <> syntax.βœ”οΈ
prefer-destructuring-assignmentEnforces the use of destructuring assignment over property assignment.🎨
prefer-shorthand-booleanEnforces the use of shorthand syntax for boolean attributes.🎨
prefer-shorthand-fragmentEnforces the use of shorthand syntax for fragments.🎨

DOM Rules

dom/no-children-in-void-dom-elementsPrevents the use of children in void DOM elements.βœ”οΈ
dom/no-dangerously-set-innerhtmlPrevents DOM element using dangerouslySetInnerHTML.πŸ”’
dom/no-dangerously-set-innerhtml-with-childrenPrevents DOM element using dangerouslySetInnerHTML and children at the same time.βœ”οΈ
dom/no-find-dom-nodePrevents usage of findDOMNode.β›”
dom/no-missing-button-typeEnforces explicit button 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 usage of the return value of ReactDOM.render.β›”
dom/no-script-urlPrevents usage of javascript: URLs as the value of certain attributes.πŸ”’
dom/no-unsafe-iframe-sandboxEnforces sandbox attribute for iframe elements is not set to unsafe combinations.πŸ”’
dom/no-unsafe-target-blankPrevents the use of target="_blank" without rel="noreferrer noopener".πŸ”’

Hooks Extra Rules

hooks-extra/ensure-custom-hooks-using-other-hooksWarns when custom Hooks that don’t use other Hooks.βœ”οΈ
hooks-extra/ensure-use-callback-has-non-empty-depsWarns when useCallback is called with empty dependencies array.🧐
hooks-extra/ensure-use-memo-has-non-empty-depsWarns when useMemo is called with empty dependencies array.🧐
hooks-extra/prefer-use-state-lazy-initializationWarns function calls made inside useState calls.πŸš€

Naming Convention Rules

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.πŸ“–