-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
"no-unused-prop-types" inside async functions (include arrow) #1053
Comments
Some additional info which might help: this will error: onSubmit = async (e) => {
this.setState({loggingIn: true, success: false, message: null})
const {email, password} = this.state
const {login, setAuthenticated} = this.props // not detected by eslint
const {success, message} = await login(email, password)
this.setState({loggingIn: false, success, message})
setAuthenticated(success)
if (success) {
const {router, location: {state: {nextPathname} = {}}} = this.props
setTimeout(() => {
router.push(nextPathname || '/')
}, 1000)
}
} this will not error: onSubmit = async (e) => {
this.setState({loggingIn: true, success: false, message: null})
const {email, password} = this.state
// properly detected by eslint
const {login, setAuthenticated, router, location: {state: {nextPathname} = {}}} = this.props
const {success, message} = await login(email, password)
this.setState({loggingIn: false, success, message})
setAuthenticated(success)
if (success) {
setTimeout(() => {
router.push(nextPathname || '/')
}, 1000)
}
} The only difference between these snippets is how {
code: [
'export class Example extends Component {',
' static propTypes = {',
' failed: PropTypes.func.isRequired,',
' loadUserProfile: PropTypes.func.isRequired,',
' }',
' handleLogin = async () => {',
' const {failed, loadUserProfile} = this.props;',
' await failed();',
' await loadUserProfile();',
' };',
'}'
].join('\n'),
parser: 'babel-eslint'
}, |
There was an incosistency with access and storage of the usedPropTypes of a component that would cause proptypes to not be correctly marked as used if more than one prop was used in the body of an async function class property or async class method. Fixes jsx-eslint#1053 --- bug source: First time around - get the parentComponent using utils.getParentComponent() https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/rules/no-unused-prop-types.js#L594 - save off the usedPropTypes array from what component was found. - modify the array with my new used props. - set the new array on the node https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/rules/no-unused-prop-types.js#L638 Note that in this case the node is a MemberExpression - Components#set will then just crawl the parents of the current node (the MemberExpresion) until one was found in the internal this._list. - Because all async FunctionExpressions, ArrowFunctionExpressions, and FunctionDeclaration are treated as components of confidence 0 (not a component). The unusedPropTypes would be attached to this. (Which is usually fine). However, if the component tries to mark a prop as used again, it will read from the parentComponent using utils.getParentComponent() (which in this case will return the class) which does not have the previously used methods. The array would then be modified (created because it doesnt exist), and then set them onto the async arrow function overwriting anything that was previously there. This change just attaches used props to the found component (where the previous usedPropTypes are pulled from) if it exists, otherwise to the current node.
There was an incosistency with access and storage of the usedPropTypes of a component that would cause proptypes to not be correctly marked as used if more than one prop was used in the body of an async function class property or async class method. Fixes jsx-eslint#1053 --- bug source: First time around - get the parentComponent using utils.getParentComponent() https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/rules/no-unused-prop-types.js#L594 - save off the usedPropTypes array from what component was found. - modify the array with my new used props. - set the new array on the node https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/rules/no-unused-prop-types.js#L638 Note that in this case the node is a MemberExpression - Components#set will then just crawl the parents of the current node (the MemberExpresion) until one was found in the internal this._list. - Because all async FunctionExpressions, ArrowFunctionExpressions, and FunctionDeclaration are treated as components of confidence 0 (not a component). The unusedPropTypes would be attached to this. (Which is usually fine). However, if the component tries to mark a prop as used again, it will read from the parentComponent using utils.getParentComponent() (which in this case will return the class) which does not have the previously used methods. The array would then be modified (created because it doesnt exist), and then set them onto the async arrow function overwriting anything that was previously there. This change just attaches used props to the found component (where the previous usedPropTypes are pulled from) if it exists, otherwise to the current node. --- Squashed: Added test cases for factory methods on classes that return async functions.
There was an incosistency with access and storage of the usedPropTypes of a component that would cause proptypes to not be correctly marked as used if more than one prop was used in the body of an async function class property or async class method. Fixes jsx-eslint#1053 --- bug source: First time around - get the parentComponent using utils.getParentComponent() https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/rules/no-unused-prop-types.js#L594 - save off the usedPropTypes array from what component was found. - modify the array with my new used props. - set the new array on the node https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/rules/no-unused-prop-types.js#L638 Note that in this case the node is a MemberExpression - Components#set will then just crawl the parents of the current node (the MemberExpresion) until one was found in the internal this._list. - Because all async FunctionExpressions, ArrowFunctionExpressions, and FunctionDeclaration are treated as components of confidence 0 (not a component). The unusedPropTypes would be attached to this. (Which is usually fine). However, if the component tries to mark a prop as used again, it will read from the parentComponent using utils.getParentComponent() (which in this case will return the class) which does not have the previously used methods. The array would then be modified (created because it doesnt exist), and then set them onto the async arrow function overwriting anything that was previously there. This change just attaches used props to the found component (where the previous usedPropTypes are pulled from) if it exists, otherwise to the current node. --- Squashed: Added test cases for factory methods on classes that return async functions. Added test cases using the default eslint parser and defining an async function in the render method.
There was an incosistency with access and storage of the usedPropTypes of a component that would cause proptypes to not be correctly marked as used if more than one prop was used in the body of an async function class property or async class method. Fixes jsx-eslint#1053 --- bug source: First time around - get the parentComponent using utils.getParentComponent() https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/rules/no-unused-prop-types.js#L594 - save off the usedPropTypes array from what component was found. - modify the array with my new used props. - set the new array on the node https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/rules/no-unused-prop-types.js#L638 Note that in this case the node is a MemberExpression - Components#set will then just crawl the parents of the current node (the MemberExpresion) until one was found in the internal this._list. - Because all async FunctionExpressions, ArrowFunctionExpressions, and FunctionDeclaration are treated as components of confidence 0 (not a component). The unusedPropTypes would be attached to this. (Which is usually fine). However, if the component tries to mark a prop as used again, it will read from the parentComponent using utils.getParentComponent() (which in this case will return the class) which does not have the previously used methods. The array would then be modified (created because it doesnt exist), and then set them onto the async arrow function overwriting anything that was previously there. This change just attaches used props to the found component (where the previous usedPropTypes are pulled from) if it exists, otherwise to the current node. --- Squashed: Added test cases for factory methods on classes that return async functions. Added test cases using the default eslint parser and defining an async function in the render method.
export default class Users extends Component {
static propTypes = {
...
onLoad: PropTypes.func.isRequired,
};
async componentWillMount() {
await Promise.all([
this.props.onLoad(),
this.onSearch(),
]);
...
}
...
}
|
There was an inconsistency with access and storage of the usedPropTypes of a component that would cause propTypes to not be correctly marked as used if more than one prop was used in the body of an async function class property or async class method. Fixes jsx-eslint#1053 --- bug source: First time around - get the parentComponent using utils.getParentComponent() https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/rules/no-unused-prop-types.js#L594 - save off the usedPropTypes array from what component was found. - modify the array with my new used props. - set the new array on the node https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/rules/no-unused-prop-types.js#L638 Note that in this case the node is a MemberExpression - Components#set will then just crawl the parents of the current node (the MemberExpresion) until one was found in the internal this._list. - Because all async FunctionExpressions, ArrowFunctionExpressions, and FunctionDeclaration are treated as components of confidence 0 (not a component). The unusedPropTypes would be attached to this. (Which is usually fine). However, if the component tries to mark a prop as used again, it will read from the parentComponent using utils.getParentComponent() (which in this case will return the class) which does not have the previously used methods. The array would then be modified (created because it doesnt exist), and then set them onto the async arrow function overwriting anything that was previously there. This change just attaches used props to the found component (where the previous usedPropTypes are pulled from) if it exists, otherwise to the current node. --- Squashed: Added test cases for factory methods on classes that return async functions. Added test cases using the default eslint parser and defining an async function in the render method.
@TrevorSayre similar for me — using |
# [1.1.0](v1.0.1...v1.1.0) (2024-03-16) ### chore * **deps-dev:** bump [@types](https://github.com/types)/node from 20.11.27 to 20.11.28 ([#13](#13)) ([738e28c](738e28c)) * **deps:** bump eslint-plugin-react from 7.34.0 to 7.34.1 ([#12](#12)) ([ad9f1b3](ad9f1b3)), closes [#3700](https://github.com/capitnflam/eslint-plugin/issues/3700) [#3701](https://github.com/capitnflam/eslint-plugin/issues/3701) [#3704](https://github.com/capitnflam/eslint-plugin/issues/3704) [#3705](https://github.com/capitnflam/eslint-plugin/issues/3705) [#3707](https://github.com/capitnflam/eslint-plugin/issues/3707) [#3713](https://github.com/capitnflam/eslint-plugin/issues/3713) [#3715](https://github.com/capitnflam/eslint-plugin/issues/3715) [#1000](https://github.com/capitnflam/eslint-plugin/issues/1000) [jsx-eslint/eslint-plugin-react#1000](jsx-eslint/eslint-plugin-react#1000) [#1002](https://github.com/capitnflam/eslint-plugin/issues/1002) [jsx-eslint/eslint-plugin-react#1002](jsx-eslint/eslint-plugin-react#1002) [#1005](https://github.com/capitnflam/eslint-plugin/issues/1005) [jsx-eslint/eslint-plugin-react#1005](jsx-eslint/eslint-plugin-react#1005) [#100](https://github.com/capitnflam/eslint-plugin/issues/100) [jsx-eslint/eslint-plugin-react#100](jsx-eslint/eslint-plugin-react#100) [#1010](https://github.com/capitnflam/eslint-plugin/issues/1010) [jsx-eslint/eslint-plugin-react#1010](jsx-eslint/eslint-plugin-react#1010) [#1013](https://github.com/capitnflam/eslint-plugin/issues/1013) [jsx-eslint/eslint-plugin-react#1013](jsx-eslint/eslint-plugin-react#1013) [#1022](https://github.com/capitnflam/eslint-plugin/issues/1022) [jsx-eslint/eslint-plugin-react#1022](jsx-eslint/eslint-plugin-react#1022) [#1029](https://github.com/capitnflam/eslint-plugin/issues/1029) [jsx-eslint/eslint-plugin-react#1029](jsx-eslint/eslint-plugin-react#1029) [#102](https://github.com/capitnflam/eslint-plugin/issues/102) [jsx-eslint/eslint-plugin-react#102](jsx-eslint/eslint-plugin-react#102) [#1034](https://github.com/capitnflam/eslint-plugin/issues/1034) [jsx-eslint/eslint-plugin-react#1034](jsx-eslint/eslint-plugin-react#1034) [#1038](https://github.com/capitnflam/eslint-plugin/issues/1038) [jsx-eslint/eslint-plugin-react#1038](jsx-eslint/eslint-plugin-react#1038) [#1041](https://github.com/capitnflam/eslint-plugin/issues/1041) [jsx-eslint/eslint-plugin-react#1041](jsx-eslint/eslint-plugin-react#1041) [#1043](https://github.com/capitnflam/eslint-plugin/issues/1043) [jsx-eslint/eslint-plugin-react#1043](jsx-eslint/eslint-plugin-react#1043) [#1046](https://github.com/capitnflam/eslint-plugin/issues/1046) [jsx-eslint/eslint-plugin-react#1046](jsx-eslint/eslint-plugin-react#1046) [#1047](https://github.com/capitnflam/eslint-plugin/issues/1047) [jsx-eslint/eslint-plugin-react#1047](jsx-eslint/eslint-plugin-react#1047) [#1050](https://github.com/capitnflam/eslint-plugin/issues/1050) [jsx-eslint/eslint-plugin-react#1050](jsx-eslint/eslint-plugin-react#1050) [#1053](https://github.com/capitnflam/eslint-plugin/issues/1053) [jsx-eslint/eslint-plugin-react#1053](jsx-eslint/eslint-plugin-react#1053) [#1057](https://github.com/capitnflam/eslint-plugin/issues/1057) [jsx-eslint/eslint-plugin-react#1057](jsx-eslint/eslint-plugin-react#1057) [#105](https://github.com/capitnflam/eslint-plugin/issues/105) [jsx-eslint/eslint-plugin-react#105](jsx-eslint/eslint-plugin-react#105) [#1061](https://github.com/capitnflam/eslint-plugin/issues/1061) [jsx-eslint/eslint-plugin-react#1061](jsx-eslint/eslint-plugin-react#1061) [#1062](https://github.com/capitnflam/eslint-plugin/issues/1062) [jsx-eslint/eslint-plugin-react#1062](jsx-eslint/eslint-plugin-react#1062) [#1070](https://github.com/capitnflam/eslint-plugin/issues/1070) [jsx-eslint/eslint-plugin-react#1070](jsx-eslint/eslint-plugin-react#1070) [#1071](https://github.com/capitnflam/eslint-plugin/issues/1071) [jsx-eslint/eslint-plugin-react#1071](jsx-eslint/eslint-plugin-react#1071) [#1073](https://github.com/capitnflam/eslint-plugin/issues/1073) [jsx-eslint/eslint-plugin-react#1073](jsx-eslint/eslint-plugin-react#1073) [#1076](https://github.com/capitnflam/eslint-plugin/issues/1076) [jsx-eslint/eslint-plugin-react#1076](jsx-eslint/eslint-plugin-react#1076) [#1079](https://github.com/capitnflam/eslint-plugin/issues/1079) [jsx-eslint/eslint-plugin-react#1079](jsx-eslint/eslint-plugin-react#1079) [#1088](https://github.com/capitnflam/eslint-plugin/issues/1088) [jsx-eslint/eslint-plugin-react#1088](jsx-eslint/eslint-plugin-react#1088) [#1098](https://github.com/capitnflam/eslint-plugin/issues/1098) [jsx-eslint/eslint-plugin-react#1098](jsx-eslint/eslint-plugin-react#1098) [#1101](https://github.com/capitnflam/eslint-plugin/issues/1101) [jsx-eslint/eslint-plugin-react#1101](jsx-eslint/eslint-plugin-react#1101) [#1103](https://github.com/capitnflam/eslint-plugin/issues/1103) [jsx-eslint/eslint-plugin-react#1103](jsx-eslint/eslint-plugin-react#1103) [#110](https://github.com/capitnflam/eslint-plugin/issues/110) [jsx-eslint/eslint-plugin-react#110](jsx-eslint/eslint-plugin-react#110) [#1116](https://github.com/capitnflam/eslint-plugin/issues/1116) [jsx-eslint/eslint-plugin-react#1116](jsx-eslint/eslint-plugin-react#1116) [#1117](https://github.com/capitnflam/eslint-plugin/issues/1117) [jsx-eslint/eslint-plugin-react#1117](jsx-eslint/eslint-plugin-react#1117) [#1119](https://github.com/capitnflam/eslint-plugin/issues/1119) [jsx-eslint/eslint-plugin-react#1119](jsx-eslint/eslint-plugin-react#1119) [#1121](https://github.com/capitnflam/eslint-plugin/issues/1121) [jsx-eslint/eslint-plugin-react#1121](jsx-eslint/eslint-plugin-react#1121) [#1122](https://github.com/capitnflam/eslint-plugin/issues/1122) [jsx-eslint/eslint-plugin-react#1122](jsx-eslint/eslint-plugin-react#1122) [#1123](https://github.com/capitnflam/eslint-plugin/issues/1123) [jsx-eslint/eslint-plugin-react#1123](jsx-eslint/eslint-plugin-react#1123) [#3700](https://github.com/capitnflam/eslint-plugin/issues/3700) [#3701](https://github.com/capitnflam/eslint-plugin/issues/3701) [#3704](https://github.com/capitnflam/eslint-plugin/issues/3704) [#3705](https://github.com/capitnflam/eslint-plugin/issues/3705) [#3707](https://github.com/capitnflam/eslint-plugin/issues/3707) [#3713](https://github.com/capitnflam/eslint-plugin/issues/3713) [#3715](https://github.com/capitnflam/eslint-plugin/issues/3715) [#3715](https://github.com/capitnflam/eslint-plugin/issues/3715) [jsx-eslint/eslint-plugin-react#3715](jsx-eslint/eslint-plugin-react#3715) [#3713](https://github.com/capitnflam/eslint-plugin/issues/3713) [jsx-eslint/eslint-plugin-react#3713](jsx-eslint/eslint-plugin-react#3713) [#3707](https://github.com/capitnflam/eslint-plugin/issues/3707) [jsx-eslint/eslint-plugin-react#3707](jsx-eslint/eslint-plugin-react#3707) [#3705](https://github.com/capitnflam/eslint-plugin/issues/3705) [jsx-eslint/eslint-plugin-react#3705](jsx-eslint/eslint-plugin-react#3705) [#3704](https://github.com/capitnflam/eslint-plugin/issues/3704) [jsx-eslint/eslint-plugin-react#3704](jsx-eslint/eslint-plugin-react#3704) [#3701](https://github.com/capitnflam/eslint-plugin/issues/3701) [jsx-eslint/eslint-plugin-react#3701](jsx-eslint/eslint-plugin-react#3701) [#3700](https://github.com/capitnflam/eslint-plugin/issues/3700) [jsx-eslint/eslint-plugin-react#3700](jsx-eslint/eslint-plugin-react#3700) ### ci * add auto assign action ([#14](#14)) ([07d1f9a](07d1f9a)) * add check workflow ([#11](#11)) ([8afc82a](8afc82a)) ### feat * add [@eslint-community](https://github.com/eslint-community)/eslint-plugin-eslint-comments ([#17](#17)) ([fe2bf30](fe2bf30)) * add eslint-plugin-n ([#18](#18)) ([203d603](203d603)) * add eslint-plugin-security ([#16](#16)) ([e7f8c2e](e7f8c2e)) * add eslint-plugin-sonarjs ([#15](#15)) ([5bca4e1](5bca4e1)) * **react:** add some security linting ([#10](#10)) ([4424b67](4424b67))
Hi!
I think there is a bug with async functions.
property: "no-unused-prop-types"
parser: "babel-eslint@7.1.1"
where: "async functions"
example:
The text was updated successfully, but these errors were encountered: