Skip to content
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

New rule: no-invalid-default-props #1022

Closed
ljharb opened this issue Jan 13, 2017 · 11 comments
Closed

New rule: no-invalid-default-props #1022

ljharb opened this issue Jan 13, 2017 · 11 comments

Comments

@ljharb
Copy link
Member

ljharb commented Jan 13, 2017

I'd like a rule that errors if anything is in defaultProps that is not also in propTypes.

This came up with the following code:

Component.propTypes = {
  fooValue: PropTypes.string,
};
Component.defaultProps = {
  foo: '',
};

In other words, it was a partially completed prop rename.

This rule should also look up a propTypes variable (Component.propTypes = propTypes) defined elsewhere in the file.

@webOS101
Copy link
Contributor

I've taken a stab at this and have a working prototype. Just trying to get all the tests update for this rule. If @ljharb or someone else can clarify: I'm basing off an existing rule but need to write different data into the component list. Do rules share the same component data or do they each get their own copies? I see some rules appear to share the same data properties but not sure if they're somehow avoiding stepping on each others toes or if it's just luck that it doesn't conflict.

@webOS101
Copy link
Contributor

webOS101 commented Feb 23, 2017

Also, I considered it a violation of the rule if supplying a default for an .isRequired property. Was that your intention or should that be configurable?

@ljharb
Copy link
Member Author

ljharb commented Feb 23, 2017

That's a good point.

I think that should be an option, but the checking be enabled by default. Let's call it allowRequiredDefaults, and default it to false.

@webOS101
Copy link
Contributor

webOS101 commented Feb 23, 2017

Also discovered a bug in require-default-props. Oops.

webOS101 pushed a commit to webOS101/eslint-plugin-react that referenced this issue Feb 23, 2017
webOS101 pushed a commit to webOS101/eslint-plugin-react that referenced this issue Apr 30, 2017
@sholladay
Copy link

I am trying to understand the intention behind the allowRequiredDefaults option and why it defaults to false. Can you provide some insight @webOS101?

Surely this code is okay?

Component.propTypes = {
  name : PropTypes.string.isRequired
};
Component.defaultProps = {
  name : 'John Doe'
};

@ljharb
Copy link
Member Author

ljharb commented Dec 1, 2017

@sholladay no, that code is not OK - since name is required, the defaultProp will never trigger, so it's redundant - and redundant code should be removed.

@sholladay
Copy link

That is incorrect. Default props are applied before type checking happens.

From Typechecking With PropTypes:

The propTypes typechecking happens after defaultProps are resolved, so typechecking will also apply to the defaultProps.

I also confirmed that this includes isRequired by playing around with my React app. Admittedly, React is still a bit new to me, so I could be missing something. But this is in line with what I would expect.

Outside of the React ecosystem, code like this is pretty normal...

const currentUsername = 'John Doe';  // something dynamic
const getUser = (username = currentUsername) {
    if (!username) {
        throw new Error('Username is required');
    }
    // return { ... }
}

I definitely think it's a good thing to mark something as required, even if it has a default.

@ljharb
Copy link
Member Author

ljharb commented Dec 1, 2017

If you pass undefined, defaultProps will be applied, but if you pass null, they will not be.

Conceptually though, if a prop is required, it must be passed - having the defaultProp creates a situation where you could safely omit a required prop, which is a bug. This linting rule helps prevent that bug.

@webOS101
Copy link
Contributor

webOS101 commented Dec 2, 2017

@ljharb is correct, marking a prop as required but using defaultProps to make it optional does not make sense. Either it is required or it is not.

@sholladay
Copy link

To each their own, I guess. Thanks for providing an option. I am using isRequired to say that it must have a value, not that the caller of the component must provide one. I'm happy to have a sane default (and to be able to use it) but maybe tomorrow that won't be the case and it will still need a value, so I'm glad to be able to specify these things separately. At the very least, it will make refactoring easier.

@ljharb
Copy link
Member Author

ljharb commented Dec 2, 2017

Adding a defaultProp ensures it has a value; propTypes are solely about what the user provides.

github-actions bot pushed a commit to capitnflam/eslint-plugin that referenced this issue Mar 16, 2024
# [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))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

No branches or pull requests

3 participants