Add note about not needing jsx-no-undef with TS / typescript-eslint

[karlhorky]

Hi @ljharb, hope everything is going well! 👋

Quick PR to add an additional 2 cases of when to not use react/jsx-no-undef

1. when using TypeScript, since it has better checks than ESLint no-undef rules

2. the @typescript-eslint/parser parser allows for usage of ESLint's built-in no-undef without react/jsx-no-undef:

   • https://typescript-eslint.io/play/#ts=5.7.2&fileType=.tsx&code=DwCQpgNhD2AEB2BDAtmAvAIgFLQBbw1gHoA%2BAbgCgg&eslintrc=N4KABGBEBOCuA2BTAzpAXGUEKQHYHsBaWXAE0QDN0pFpp9pJwwBfEFoA&tsconfig=N4KABGBEDGD2C2AHAlgGwKYCcDyiAuysAdgM6QBcYoEEkJemy0eAcgK6qoDCAFutAGsylBm3TgwAXxCSgA&tokens=false
   

   This applies to:

   1. .tsx files (as demonstrated in the typescript-eslint Playground link)
   2. .jsx or .js files - also without "allowJs": true or "checkJs": true in tsconfig.json.

[ljharb]

item 2 and 3 are basically the same - it would be a very bad idea to turn off this rule and NOT enable the typescript-eslint rule.

[karlhorky]

Hmm, well following the advice from the typescript-eslint docs, actually the no-undef rule should be disabled in TypeScript files

So option 3 is for files where TS type checking is disabled, eg. JS files in a typescript-eslint project

If that doesn't make sense, I can try re-explaining

[ljharb]

ah, hmm, ok - which version of TS enabled these better checks? (because TS definitely did not used to do a better job than this rule)

[karlhorky]

Good question, I'm thinking that this was like this from pretty early on... can't remember a time when TS didn't give me errors for undefined JSX element identifiers 🤔

[karlhorky]

the TS playground goes back to version 3.3.3333, and it seems like it's present there:

https://www.typescriptlang.org/play/?ts=3.3.3#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wG4AoSygHgAkkAbBiOAOxRCQF4AiAKQgALVjzgB6AHykgA

[karlhorky]

IIUC, it sounds like maybe "JSX reference tracking" in ESLint v10 will be another reason to not need jsx-no-undef in future:

Enabling JSX reference tracking
ESLint v10.0.0 will enable JSX reference tracking, allowing ESLint to properly understand JSX element references in scope analysis.

Currently, ESLint doesn’t track JSX references, which creates issues with scope analysis. For example:

import { Card } from "./card.jsx"; export function createCard(name) { return <Card name={name} />; }

In this code, ESLint doesn’t recognize that is a reference to the imported Card component. This change brings ESLint’s JSX handling in line with developer expectations and improves the overall linting experience for modern JavaScript applications using JSX.

• https://eslint.org/blog/2025/10/whats-coming-in-eslint-10.0.0/#enabling-jsx-reference-tracking
• Change Request: Enable JSX reference tracking eslint/eslint#19495