jsx-eslint/eslint-plugin-react

function-component-definition should not match unfixable edge cases (TypeScript generics)

Open

#3345 opened on Jul 25, 2022

View on GitHub
 (5 comments) (1 reaction) (0 assignees)JavaScript (8,630 stars) (2,797 forks)batch import
help wantedtypescript

Description

The documentation for the function-component-definition rule helpfully points out, that certain cases in TypeScript code using generics can not be fixed.
For example this:

function Component<T>(props: Props<T>) {
  return <div />;
};

can not be converted into an arrow function as the type parameter conflicts with JSX syntax.

Since that is the case, the rule should not highlight these cases as errors to begin with.

Thanks :) Also, generally great work on this plugin!

Note: There may be a suggestion to just add some more syntax, like <T extends unknown>, to prevent the syntax collision. However not only does this conflict with other linting rules specifically designed to prevent this ( particularly (@typescript-eslint/no-unnecessary-type-constrain ), it also obscures the fact that code was added to alleviate a deficiency in the linter. IMHO the only valid way to deal with this currently is to spam eslint-disable-next-line, which is not great.

Contributor guide

Tech stack
javascripttypescriptreact
Domain
toolingdeveloper experience
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
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.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Familiarity with ESLint rule developmentUnderstanding of TypeScript genericsKnowledge of React function components
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65
Research direction
Investigate the rule's source code in `lib/rules/function component definition.js` to understand how it detects function components. Look for existing logic that checks for type parameters. The fix should skip rules when a generic type parameter is present. Also check the test file at `tests/lib/rules/function component definition.js` to ensure existing tests pass and add new test cases for TypeScript generics.