jsx-eslint/eslint-plugin-react

[Bug]: False positive for react/no-unused-prop-types and passthrough

Open

#3.885 geöffnet am 11. Feb. 2025

Auf GitHub ansehen
 (5 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)JavaScript (8.630 Stars) (2.797 Forks)batch import
bughelp wanted

Beschreibung

Is there an existing issue for this?

  • I have searched the existing issues and my issue is unique
  • My issue appears in the command-line and not only in the text editor

Description Overview

The following code causes a false positive on react/no-unused-prop-types:

export type TestProp = {
    name: string;
};

const Component1: FC<TestProp> = ({ name }) => {
    return <div>{name}</div>;
};

const Component2: FC<{ Component: FC<TestProp>; props: TestProp }> = ({ Component, props }) => {
    return <Component name={props.name} />;
};

const Component3: FC<TestProp> = (props: TestProp) => {
    return <Component2 Component={Component1} props={props} />;
};

Error: 'name' PropType is defined but prop is never used.

The error goes away when commenting out Component3.

Expected Behavior

The code above should be accepted by the linter.

eslint-plugin-react version

v7.37.4

eslint version

v8.57.1

node version

v20.15.0

Contributor Guide

Tech Stack
typescriptreactjavascript
Domain
frontendtooling
Issue Type
bug
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 hours
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
fresh
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
clear
Voraussetzungen
knowledge of ESLint plugin developmentunderstanding of React prop types
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
45
Research-Richtung
Investigate the rule file 'lib/rules/no unused prop types.js' in the eslint plugin react repository. Focus on how the rule tracks prop usage across components, particularly when props are passed through (e.g., Component2 receives a Component and its props, then passes the prop to Component1). The false positive occurs when Component3 is present, suggesting the rule's analysis of prop passthrough chains is incomplete. Review the rule's logic for handling indirect prop usage and consider how to extend it to detect that 'name' is used via the passthrough pattern.