rspec/rules/S6767/javascript/rule.adoc

== 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

[source,text,diff-id=1,diff-type=noncompliant]
----
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

[source,text,diff-id=1,diff-type=compliant]
----
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

[source,javascript,diff-id=2,diff-type=noncompliant]
----
import React from 'react';

type Props = {
  name: string;
}

class Hello extends React.Component<Props> {
  render() {
    return <div>Hello</div>;
  }
}
----

==== Compliant solution

[source,javascript,diff-id=2,diff-type=compliant]
----
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 - https://react.dev/learn/passing-props-to-a-component[Passing Props to a Component]
* React Documentation - https://react.dev/reference/react/Component#static-proptypes[static propTypes]
* React Documentation - https://react.dev/learn/typescript#typescript-with-react-components[TypeScript with React Components]