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

Update no-unused-prop-types.md #2273

Open
wants to merge 1 commit into
base: master
from
Open
Changes from all commits
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -1,44 +1,49 @@
# Prevent definitions of unused prop types (react/no-unused-prop-types)
# Prevent definitions of unused propTypes (react/no-unused-prop-types)

Warns you if you have defined a prop type but it is never being used anywhere.
Warns if a propType isn't being used.

## Rule Details

The following patterns are considered warnings:

```jsx
var Hello = createReactClass({
propTypes: {
name: PropTypes.string
},
render: function() {
class Hello extends React.Component {
render() {
return <div>Hello Bob</div>;
}
});
var Hello = createReactClass({
propTypes: {
firstname: PropTypes.string.isRequired,
middlename: PropTypes.string.isRequired, // middlename is never used below
lastname: PropTypes.string.isRequired
},
render: function() {
Hello.propTypes = {
name: PropTypes.string
},
```

```jsx
class Hello extends React.Component {
render() {
return <div>Hello {this.props.firstname} {this.props.lastname}</div>;
}
});
}
Hello.propTypes: {
firstname: PropTypes.string.isRequired,
middlename: PropTypes.string.isRequired, // middlename is never used above
lastname: PropTypes.string.isRequired
},
```

The following patterns are **not** considered warnings:

```jsx
var Hello = createReactClass({
propTypes: {
name: PropTypes.string
},
render: function() {
class Hello extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
});
};
Hello.propTypes: {
name: PropTypes.string
},
```

## Rule Options
@@ -57,18 +62,17 @@ This rule can take one argument to ignore some specific props during validation.

## Known Issues/Limitations

- [False Positives: SFC (helper render methods)](#false-positives-sfc)
- [False Positives: Functions (helper render methods)](#false-positives-with-functions)
- [False Positives: Intermediate variables](#false-positives-intermediate-variables)

### False positives SFC
For components with Stateless Functional Components (often used as helper render methods);
SFC is a function that takes prop(s) as an argument and returns a JSX expression.
Even if this function gets called from a component the props that are only used inside SFC would not be considered used by a component.
### False Positives with Functions
Function components accept props as an argument and return a JSX expression.
Even if the function gets called from a component, the props that are only used inside the component are not be considered used by a component.

Triggers false positive:
```js
function AComponent(props) {
function helperRenderer(aProp) { // is considered SFC
function helperRenderer(aProp) { // is considered a functional component
return (
<span>{aProp}{props.bProp}</span>
);
@@ -86,12 +90,12 @@ AComponent.propTypes = {
bProp: PropTypes.string // bProp is defined but never used
};
```
A suggested fix is to assign a bProp to a variable outside of the SFC.

This comment has been minimized.

Copy link
@ljharb

ljharb May 12, 2019

Collaborator

i prefer to keep the term SFC while it's still in common usage in the community. Please revert these.

This comment has been minimized.

Copy link
@coryhouse

coryhouse May 12, 2019

Author Contributor

There's no mention of SFC in the react docs anymore. Or stateless function. https://www.dropbox.com/s/u51xabyw7wfuqqy/Screenshot%202019-05-12%2008.12.19.png?dl=0. And even if one does know the history and what SFC means, the warnings apply to function components with state (via Hooks) too.

This comment has been minimized.

Copy link
@ljharb

ljharb May 12, 2019

Collaborator

React docs are irrelevant; it’s still a widely used term in the community. A component with a useState hook is still an SFC.

A suggested fix is to assign a bProp to a variable outside of the nested function.

```js
function AComponent(props) {
const { bProp } = props
function helperRenderer(aProp) { // is considered SFC
function helperRenderer(aProp) { // is considered functional component
return (
<span>{aProp}{bProp}</span>
);
@@ -154,5 +158,5 @@ AComponent.propTypes = {
};
```

Using Intermediate variables might be desired and unavoidable for more complex props structure.
Like for shape prop types. To avoid false positive in this case make sure `skipShapeProps` is set to `true`.
Using intermediate variables might be desired and unavoidable for more complex props structure.
Like for shape propTypes. To avoid false positive in this case make sure `skipShapeProps` is set to `true`.

This comment has been minimized.

Copy link
@ljharb

ljharb May 12, 2019

Collaborator
Suggested change
Like for shape propTypes. To avoid false positive in this case make sure `skipShapeProps` is set to `true`.
For example, for shape propTypes, to avoid a false positive, make sure `skipShapeProps` is set to `true`.
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.