diff --git a/README.md b/README.md index ccdcb2bc0d..7abbb08db2 100644 --- a/README.md +++ b/README.md @@ -286,108 +286,109 @@ module.exports = [ 💡 Manually fixable by [editor suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).\ ❌ Deprecated. -| Name                                 | Description | 💼 | 🔧 | 💡 | ❌ | -| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------- | :- | :- | :- | :- | -| [boolean-prop-naming](docs/rules/boolean-prop-naming.md) | Enforces consistent naming for boolean props | | | | | -| [button-has-type](docs/rules/button-has-type.md) | Disallow usage of `button` elements without an explicit `type` attribute | | | | | -| [default-props-match-prop-types](docs/rules/default-props-match-prop-types.md) | Enforce all defaultProps have a corresponding non-required PropType | | | | | -| [destructuring-assignment](docs/rules/destructuring-assignment.md) | Enforce consistent usage of destructuring assignment of props, state, and context | | 🔧 | | | -| [display-name](docs/rules/display-name.md) | Disallow missing displayName in a React component definition | 💼 | | | | -| [forbid-component-props](docs/rules/forbid-component-props.md) | Disallow certain props on components | | | | | -| [forbid-dom-props](docs/rules/forbid-dom-props.md) | Disallow certain props on DOM Nodes | | | | | -| [forbid-elements](docs/rules/forbid-elements.md) | Disallow certain elements | | | | | -| [forbid-foreign-prop-types](docs/rules/forbid-foreign-prop-types.md) | Disallow using another component's propTypes | | | | | -| [forbid-prop-types](docs/rules/forbid-prop-types.md) | Disallow certain propTypes | | | | | -| [function-component-definition](docs/rules/function-component-definition.md) | Enforce a specific function type for function components | | 🔧 | | | -| [hook-use-state](docs/rules/hook-use-state.md) | Ensure destructuring and symmetric naming of useState hook value and setter variables | | | 💡 | | -| [iframe-missing-sandbox](docs/rules/iframe-missing-sandbox.md) | Enforce sandbox attribute on iframe elements | | | | | -| [jsx-boolean-value](docs/rules/jsx-boolean-value.md) | Enforce boolean attributes notation in JSX | | 🔧 | | | -| [jsx-child-element-spacing](docs/rules/jsx-child-element-spacing.md) | Enforce or disallow spaces inside of curly braces in JSX attributes and expressions | | | | | -| [jsx-closing-bracket-location](docs/rules/jsx-closing-bracket-location.md) | Enforce closing bracket location in JSX | | 🔧 | | | -| [jsx-closing-tag-location](docs/rules/jsx-closing-tag-location.md) | Enforce closing tag location for multiline JSX | | 🔧 | | | -| [jsx-curly-brace-presence](docs/rules/jsx-curly-brace-presence.md) | Disallow unnecessary JSX expressions when literals alone are sufficient or enforce JSX expressions on literals in JSX children or attributes | | 🔧 | | | -| [jsx-curly-newline](docs/rules/jsx-curly-newline.md) | Enforce consistent linebreaks in curly braces in JSX attributes and expressions | | 🔧 | | | -| [jsx-curly-spacing](docs/rules/jsx-curly-spacing.md) | Enforce or disallow spaces inside of curly braces in JSX attributes and expressions | | 🔧 | | | -| [jsx-equals-spacing](docs/rules/jsx-equals-spacing.md) | Enforce or disallow spaces around equal signs in JSX attributes | | 🔧 | | | -| [jsx-filename-extension](docs/rules/jsx-filename-extension.md) | Disallow file extensions that may contain JSX | | | | | -| [jsx-first-prop-new-line](docs/rules/jsx-first-prop-new-line.md) | Enforce proper position of the first property in JSX | | 🔧 | | | -| [jsx-fragments](docs/rules/jsx-fragments.md) | Enforce shorthand or standard form for React fragments | | 🔧 | | | -| [jsx-handler-names](docs/rules/jsx-handler-names.md) | Enforce event handler naming conventions in JSX | | | | | -| [jsx-indent](docs/rules/jsx-indent.md) | Enforce JSX indentation | | 🔧 | | | -| [jsx-indent-props](docs/rules/jsx-indent-props.md) | Enforce props indentation in JSX | | 🔧 | | | -| [jsx-key](docs/rules/jsx-key.md) | Disallow missing `key` props in iterators/collection literals | 💼 | | | | -| [jsx-max-depth](docs/rules/jsx-max-depth.md) | Enforce JSX maximum depth | | | | | -| [jsx-max-props-per-line](docs/rules/jsx-max-props-per-line.md) | Enforce maximum of props on a single line in JSX | | 🔧 | | | -| [jsx-newline](docs/rules/jsx-newline.md) | Require or prevent a new line after jsx elements and expressions. | | 🔧 | | | -| [jsx-no-bind](docs/rules/jsx-no-bind.md) | Disallow `.bind()` or arrow functions in JSX props | | | | | -| [jsx-no-comment-textnodes](docs/rules/jsx-no-comment-textnodes.md) | Disallow comments from being inserted as text nodes | 💼 | | | | -| [jsx-no-constructed-context-values](docs/rules/jsx-no-constructed-context-values.md) | Disallows JSX context provider values from taking values that will cause needless rerenders | | | | | -| [jsx-no-duplicate-props](docs/rules/jsx-no-duplicate-props.md) | Disallow duplicate properties in JSX | 💼 | | | | -| [jsx-no-leaked-render](docs/rules/jsx-no-leaked-render.md) | Disallow problematic leaked values from being rendered | | 🔧 | | | -| [jsx-no-literals](docs/rules/jsx-no-literals.md) | Disallow usage of string literals in JSX | | | | | -| [jsx-no-script-url](docs/rules/jsx-no-script-url.md) | Disallow usage of `javascript:` URLs | | | | | -| [jsx-no-target-blank](docs/rules/jsx-no-target-blank.md) | Disallow `target="_blank"` attribute without `rel="noreferrer"` | 💼 | 🔧 | | | -| [jsx-no-undef](docs/rules/jsx-no-undef.md) | Disallow undeclared variables in JSX | 💼 | | | | -| [jsx-no-useless-fragment](docs/rules/jsx-no-useless-fragment.md) | Disallow unnecessary fragments | | 🔧 | | | -| [jsx-one-expression-per-line](docs/rules/jsx-one-expression-per-line.md) | Require one JSX element per line | | 🔧 | | | -| [jsx-pascal-case](docs/rules/jsx-pascal-case.md) | Enforce PascalCase for user-defined JSX components | | | | | -| [jsx-props-no-multi-spaces](docs/rules/jsx-props-no-multi-spaces.md) | Disallow multiple spaces between inline JSX props | | 🔧 | | | -| [jsx-props-no-spreading](docs/rules/jsx-props-no-spreading.md) | Disallow JSX prop spreading | | | | | -| [jsx-sort-default-props](docs/rules/jsx-sort-default-props.md) | Enforce defaultProps declarations alphabetical sorting | | | | ❌ | -| [jsx-sort-props](docs/rules/jsx-sort-props.md) | Enforce props alphabetical sorting | | 🔧 | | | -| [jsx-space-before-closing](docs/rules/jsx-space-before-closing.md) | Enforce spacing before closing bracket in JSX | | 🔧 | | ❌ | -| [jsx-tag-spacing](docs/rules/jsx-tag-spacing.md) | Enforce whitespace in and around the JSX opening and closing brackets | | 🔧 | | | -| [jsx-uses-react](docs/rules/jsx-uses-react.md) | Disallow React to be incorrectly marked as unused | 💼 | | | | -| [jsx-uses-vars](docs/rules/jsx-uses-vars.md) | Disallow variables used in JSX to be incorrectly marked as unused | 💼 | | | | -| [jsx-wrap-multilines](docs/rules/jsx-wrap-multilines.md) | Disallow missing parentheses around multiline JSX | | 🔧 | | | -| [no-access-state-in-setstate](docs/rules/no-access-state-in-setstate.md) | Disallow when this.state is accessed within setState | | | | | -| [no-adjacent-inline-elements](docs/rules/no-adjacent-inline-elements.md) | Disallow adjacent inline elements not separated by whitespace. | | | | | -| [no-array-index-key](docs/rules/no-array-index-key.md) | Disallow usage of Array index in keys | | | | | -| [no-arrow-function-lifecycle](docs/rules/no-arrow-function-lifecycle.md) | Lifecycle methods should be methods on the prototype, not class fields | | 🔧 | | | -| [no-children-prop](docs/rules/no-children-prop.md) | Disallow passing of children as props | 💼 | | | | -| [no-danger](docs/rules/no-danger.md) | Disallow usage of dangerous JSX properties | | | | | -| [no-danger-with-children](docs/rules/no-danger-with-children.md) | Disallow when a DOM element is using both children and dangerouslySetInnerHTML | 💼 | | | | -| [no-deprecated](docs/rules/no-deprecated.md) | Disallow usage of deprecated methods | 💼 | | | | -| [no-did-mount-set-state](docs/rules/no-did-mount-set-state.md) | Disallow usage of setState in componentDidMount | | | | | -| [no-did-update-set-state](docs/rules/no-did-update-set-state.md) | Disallow usage of setState in componentDidUpdate | | | | | -| [no-direct-mutation-state](docs/rules/no-direct-mutation-state.md) | Disallow direct mutation of this.state | 💼 | | | | -| [no-find-dom-node](docs/rules/no-find-dom-node.md) | Disallow usage of findDOMNode | 💼 | | | | -| [no-invalid-html-attribute](docs/rules/no-invalid-html-attribute.md) | Disallow usage of invalid attributes | | 🔧 | | | -| [no-is-mounted](docs/rules/no-is-mounted.md) | Disallow usage of isMounted | 💼 | | | | -| [no-multi-comp](docs/rules/no-multi-comp.md) | Disallow multiple component definition per file | | | | | -| [no-namespace](docs/rules/no-namespace.md) | Enforce that namespaces are not used in React elements | | | | | -| [no-object-type-as-default-prop](docs/rules/no-object-type-as-default-prop.md) | Disallow usage of referential-type variables as default param in functional component | | | | | -| [no-redundant-should-component-update](docs/rules/no-redundant-should-component-update.md) | Disallow usage of shouldComponentUpdate when extending React.PureComponent | | | | | -| [no-render-return-value](docs/rules/no-render-return-value.md) | Disallow usage of the return value of ReactDOM.render | 💼 | | | | -| [no-set-state](docs/rules/no-set-state.md) | Disallow usage of setState | | | | | -| [no-string-refs](docs/rules/no-string-refs.md) | Disallow using string references | 💼 | | | | -| [no-this-in-sfc](docs/rules/no-this-in-sfc.md) | Disallow `this` from being used in stateless functional components | | | | | -| [no-typos](docs/rules/no-typos.md) | Disallow common typos | | | | | -| [no-unescaped-entities](docs/rules/no-unescaped-entities.md) | Disallow unescaped HTML entities from appearing in markup | 💼 | | | | -| [no-unknown-property](docs/rules/no-unknown-property.md) | Disallow usage of unknown DOM property | 💼 | 🔧 | | | -| [no-unsafe](docs/rules/no-unsafe.md) | Disallow usage of unsafe lifecycle methods | | | | | -| [no-unstable-nested-components](docs/rules/no-unstable-nested-components.md) | Disallow creating unstable components inside components | | | | | -| [no-unused-class-component-methods](docs/rules/no-unused-class-component-methods.md) | Disallow declaring unused methods of component class | | | | | -| [no-unused-prop-types](docs/rules/no-unused-prop-types.md) | Disallow definitions of unused propTypes | | | | | -| [no-unused-state](docs/rules/no-unused-state.md) | Disallow definitions of unused state | | | | | -| [no-will-update-set-state](docs/rules/no-will-update-set-state.md) | Disallow usage of setState in componentWillUpdate | | | | | -| [prefer-es6-class](docs/rules/prefer-es6-class.md) | Enforce ES5 or ES6 class for React Components | | | | | -| [prefer-exact-props](docs/rules/prefer-exact-props.md) | Prefer exact proptype definitions | | | | | -| [prefer-read-only-props](docs/rules/prefer-read-only-props.md) | Enforce that props are read-only | | 🔧 | | | -| [prefer-stateless-function](docs/rules/prefer-stateless-function.md) | Enforce stateless components to be written as a pure function | | | | | -| [prop-types](docs/rules/prop-types.md) | Disallow missing props validation in a React component definition | 💼 | | | | -| [react-in-jsx-scope](docs/rules/react-in-jsx-scope.md) | Disallow missing React when using JSX | 💼 | | | | -| [require-default-props](docs/rules/require-default-props.md) | Enforce a defaultProps definition for every prop that is not a required prop | | | | | -| [require-optimization](docs/rules/require-optimization.md) | Enforce React components to have a shouldComponentUpdate method | | | | | -| [require-render-return](docs/rules/require-render-return.md) | Enforce ES5 or ES6 class for returning value in render function | 💼 | | | | -| [self-closing-comp](docs/rules/self-closing-comp.md) | Disallow extra closing tags for components without children | | 🔧 | | | -| [sort-comp](docs/rules/sort-comp.md) | Enforce component methods order | | | | | -| [sort-default-props](docs/rules/sort-default-props.md) | Enforce defaultProps declarations alphabetical sorting | | | | | -| [sort-prop-types](docs/rules/sort-prop-types.md) | Enforce propTypes declarations alphabetical sorting | | 🔧 | | | -| [state-in-constructor](docs/rules/state-in-constructor.md) | Enforce class component state initialization style | | | | | -| [static-property-placement](docs/rules/static-property-placement.md) | Enforces where React component static properties should be positioned. | | | | | -| [style-prop-object](docs/rules/style-prop-object.md) | Enforce style prop value is an object | | | | | -| [void-dom-elements-no-children](docs/rules/void-dom-elements-no-children.md) | Disallow void DOM elements (e.g. ``, `
`) from receiving children | | | | | +| Name                                  | Description | 💼 | 🔧 | 💡 | ❌ | +| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------- | :- | :- | :- | :- | +| [boolean-prop-naming](docs/rules/boolean-prop-naming.md) | Enforces consistent naming for boolean props | | | | | +| [button-has-type](docs/rules/button-has-type.md) | Disallow usage of `button` elements without an explicit `type` attribute | | | | | +| [default-props-match-prop-types](docs/rules/default-props-match-prop-types.md) | Enforce all defaultProps have a corresponding non-required PropType | | | | | +| [destructuring-assignment](docs/rules/destructuring-assignment.md) | Enforce consistent usage of destructuring assignment of props, state, and context | | 🔧 | | | +| [display-name](docs/rules/display-name.md) | Disallow missing displayName in a React component definition | 💼 | | | | +| [ensure-matching-remove-event-listener](docs/rules/ensure-matching-remove-event-listener.md) | Enforces that every addEventListener has a matching removeEventListener in the return statement of the same useEffect block | | | | | +| [forbid-component-props](docs/rules/forbid-component-props.md) | Disallow certain props on components | | | | | +| [forbid-dom-props](docs/rules/forbid-dom-props.md) | Disallow certain props on DOM Nodes | | | | | +| [forbid-elements](docs/rules/forbid-elements.md) | Disallow certain elements | | | | | +| [forbid-foreign-prop-types](docs/rules/forbid-foreign-prop-types.md) | Disallow using another component's propTypes | | | | | +| [forbid-prop-types](docs/rules/forbid-prop-types.md) | Disallow certain propTypes | | | | | +| [function-component-definition](docs/rules/function-component-definition.md) | Enforce a specific function type for function components | | 🔧 | | | +| [hook-use-state](docs/rules/hook-use-state.md) | Ensure destructuring and symmetric naming of useState hook value and setter variables | | | 💡 | | +| [iframe-missing-sandbox](docs/rules/iframe-missing-sandbox.md) | Enforce sandbox attribute on iframe elements | | | | | +| [jsx-boolean-value](docs/rules/jsx-boolean-value.md) | Enforce boolean attributes notation in JSX | | 🔧 | | | +| [jsx-child-element-spacing](docs/rules/jsx-child-element-spacing.md) | Enforce or disallow spaces inside of curly braces in JSX attributes and expressions | | | | | +| [jsx-closing-bracket-location](docs/rules/jsx-closing-bracket-location.md) | Enforce closing bracket location in JSX | | 🔧 | | | +| [jsx-closing-tag-location](docs/rules/jsx-closing-tag-location.md) | Enforce closing tag location for multiline JSX | | 🔧 | | | +| [jsx-curly-brace-presence](docs/rules/jsx-curly-brace-presence.md) | Disallow unnecessary JSX expressions when literals alone are sufficient or enforce JSX expressions on literals in JSX children or attributes | | 🔧 | | | +| [jsx-curly-newline](docs/rules/jsx-curly-newline.md) | Enforce consistent linebreaks in curly braces in JSX attributes and expressions | | 🔧 | | | +| [jsx-curly-spacing](docs/rules/jsx-curly-spacing.md) | Enforce or disallow spaces inside of curly braces in JSX attributes and expressions | | 🔧 | | | +| [jsx-equals-spacing](docs/rules/jsx-equals-spacing.md) | Enforce or disallow spaces around equal signs in JSX attributes | | 🔧 | | | +| [jsx-filename-extension](docs/rules/jsx-filename-extension.md) | Disallow file extensions that may contain JSX | | | | | +| [jsx-first-prop-new-line](docs/rules/jsx-first-prop-new-line.md) | Enforce proper position of the first property in JSX | | 🔧 | | | +| [jsx-fragments](docs/rules/jsx-fragments.md) | Enforce shorthand or standard form for React fragments | | 🔧 | | | +| [jsx-handler-names](docs/rules/jsx-handler-names.md) | Enforce event handler naming conventions in JSX | | | | | +| [jsx-indent](docs/rules/jsx-indent.md) | Enforce JSX indentation | | 🔧 | | | +| [jsx-indent-props](docs/rules/jsx-indent-props.md) | Enforce props indentation in JSX | | 🔧 | | | +| [jsx-key](docs/rules/jsx-key.md) | Disallow missing `key` props in iterators/collection literals | 💼 | | | | +| [jsx-max-depth](docs/rules/jsx-max-depth.md) | Enforce JSX maximum depth | | | | | +| [jsx-max-props-per-line](docs/rules/jsx-max-props-per-line.md) | Enforce maximum of props on a single line in JSX | | 🔧 | | | +| [jsx-newline](docs/rules/jsx-newline.md) | Require or prevent a new line after jsx elements and expressions. | | 🔧 | | | +| [jsx-no-bind](docs/rules/jsx-no-bind.md) | Disallow `.bind()` or arrow functions in JSX props | | | | | +| [jsx-no-comment-textnodes](docs/rules/jsx-no-comment-textnodes.md) | Disallow comments from being inserted as text nodes | 💼 | | | | +| [jsx-no-constructed-context-values](docs/rules/jsx-no-constructed-context-values.md) | Disallows JSX context provider values from taking values that will cause needless rerenders | | | | | +| [jsx-no-duplicate-props](docs/rules/jsx-no-duplicate-props.md) | Disallow duplicate properties in JSX | 💼 | | | | +| [jsx-no-leaked-render](docs/rules/jsx-no-leaked-render.md) | Disallow problematic leaked values from being rendered | | 🔧 | | | +| [jsx-no-literals](docs/rules/jsx-no-literals.md) | Disallow usage of string literals in JSX | | | | | +| [jsx-no-script-url](docs/rules/jsx-no-script-url.md) | Disallow usage of `javascript:` URLs | | | | | +| [jsx-no-target-blank](docs/rules/jsx-no-target-blank.md) | Disallow `target="_blank"` attribute without `rel="noreferrer"` | 💼 | 🔧 | | | +| [jsx-no-undef](docs/rules/jsx-no-undef.md) | Disallow undeclared variables in JSX | 💼 | | | | +| [jsx-no-useless-fragment](docs/rules/jsx-no-useless-fragment.md) | Disallow unnecessary fragments | | 🔧 | | | +| [jsx-one-expression-per-line](docs/rules/jsx-one-expression-per-line.md) | Require one JSX element per line | | 🔧 | | | +| [jsx-pascal-case](docs/rules/jsx-pascal-case.md) | Enforce PascalCase for user-defined JSX components | | | | | +| [jsx-props-no-multi-spaces](docs/rules/jsx-props-no-multi-spaces.md) | Disallow multiple spaces between inline JSX props | | 🔧 | | | +| [jsx-props-no-spreading](docs/rules/jsx-props-no-spreading.md) | Disallow JSX prop spreading | | | | | +| [jsx-sort-default-props](docs/rules/jsx-sort-default-props.md) | Enforce defaultProps declarations alphabetical sorting | | | | ❌ | +| [jsx-sort-props](docs/rules/jsx-sort-props.md) | Enforce props alphabetical sorting | | 🔧 | | | +| [jsx-space-before-closing](docs/rules/jsx-space-before-closing.md) | Enforce spacing before closing bracket in JSX | | 🔧 | | ❌ | +| [jsx-tag-spacing](docs/rules/jsx-tag-spacing.md) | Enforce whitespace in and around the JSX opening and closing brackets | | 🔧 | | | +| [jsx-uses-react](docs/rules/jsx-uses-react.md) | Disallow React to be incorrectly marked as unused | 💼 | | | | +| [jsx-uses-vars](docs/rules/jsx-uses-vars.md) | Disallow variables used in JSX to be incorrectly marked as unused | 💼 | | | | +| [jsx-wrap-multilines](docs/rules/jsx-wrap-multilines.md) | Disallow missing parentheses around multiline JSX | | 🔧 | | | +| [no-access-state-in-setstate](docs/rules/no-access-state-in-setstate.md) | Disallow when this.state is accessed within setState | | | | | +| [no-adjacent-inline-elements](docs/rules/no-adjacent-inline-elements.md) | Disallow adjacent inline elements not separated by whitespace. | | | | | +| [no-array-index-key](docs/rules/no-array-index-key.md) | Disallow usage of Array index in keys | | | | | +| [no-arrow-function-lifecycle](docs/rules/no-arrow-function-lifecycle.md) | Lifecycle methods should be methods on the prototype, not class fields | | 🔧 | | | +| [no-children-prop](docs/rules/no-children-prop.md) | Disallow passing of children as props | 💼 | | | | +| [no-danger](docs/rules/no-danger.md) | Disallow usage of dangerous JSX properties | | | | | +| [no-danger-with-children](docs/rules/no-danger-with-children.md) | Disallow when a DOM element is using both children and dangerouslySetInnerHTML | 💼 | | | | +| [no-deprecated](docs/rules/no-deprecated.md) | Disallow usage of deprecated methods | 💼 | | | | +| [no-did-mount-set-state](docs/rules/no-did-mount-set-state.md) | Disallow usage of setState in componentDidMount | | | | | +| [no-did-update-set-state](docs/rules/no-did-update-set-state.md) | Disallow usage of setState in componentDidUpdate | | | | | +| [no-direct-mutation-state](docs/rules/no-direct-mutation-state.md) | Disallow direct mutation of this.state | 💼 | | | | +| [no-find-dom-node](docs/rules/no-find-dom-node.md) | Disallow usage of findDOMNode | 💼 | | | | +| [no-invalid-html-attribute](docs/rules/no-invalid-html-attribute.md) | Disallow usage of invalid attributes | | 🔧 | | | +| [no-is-mounted](docs/rules/no-is-mounted.md) | Disallow usage of isMounted | 💼 | | | | +| [no-multi-comp](docs/rules/no-multi-comp.md) | Disallow multiple component definition per file | | | | | +| [no-namespace](docs/rules/no-namespace.md) | Enforce that namespaces are not used in React elements | | | | | +| [no-object-type-as-default-prop](docs/rules/no-object-type-as-default-prop.md) | Disallow usage of referential-type variables as default param in functional component | | | | | +| [no-redundant-should-component-update](docs/rules/no-redundant-should-component-update.md) | Disallow usage of shouldComponentUpdate when extending React.PureComponent | | | | | +| [no-render-return-value](docs/rules/no-render-return-value.md) | Disallow usage of the return value of ReactDOM.render | 💼 | | | | +| [no-set-state](docs/rules/no-set-state.md) | Disallow usage of setState | | | | | +| [no-string-refs](docs/rules/no-string-refs.md) | Disallow using string references | 💼 | | | | +| [no-this-in-sfc](docs/rules/no-this-in-sfc.md) | Disallow `this` from being used in stateless functional components | | | | | +| [no-typos](docs/rules/no-typos.md) | Disallow common typos | | | | | +| [no-unescaped-entities](docs/rules/no-unescaped-entities.md) | Disallow unescaped HTML entities from appearing in markup | 💼 | | | | +| [no-unknown-property](docs/rules/no-unknown-property.md) | Disallow usage of unknown DOM property | 💼 | 🔧 | | | +| [no-unsafe](docs/rules/no-unsafe.md) | Disallow usage of unsafe lifecycle methods | | | | | +| [no-unstable-nested-components](docs/rules/no-unstable-nested-components.md) | Disallow creating unstable components inside components | | | | | +| [no-unused-class-component-methods](docs/rules/no-unused-class-component-methods.md) | Disallow declaring unused methods of component class | | | | | +| [no-unused-prop-types](docs/rules/no-unused-prop-types.md) | Disallow definitions of unused propTypes | | | | | +| [no-unused-state](docs/rules/no-unused-state.md) | Disallow definitions of unused state | | | | | +| [no-will-update-set-state](docs/rules/no-will-update-set-state.md) | Disallow usage of setState in componentWillUpdate | | | | | +| [prefer-es6-class](docs/rules/prefer-es6-class.md) | Enforce ES5 or ES6 class for React Components | | | | | +| [prefer-exact-props](docs/rules/prefer-exact-props.md) | Prefer exact proptype definitions | | | | | +| [prefer-read-only-props](docs/rules/prefer-read-only-props.md) | Enforce that props are read-only | | 🔧 | | | +| [prefer-stateless-function](docs/rules/prefer-stateless-function.md) | Enforce stateless components to be written as a pure function | | | | | +| [prop-types](docs/rules/prop-types.md) | Disallow missing props validation in a React component definition | 💼 | | | | +| [react-in-jsx-scope](docs/rules/react-in-jsx-scope.md) | Disallow missing React when using JSX | 💼 | | | | +| [require-default-props](docs/rules/require-default-props.md) | Enforce a defaultProps definition for every prop that is not a required prop | | | | | +| [require-optimization](docs/rules/require-optimization.md) | Enforce React components to have a shouldComponentUpdate method | | | | | +| [require-render-return](docs/rules/require-render-return.md) | Enforce ES5 or ES6 class for returning value in render function | 💼 | | | | +| [self-closing-comp](docs/rules/self-closing-comp.md) | Disallow extra closing tags for components without children | | 🔧 | | | +| [sort-comp](docs/rules/sort-comp.md) | Enforce component methods order | | | | | +| [sort-default-props](docs/rules/sort-default-props.md) | Enforce defaultProps declarations alphabetical sorting | | | | | +| [sort-prop-types](docs/rules/sort-prop-types.md) | Enforce propTypes declarations alphabetical sorting | | 🔧 | | | +| [state-in-constructor](docs/rules/state-in-constructor.md) | Enforce class component state initialization style | | | | | +| [static-property-placement](docs/rules/static-property-placement.md) | Enforces where React component static properties should be positioned. | | | | | +| [style-prop-object](docs/rules/style-prop-object.md) | Enforce style prop value is an object | | | | | +| [void-dom-elements-no-children](docs/rules/void-dom-elements-no-children.md) | Disallow void DOM elements (e.g. ``, `
`) from receiving children | | | | | diff --git a/configs/all.js b/configs/all.js index 302fbaf88e..31f117f923 100644 --- a/configs/all.js +++ b/configs/all.js @@ -12,6 +12,7 @@ const allRules = { 'default-props-match-prop-types': require('../lib/rules/default-props-match-prop-types'), 'destructuring-assignment': require('../lib/rules/destructuring-assignment'), 'display-name': require('../lib/rules/display-name'), + 'ensure-matching-remove-event-listener': require('../lib/rules/ensure-matching-remove-event-listener'), 'forbid-component-props': require('../lib/rules/forbid-component-props'), 'forbid-dom-props': require('../lib/rules/forbid-dom-props'), 'forbid-elements': require('../lib/rules/forbid-elements'), diff --git a/docs/rules/ensure-matching-remove-event-listener.md b/docs/rules/ensure-matching-remove-event-listener.md new file mode 100644 index 0000000000..27af0159bb --- /dev/null +++ b/docs/rules/ensure-matching-remove-event-listener.md @@ -0,0 +1,47 @@ +# Enforces that every addEventListener has a matching removeEventListener in the return statement of the same useEffect block (`react/ensure-matching-remove-event-listener`) + + + +💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + +When adding "eventListeners" at the mounting phase of a component, sometimes developers forget to remove the "eventListener" in the cleanup function of the useEffect block. This can cause memory leaks in the react application: + +> **Console error**: Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. + +## Rule Details + +This rule aims at reminding developers to add the corrisponding removeEventListener in the useEffect block of React components. + +Examples of **incorrect** code for this rule: + +```jsx +// Missing a matching removeEventListener. +useEffect(() => { + window.addEventListener("keydown", handleUserKeyPress); + return () => { + doThis(); + }; +}, []) +``` + +```jsx +// Missing a cleanup function for the addEventListener. +useEffect(() => { + window.addEventListener("keydown", handleUserKeyPress); +}, []) +``` + +Examples of **correct** code for this rule: + +```jsx +useEffect(() => { + window.addEventListener("keydown", handleUserKeyPress); + return () => { + window.removeEventListener("keydown", handleUserKeyPress); + }; +}, []); +``` + +## When Not To Use It + +You don't need this rules if you want to allow developers to not remove eventListeners added in the DOM. diff --git a/lib/rules/ensure-matching-remove-event-listener.js b/lib/rules/ensure-matching-remove-event-listener.js new file mode 100644 index 0000000000..56e726c070 --- /dev/null +++ b/lib/rules/ensure-matching-remove-event-listener.js @@ -0,0 +1,117 @@ +/** + * @fileoverview every addEventListener should have a matching removeEventListener in the return statement of the same useEffect block + * @author AndreaPontrandolfo + */ + +'use strict'; + +const Components = require('../util/Components'); +const docsUrl = require('../util/docsUrl'); +const report = require('../util/report'); + +//------------------------------------------------------------------------------ +// Rule Definition +//------------------------------------------------------------------------------ + +const messages = { + requiredCleanup: 'Missing a cleanup function for the addEventListener.', + requiredRemoveEventListener: 'Missing a matching removeEventListener.', +}; + +module.exports = { + meta: { + type: 'problem', + docs: { + description: + 'Enforces that every addEventListener has a matching removeEventListener in the return statement of the same useEffect block', + category: 'Possible Errors', + recommended: false, + url: docsUrl('ensure-matching-remove-event-listener'), + }, + messages, + fixable: null, // Or `code` or `whitespace` + schema: [], // Add a schema if the rule has options + }, + + create: Components.detect((context) => ({ + ExpressionStatement(node) { + let hasAddEventListener = null; + let hasReturnStatement = null; + let hasRemoveEventListener = null; + const expression = node && node.expression; + const calleeName = expression && expression.callee && expression.callee.name; + if (calleeName === 'useEffect') { + const internalExpressions = expression + && expression.arguments + && expression.arguments.length > 0 + && expression.arguments[0].body + && expression.arguments[0].body.body; + if (internalExpressions && internalExpressions.length > 0) { + internalExpressions.every((element) => { + if (hasRemoveEventListener) { + return false; + } + const elementType = element.type; + const internalExpression = element.expression; + const internalExpressionCallee = internalExpression && internalExpression.callee; + const internalExpressionCalleeProperty = internalExpressionCallee + && internalExpressionCallee.property + && internalExpressionCallee.property.name; + if (internalExpressionCalleeProperty === 'addEventListener') { + hasAddEventListener = true; + return true; + } + if (hasAddEventListener) { + if (elementType === 'ReturnStatement') { + hasReturnStatement = true; + const returnBlockBody = element.argument + && element.argument.body + && element.argument.body.body; + if (returnBlockBody && returnBlockBody.length > 0) { + returnBlockBody.every((returnElement) => { + if (hasRemoveEventListener) { + return false; + } + const returnElementCallee = returnElement.expression + && returnElement.expression.callee; + const returnElementCalleeObject = returnElementCallee + && returnElementCallee.object + && returnElementCallee.object.name; + const returnElementCalleeProperty = returnElementCallee + && returnElementCallee.property + && returnElementCallee.property.name; + if ( + returnElementCalleeObject === 'window' + && returnElementCalleeProperty === 'removeEventListener' + ) { + hasRemoveEventListener = true; + } + return true; + }); + } + } + } + return true; + }); + } + if (hasAddEventListener) { + if (!hasRemoveEventListener) { + if (!hasReturnStatement) { + const messageId = 'requiredCleanup'; + + report(context, messages, messageId, { + node, + }); + } else { + const messageId = 'requiredRemoveEventListener'; + + report(context, messages, messageId, { + node, + }); + } + } + } + } + }, + })), +}; diff --git a/tests/lib/rules/ensure-matching-remove-event-listener.js b/tests/lib/rules/ensure-matching-remove-event-listener.js new file mode 100644 index 0000000000..8b7bd48fbb --- /dev/null +++ b/tests/lib/rules/ensure-matching-remove-event-listener.js @@ -0,0 +1,141 @@ +/** + * @fileoverview every addEventListener should have a matching removeEventListener in the return statement of the same useEffect block + * @author AndreaPontrandolfo + */ + +'use strict'; + +//------------------------------------------------------------------------------ +// Requirements +//------------------------------------------------------------------------------ + +const RuleTester = require('eslint').RuleTester; +const rule = require('../../../lib/rules/ensure-matching-remove-event-listener'); + +const parserOptions = { + ecmaVersion: 6, + sourceType: 'module', + ecmaFeatures: { + jsx: true, + }, +}; + +//------------------------------------------------------------------------------ +// Tests +//------------------------------------------------------------------------------ + +const ruleTester = new RuleTester({ parserOptions }); +ruleTester.run('ensure-matching-remove-event-listener', rule, { + valid: [ + `useEffect(() => { + doThis(); + doMoreOfThis(); + window.addEventListener("keydown", handleUserKeyPress); + doOtherStuff(); + doSomeOtherStuff(); + return () => { + doThatBefore(); + doMoreOfThatBefore(); + window.removeEventListener("keydown", handleUserKeyPress); + doThatAfter(); + doMoreOfThatAfter(); + }; + }, [])`, + `useEffect(() => { + refcurrent = value; + }, [value]);`, + ], + + invalid: [ + { + code: `useEffect(() => { + doThis(); + doMoreOfThis(); + window.addEventListener("keydown", handleUserKeyPress); + doOtherStuff(); + doSomeOtherStuff(); + }, [])`, + errors: [ + { + messageId: 'requiredCleanup', + type: 'ExpressionStatement', + }, + ], + }, + { + code: `useEffect(() => { + doThis(); + doMoreOfThis(); + const content = window; + content.addEventListener("keydown", handleUserKeyPress); + doOtherStuff(); + doSomeOtherStuff(); + }, [])`, + errors: [ + { + messageId: 'requiredCleanup', + type: 'ExpressionStatement', + }, + ], + }, + { + code: `useEffect(() => { + doThis(); + doMoreOfThis(); + window.addEventListener("keydown", handleUserKeyPress); + doOtherStuff(); + doSomeOtherStuff(); + return () => { + doThat(); + doMoreOfThat(); + }; + }, [])`, + errors: [ + { + messageId: 'requiredRemoveEventListener', + type: 'ExpressionStatement', + }, + ], + }, + { + code: `useEffect(() => { + doThis(); + doMoreOfThis(); + const content = window; + content.addEventListener("keydown", handleUserKeyPress); + doOtherStuff(); + doSomeOtherStuff(); + return () => { + doThat(); + doMoreOfThat(); + }; + }, [])`, + errors: [ + { + messageId: 'requiredRemoveEventListener', + type: 'ExpressionStatement', + }, + ], + }, + { + code: `useEffect(() => { + doThis(); + doMoreOfThis(); + window.addEventListener("keydown", handleUserKeyPress); + doOtherStuff(); + doSomeOtherStuff(); + return () => { + doThat(); + window.addEventListener("keydown", handleUserKeyPress); + doMoreOfThat(); + }; + }, [])`, + errors: [ + { + messageId: 'requiredRemoveEventListener', + type: 'ExpressionStatement', + }, + ], + }, + ], +});