Skip to content

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

Open
@HazyFish

Description

@HazyFish

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

Activity

ljharb

ljharb commented on Jan 7, 2025

@ljharb
Member

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

HazyFish

HazyFish commented on Jan 8, 2025

@HazyFish
Author

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?

ljharb

ljharb commented on Jan 8, 2025

@ljharb
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @ljharb@HazyFish

        Issue actions

          [Bug]: [react/prop-types] False positive when using `FC`-derived custom type for Functional Components · Issue #3873 · jsx-eslint/eslint-plugin-react