Rules Overview
Emoji Legend
- πΌ - Rule Category
- β - Restriction
- βοΈ - Correctness
- π¨ - Style
- π - Debug
- π - Convention
- π - Security
- π€ - Pedantic
- π€― - Complexity
- π§ - Suspicious
- π - Performance
- π - New
- π§ - WIP
- π - Strict
- ποΈ - Deprecated
- π - Requires Type Information
Core Rules
Rule | Description | πΌ | π | |
---|---|---|---|---|
avoid-shorthand-boolean | Prevents using shorthand syntax for boolean attributes. | π¨ | ||
avoid-shorthand-fragment | Prevents using shorthand syntax for fragments. | π¨ | ||
ensure-forward-ref-using-ref | Requires that components wrapped with forwardRef must have a ref parameter. | βοΈ | ||
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 | Prevents using componentWillMount . | β | ||
no-component-will-receive-props | Prevents using componentWillReceiveProps . | β | ||
no-component-will-update | Prevents using componentWillUpdate . | β | ||
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-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
Rule | Description | πΌ | π | |
---|---|---|---|---|
dom/no-children-in-void-dom-elements | Prevents using children in void DOM elements . | βοΈ | ||
dom/no-dangerously-set-innerhtml | Prevents DOM element using dangerouslySetInnerHTML . | π | ||
dom/no-dangerously-set-innerhtml-with-children | Prevents DOM element using dangerouslySetInnerHTML and children at the same time. | βοΈ | ||
dom/no-find-dom-node | Prevents using findDOMNode . | β | ||
dom/no-missing-button-type | Enforces explicit type attribute for <button> elements. | βοΈ | π | |
dom/no-missing-iframe-sandbox | Enforces explicit sandbox attribute for iframe elements. | π | ||
dom/no-namespace | Enforces the absence of a namespace in React elements. | βοΈ | ||
dom/no-render-return-value | Prevents using the return value of ReactDOM.render . | β | ||
dom/no-script-url | Prevents using javascript: URLs as the value of certain attributes. | π | ||
dom/no-unsafe-iframe-sandbox | Enforces sandbox attribute for iframe elements is not set to unsafe combinations. | π | ||
dom/no-unsafe-target-blank | Prevents using target="_blank" without rel="noreferrer noopener" . | π |
Web API Rules
Rule | Description | πΌ | π | |
---|---|---|---|---|
web-api/no-leaked-event-listener | Prevents leaked addEventListener in a component or custom hook. | βοΈ | π | |
web-api/no-leaked-interval | Prevents leaked setInterval in a component or custom hook. | βοΈ | π | |
web-api/no-leaked-resize-observer | Prevents leaked ResizeObserver in a component or custom hook. | βοΈ | π | |
web-api/no-leaked-timeout | Prevents leaked setTimeout in a component or custom hook. | βοΈ | π |
Hooks Extra Rules
Rule | Description | πΌ | π | |
---|---|---|---|---|
hooks-extra/no-direct-set-state-in-use-effect | Disallow direct calls to the set function of useState in useEffect . | βοΈ | π | |
hooks-extra/no-direct-set-state-in-use-layout-effect | Disallow direct calls to the set function of useState in useLayoutEffect . | βοΈ | π | |
hooks-extra/no-redundant-custom-hook | Warns when custom Hooks that donβt use other Hooks. | βοΈ | ||
hooks-extra/no-unnecessary-use-callback | Disallow unnecessary usage of useCallback . | βοΈ | π | |
hooks-extra/no-unnecessary-use-memo | Disallow unnecessary usage of useMemo . | βοΈ | π | |
hooks-extra/prefer-use-state-lazy-initialization | Warns function calls made inside useState calls. | π |
Naming Convention Rules
Rule | Description | πΌ | π | |
---|---|---|---|---|
naming-convention/component-name | Enforces naming conventions for components. | π | ||
naming-convention/filename | Enforces naming convention for JSX files. | π | ||
naming-convention/filename-extension | Enforces consistent use of the JSX file extension. | π | ||
naming-convention/use-state | Enforces destructuring and symmetric naming of useState hook value and setter variables. | π |
Debug Rules
Rule | Description | πΌ | π | |
---|---|---|---|---|
debug/class-component | Reports all class components. | π | ||
debug/function-component | Reports all function components. | π | ||
debug/hook | Reports all react hooks. | π | ||
debug/is-from-react | Reports all identifiers that are initialized from React. | π |