jsx-eslint/eslint-plugin-react

[Bug]: [react/prop-types] False positive when using `FC`-derived custom type for Functional Components

Open

#3873 opened on Jan 7, 2025

View on GitHub
 (3 comments) (0 reactions) (0 assignees)JavaScript (8,630 stars) (2,797 forks)batch import
enhancementhelp wanted

Description

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

Creating a type alias for a functional component will result in false positive for rule react/prop-types

Minimal Reproduction

import { FC } from "react";

type XFC = FC<{ user: string }>;

export const MyComponent: XFC = ({ user }) => {  // ERROR: react/prop-types
    // ...
};

import { FC } from "react";

export const MyComponent: FC<{ user: string }> = ({ user }) => {  // OK
    // ...
};

Expected Behavior

There should be no ESLint error

eslint-plugin-react version

v7.37.3

eslint version

v9.17.0

node version

v22.12.0

Contributor guide

Tech stack
typescriptreact
Domain
tooling
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
TypeScriptReactESLint plugin architecture
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
Investigate the `react/prop types` rule implementation in `lib/rules/prop types.js`. Focus on how it extracts prop types from JSX component declarations, particularly the handling of type aliases from `FC<Props>`. Look for the part of the code that matches component parameters and type annotations. Consider adding support for type aliases by resolving them to their underlying `FC` type.