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.

Known Issues/Limitations

False Positives SFC

Stateless Function Components (SFCs) 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. See references for more details.

Props consumed inside helper functions

When the entire this.props or props object is passed as an argument to a helper function (e.g., getStyle(this.props)), individual props consumed inside that function are considered used and will not be reported.

Props consumed by typed decorator factory callbacks

In TypeScript, when a component is passed to the result of a decorator factory call and the callback takes the component props as its first typed parameter (for example, trackprops: Props) ⇒ ({ user_id: props.userId }(Component)), props read inside that callback, or forwarded from it to a helper function, are considered used and will not be reported.

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>;
  }
}

Compliant solution — props consumed via helper delegation

import React from 'react';
import { getStyle } from './helpers';

type BarProps = {
  barOffset?: number[];
  barRatio?: number;
};

class Bar extends React.Component<BarProps> {
  render() {
    const style = getStyle(this.props); // props consumed inside helper
    return <path style={style} />;
  }
}

Compliant solution — props consumed via typed decorator factory callbacks

import React from 'react';

declare function track<P>(
  mapper: (props: P) => Record<string, unknown>,
): <TComponent>(target: TComponent) => TComponent;

type TrackingProps = {
  contextModule: string;
  userId: string;
};

function TrackedPanel(props: TrackingProps) {
  return <div />;
}

track((trackedProps: TrackingProps) => ({
  context_module: trackedProps.contextModule,
  user_id: trackedProps.userId,
}))(TrackedPanel);

Resources

Documentation