org.sonar.l10n.javascript.rules.javascript.S6767.html Maven / Gradle / Ivy
Why is this an issue?
Leaving unused props in a React component can make the code harder to understand and maintain. Other developers may wonder why certain props are
passed to a component if they are not used. Unused props can also increase the size of the component’s memory footprint and impact performance. This
is especially true if the unused props are large objects or arrays. Furthermore, if a prop is unused, it may indicate that the developer did not
complete the implementation as he intended initially or made a mistake while writing the component.
To avoid these issues, you should remove any unused props from React components. This helps keep the codebase clean, improves performance, and
enhances code readability.
How to fix it in PropTypes
Code examples
Noncompliant code example
import PropTypes from 'prop-types';
import React from 'react';
class Hello extends React.Component {
render() {
return (
<h1>Hello</h1>
);
}
}
Hello.propTypes = {
name: PropTypes.string
};
Compliant solution
import PropTypes from 'prop-types';
import React from 'react';
class Hello extends React.Component {
render() {
return (
<h1>Hello {this.props.name}</h1>
);
}
}
Hello.propTypes = {
name: PropTypes.string
};
How to fix it in TypeScript
Code examples
Noncompliant code example
import React from 'react';
type Props = {
name: string;
}
class Hello extends React.Component<Props> {
render() {
return <div>Hello</div>;
}
}
Compliant solution
import React from 'react';
type Props = {
name: string;
};
class Hello extends React.Component<Props> {
render() {
return <div>Hello {this.props.name}</div>;
}
}
Resources
Documentation
- React Documentation - Passing Props to a Component
- React Documentation - static propTypes
- React Documentation - TypeScript with React Components