Rules

no-unused-props

Full Name in eslint-plugin-react-x

react-x/no-unused-props

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-unused-props

Features

💭 🧪

Presets

recommended-type-checked

Description

Warns about unused component prop declarations.

Unused props increase maintenance overhead and may mislead consumers of the component into thinking the prop is required or meaningful, even when it has no effect.

This is the TypeScript-only version of eslint-plugin-react/no-unused-prop-types. In contrast to the original rule, this rule

doesn't support the legacy propTypes syntax
combines the used props of one type definition declared by multiple components

Examples

Failing

// 'onClick' is defined in 'ButtonProps' but never used in the 'Button' component.
type ButtonProps = {
  children: React.ReactNode;
  onClick: () => void;
};

function Button({ children }: ButtonProps) {
  return <button type="button">{children}</button>;
}

// 'avatarUrl' is defined in 'UserProfileProps' but never used in the 'UserProfile' component.
interface UserProfileProps {
  username: string;
  avatarUrl: string;
}

function UserProfile({ username }: UserProfileProps) {
  return <div>{username}</div>;
}

Passing

// All props are used.
type ButtonProps = {
  children: React.ReactNode;
  onClick: () => void;
};

function Button({ children, onClick }: ButtonProps) {
  return (
    <button type="button" onClick={onClick}>
      {children}
    </button>
  );
}

// 'className' is passed to the underlying <p> element with the rest of the props.
// '...rest' is considered a use of all props that are not destructured.
interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {
  children: React.ReactNode;
  className?: string;
}

function Text({ children, ...rest }: TextProps) {
  return <p {...rest}>{children}</p>;
}

// Both components use props from the same type definition.
interface ProfileProps {
  userId: string; // Used by ProfilePage
  theme: "light" | "dark"; // Used by ProfileAvatar
}

function ProfilePage({ userId }: ProfileProps) {
  // ...
  return <div>User ID: {userId}</div>;
}

function ProfileAvatar({ theme }: ProfileProps) {
  // ...
  return <div className={theme}>...</div>;
}

no-unused-props

Description

Examples

Failing

Passing

Implementation

See Also

On this page