Repository: facebook/react
Pull request: [eprh] Temporarily disable ref access in render validation


This rule currently has a few false positives, so let's disable it for now (just in the eslint rule, it's still enabled in the compiler) while we iterate on it.


Changed files:
filename: compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts
patch: @@ -92,36 +92,8 @@ const tests: CompilerTestCases = {
         }
       `,
     },
-    {
-      // Don't report the issue if Flow already has
-      name: '[InvalidInput] Ref access during render',
-      code: normalizeIndent`
-        function Component(props) {
-          const ref = useRef(null);
-          // $FlowFixMe[react-rule-unsafe-ref]
-          const value = ref.current;
-          return value;
-        }
-      `,
-    },
   ],
   invalid: [
-    {
-      name: '[InvalidInput] Ref access during render',
-      code: normalizeIndent`
-        function Component(props) {
-          const ref = useRef(null);
-          const value = ref.current;
-          return value;
-        }
-      `,
-      errors: [
-        {
-          message:
-            'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)',
-        },
-      ],
-    },
     {
       name: 'Reportable levels can be configured',
       options: [{reportableLevels: new Set([ErrorSeverity.Todo])}],

filename: compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts
patch: @@ -105,6 +105,9 @@ const COMPILER_OPTIONS: Partial<PluginOptions> = {
   panicThreshold: 'none',
   // Don't emit errors on Flow suppressions--Flow already gave a signal
   flowSuppressions: false,
+  environment: validateEnvironmentConfig({
+    validateRefAccessDuringRender: false,
+  }),
 };
 
 const rule: Rule.RuleModule = {
@@ -149,10 +152,14 @@ const rule: Rule.RuleModule = {
     }
 
     let shouldReportUnusedOptOutDirective = true;
-    const options: PluginOptions = {
-      ...parsePluginOptions(userOpts),
+    const options: PluginOptions = parsePluginOptions({
       ...COMPILER_OPTIONS,
-    };
+      ...userOpts,
+      environment: {
+        ...COMPILER_OPTIONS.environment,
+        ...userOpts.environment,
+      },
+    });
     const userLogger: Logger | null = options.logger;
     options.logger = {
       logEvent: (filename, event): void => {

filename: packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRule-test.ts
patch: @@ -94,36 +94,8 @@ const tests: CompilerTestCases = {
         }
       `,
     },
-    {
-      // Don't report the issue if Flow already has
-      name: '[InvalidInput] Ref access during render',
-      code: normalizeIndent`
-        function Component(props) {
-          const ref = useRef(null);
-          // $FlowFixMe[react-rule-unsafe-ref]
-          const value = ref.current;
-          return value;
-        }
-      `,
-    },
   ],
   invalid: [
-    {
-      name: '[InvalidInput] Ref access during render',
-      code: normalizeIndent`
-        function Component(props) {
-          const ref = useRef(null);
-          const value = ref.current;
-          return value;
-        }
-      `,
-      errors: [
-        {
-          message:
-            'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)',
-        },
-      ],
-    },
     {
       name: 'Reportable levels can be configured',
       options: [{reportableLevels: new Set([ErrorSeverity.Todo])}],

filename: packages/eslint-plugin-react-hooks/src/rules/ReactCompiler.ts
patch: @@ -107,6 +107,9 @@ const COMPILER_OPTIONS: Partial<PluginOptions> = {
   panicThreshold: 'none',
   // Don't emit errors on Flow suppressions--Flow already gave a signal
   flowSuppressions: false,
+  environment: validateEnvironmentConfig({
+    validateRefAccessDuringRender: false,
+  }),
 };
 
 const rule: Rule.RuleModule = {
@@ -151,10 +154,14 @@ const rule: Rule.RuleModule = {
     }
 
     let shouldReportUnusedOptOutDirective = true;
-    const options: PluginOptions = {
-      ...parsePluginOptions(userOpts),
+    const options: PluginOptions = parsePluginOptions({
       ...COMPILER_OPTIONS,
-    };
+      ...userOpts,
+      environment: {
+        ...COMPILER_OPTIONS.environment,
+        ...userOpts.environment,
+      },
+    });
     const userLogger: Logger | null = options.logger;
     options.logger = {
       logEvent: (eventFilename, event): void => {