Handling unused props in the render method
See original GitHub issueIssue Description
We have some components that have props not used inside the render method. We should be consistent on how we handle them.
Issue Type
- New Feature
- Enhancement
- Bug
- Other
Expected Behavior
Method 1: delete the props so they are not spread
render() {
const { children, ...customProps } = this.props;
const clonedChilItems = this.clonedChildItems(children);
if ('onClick' in customProps) {
delete customProps.onClick;
}
if ('onKeyDown' in customProps) {
delete customProps.onKeyDown;
}
return (
<TableRows {...customProps}>
{clonedChilItems}
</TableRows>
);
}
}
Method 2: ignore the eslint rule
render() {
/* eslint-disable no-unused-vars */
const { defaultElement, tiny, small, medium, large, huge, responsiveTo, ...customProps } = this.props;
return (
<div {...customProps} ref={this.setContainer}>
{this.props[this.state.element]}
</div>
);
}
}
Current Behavior
Issue Analytics
- State:
- Created 6 years ago
- Comments:5 (5 by maintainers)
Top Results From Across the Web
React - Does changing an unused prop rerender a component?
I'm new to React and I have a doubt about rerendering and I haven't found answer regarding this specific case. Whenever I click...
Read more >eslint-plugin-react/no-unused-prop-types.md at master - GitHub
Disallow definitions of unused propTypes ( react/no-unused-prop-types ). Warns if a prop with a defined type isn't being used. Note: You can provide...
Read more >Render Props - React
The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function. A...
Read more >Dealing With Stale Props and States in React's Functional ...
Now, inside updateState , we force the re-render by calling forceRender and passing it a state different to the current one after setting...
Read more >How To Customize React Components with Props
Note that you do not need to destructure a prop to use it, but that this is a useful method for dealing with...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
As this CHANGELOG mentioned, airbnb base 11.1.1 enables
ignoreRestSiblings
no-unused-vars
, which removes of theno-unused-vars
eslint error. This removes the need to delete props that should not be spread.https://github.com/airbnb/javascript/blob/d48083796c3a1442e44c86b050cc65a353f9bf43/packages/eslint-config-airbnb-base/CHANGELOG.md#1111--2017-03-03