[New] react-in-jsx-scope, jsx-uses-react: automatically disable when React >= 19 is detected

React 19 mandates the automatic JSX transform, so `React` no longer
needs to be in scope for JSX. This makes the `react-in-jsx-scope` and
`jsx-uses-react` rules no-ops when the configured React version is
>= 19.0.0, following the same `return {}` early-exit pattern used by
`no-unsafe`.

Signed-off-by: Jon Koops <jonkoops@gmail.com>

Author: jonkoops

CHANGELOG.md

@@ -26,6 +26,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`no-unused-prop-types`]: detect used props in nested components ([#3955][] @avaice)
 
 ### Changed
+* [`react-in-jsx-scope`], [`jsx-uses-react`]: automatically disable when React >= 19 is detected ([#XXXX][] @jonkoops)
 * [Docs] [`no-array-index-key`]: add template literal examples ([#3978][] @akahoshi1421)
 
 [#3986]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3986

docs/rules/jsx-uses-react.md

@@ -52,3 +52,5 @@ var Hello = <div>Hello {this.props.name}</div>;
 If you are not using JSX, if React is declared as global variable, or if you do not use the `no-unused-vars` rule.
 
 If you are using the [new JSX transform from React 17](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports), you should disable this rule by extending [`react/jsx-runtime`](https://github.com/jsx-eslint/eslint-plugin-react/blob/HEAD/index.js#L163-L176) in your eslint config (add `"plugin:react/jsx-runtime"` to `"extends"`).
+
+**Note**: When React >= 19.0.0 is detected, this rule is automatically disabled, since the automatic JSX transform is mandatory in React 19.

docs/rules/react-in-jsx-scope.md

@@ -51,3 +51,5 @@ var Hello = <div>Hello {this.props.name}</div>;
 If you are not using JSX, or if you are setting `React` as a global variable.
 
 If you are using the [new JSX transform from React 17](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports), you should disable this rule by extending [`react/jsx-runtime`](https://github.com/jsx-eslint/eslint-plugin-react/blob/8cf47a8ac2242ee00ea36eac4b6ae51956ba4411/index.js#L165-L179) in your eslint config (add `"plugin:react/jsx-runtime"` to `"extends"`).
+
+**Note**: When React >= 19.0.0 is detected, this rule is automatically disabled, since the automatic JSX transform is mandatory in React 19.

lib/rules/jsx-uses-react.js

@@ -8,6 +8,7 @@
 const pragmaUtil = require('../util/pragma');
 const docsUrl = require('../util/docsUrl');
 const markVariableAsUsed = require('../util/eslint').markVariableAsUsed;
+const testReactVersion = require('../util/version').testReactVersion;
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -27,6 +28,10 @@ module.exports = {
   },
 
   create(context) {
+    if (testReactVersion(context, '>= 19.0.0')) {
+      return {};
+    }
+
     const pragma = pragmaUtil.getFromContext(context);
     const fragment = pragmaUtil.getFragmentFromContext(context);
 

lib/rules/react-in-jsx-scope.js

@@ -9,6 +9,7 @@ const variableUtil = require('../util/variable');
 const pragmaUtil = require('../util/pragma');
 const docsUrl = require('../util/docsUrl');
 const report = require('../util/report');
+const testReactVersion = require('../util/version').testReactVersion;
 
 // -----------------------------------------------------------------------------
 // Rule Definition
@@ -34,6 +35,10 @@ module.exports = {
   },
 
   create(context) {
+    if (testReactVersion(context, '>= 19.0.0')) {
+      return {};
+    }
+
     const pragma = pragmaUtil.getFromContext(context);
 
     function checkIfReactIsInScope(node) {

tests/flat-config.js

@@ -46,16 +46,13 @@ describe('eslint-plugin-react in flat config', () => {
       return eslint.lintFiles(['test.jsx']).then((results) => {
         const result = results[0];
 
-        assert.strictEqual(result.messages.length, 3);
+        assert.strictEqual(result.messages.length, 2);
         assert.strictEqual(result.messages[0].severity, 2);
-        assert.strictEqual(result.messages[0].ruleId, 'react/react-in-jsx-scope');
-        assert.strictEqual(result.messages[0].messageId, 'notInScope');
+        assert.strictEqual(result.messages[0].ruleId, 'react/no-unknown-property');
+        assert.strictEqual(result.messages[0].messageId, 'unknownProp');
         assert.strictEqual(result.messages[1].severity, 2);
-        assert.strictEqual(result.messages[1].ruleId, 'react/no-unknown-property');
-        assert.strictEqual(result.messages[1].messageId, 'unknownProp');
-        assert.strictEqual(result.messages[2].severity, 2);
-        assert.strictEqual(result.messages[2].ruleId, 'react/jsx-no-literals');
-        assert.strictEqual(result.messages[2].messageId, 'literalNotInJSXExpression');
+        assert.strictEqual(result.messages[1].ruleId, 'react/jsx-no-literals');
+        assert.strictEqual(result.messages[1].messageId, 'literalNotInJSXExpression');
       });
     });
 
@@ -68,13 +65,10 @@ describe('eslint-plugin-react in flat config', () => {
       return eslint.lintFiles(['test.jsx']).then((results) => {
         const result = results[0];
 
-        assert.strictEqual(result.messages.length, 2);
+        assert.strictEqual(result.messages.length, 1);
         assert.strictEqual(result.messages[0].severity, 2);
-        assert.strictEqual(result.messages[0].ruleId, 'react/react-in-jsx-scope');
-        assert.strictEqual(result.messages[0].messageId, 'notInScope');
-        assert.strictEqual(result.messages[1].severity, 2);
-        assert.strictEqual(result.messages[1].ruleId, 'react/no-unknown-property');
-        assert.strictEqual(result.messages[1].messageId, 'unknownProp');
+        assert.strictEqual(result.messages[0].ruleId, 'react/no-unknown-property');
+        assert.strictEqual(result.messages[0].messageId, 'unknownProp');
       });
     });
 
@@ -104,13 +98,10 @@ describe('eslint-plugin-react in flat config', () => {
       return eslint.lintFiles(['test.jsx']).then((results) => {
         const result = results[0];
 
-        assert.strictEqual(result.messages.length, 2);
+        assert.strictEqual(result.messages.length, 1);
         assert.strictEqual(result.messages[0].severity, 2);
-        assert.strictEqual(result.messages[0].ruleId, 'react/react-in-jsx-scope');
-        assert.strictEqual(result.messages[0].messageId, 'notInScope');
-        assert.strictEqual(result.messages[1].severity, 2);
-        assert.strictEqual(result.messages[1].ruleId, 'react/no-unknown-property');
-        assert.strictEqual(result.messages[1].messageId, 'unknownProp');
+        assert.strictEqual(result.messages[0].ruleId, 'react/no-unknown-property');
+        assert.strictEqual(result.messages[0].messageId, 'unknownProp');
       });
     });
   });

tests/lib/rules/jsx-uses-react.js

@@ -27,14 +27,18 @@ const parserOptions = {
 const settings = {
   react: {
     pragma: 'Foo',
+    version: '18',
   },
 };
 
 // -----------------------------------------------------------------------------
 // Tests
 // -----------------------------------------------------------------------------
 
-const ruleTester = new RuleTester({ parserOptions });
+const ruleTester = new RuleTester({
+  parserOptions,
+  settings: { react: { version: '18' } },
+});
 const ruleDefiner = getRuleDefiner(ruleTester);
 ruleDefiner.defineRule('react/jsx-uses-react', require('../../../lib/rules/jsx-uses-react'));
 
@@ -49,7 +53,7 @@ ruleTester.run('no-unused-vars', rule, {
     },
     {
       code: '/*eslint react/jsx-uses-react:1*/ var Frag; <></>;',
-      settings: { react: { fragment: 'Frag' } },
+      settings: { react: { fragment: 'Frag', version: '18' } },
       features: ['fragment'],
     },
     {
@@ -58,6 +62,17 @@ ruleTester.run('no-unused-vars', rule, {
     },
   ].map(parsers.disableNewTS)),
   invalid: parsers.all([
+    {
+      code: '/*eslint react/jsx-uses-react:1*/ var React; <div />;',
+      settings: { react: { version: '19.0.0' } },
+      errors: [{
+        message: '\'React\' is defined but never used.',
+        suggestions: [{
+          messageId: 'removeVar',
+          output: '/*eslint react/jsx-uses-react:1*/  <div />;',
+        }],
+      }],
+    },
     {
       code: '/*eslint react/jsx-uses-react:1*/ var React;',
       errors: [{
@@ -99,7 +114,7 @@ ruleTester.run('no-unused-vars', rule, {
         }],
       }],
       features: ['fragment'],
-      settings: { react: { fragment: 'Fragment' } },
+      settings: { react: { fragment: 'Fragment', version: '18' } },
     },
     {
       code: '/*eslint react/jsx-uses-react:1*/ var React; <></>;',

tests/lib/rules/react-in-jsx-scope.js

@@ -25,14 +25,18 @@ const parserOptions = {
 const settings = {
   react: {
     pragma: 'Foo',
+    version: '18',
   },
 };
 
 // -----------------------------------------------------------------------------
 // Tests
 // -----------------------------------------------------------------------------
 
-const ruleTester = new RuleTester({ parserOptions });
+const ruleTester = new RuleTester({
+  parserOptions,
+  settings: { react: { version: '18' } },
+});
 ruleTester.run('react-in-jsx-scope', rule, {
   valid: parsers.all([
     { code: 'var React, App; <App />;' },
@@ -63,6 +67,23 @@ ruleTester.run('react-in-jsx-scope', rule, {
       code: 'var Foo, App; <App />;',
       settings,
     },
+    {
+      code: 'var App, a = <App />;',
+      settings: { react: { version: '19.0.0' } },
+    },
+    {
+      code: 'var a = <App />;',
+      settings: { react: { version: '19.0.0' } },
+    },
+    {
+      code: 'var a = <img />;',
+      settings: { react: { version: '19.0.0' } },
+    },
+    {
+      code: 'var a = <>fragment</>;',
+      features: ['fragment'],
+      settings: { react: { version: '19.0.0' } },
+    },
   ]),
   invalid: parsers.all([
     {