eslint-plugin-react icon indicating copy to clipboard operation
eslint-plugin-react copied to clipboard

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

Open HazyFish opened this issue 10 months ago • 3 comments

Is there an existing issue for this?

  • [x] I have searched the existing issues and my issue is unique
  • [x] 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

HazyFish avatar Jan 07 '25 00:01 HazyFish

Following variable references is tricky, unfortunately, but I'm happy to accept a PR here.

ljharb avatar Jan 07 '25 00:01 ljharb

I'm not familiar with how this plugin is implemented, but since TypeScript is able to infer the type, can we safely disable this rule in a TypeScript project? Any violations that TypeScript cannot catch?

HazyFish avatar Jan 08 '25 03:01 HazyFish

If you're using React < 19 and actual propTypes, then there's tons; but with only TS types and/or with React 19+, the primary benefit is ensuring that your components have types at all.

ljharb avatar Jan 08 '25 05:01 ljharb