From c741d2db648d57dce07dc14c0b00a1944696e790 Mon Sep 17 00:00:00 2001
From: Joe Savona <joesavona@fb.com>
Date: Wed, 28 Aug 2024 16:54:04 -0700
Subject: [PATCH] [compiler] Silence ref-in-render errors in ESLint

We need this for compiler correctness but the false positive rate is a bit too high, let's suppress in ESLint for now.

ghstack-source-id: 2d24397b1b8e68043946cf38ef5fe9b041575277
Pull Request resolved: https://github.com/facebook/react/pull/30843
---
 .../src/CompilerError.ts                      |  6 ++++
 .../Validation/ValidateNoRefAccesInRender.ts  |  8 ++---
 ...r.capture-ref-for-later-mutation.expect.md |  8 ++---
 ...invalid-access-ref-during-render.expect.md |  2 +-
 ...-callback-invoked-during-render-.expect.md |  2 +-
 ...-disallow-mutating-ref-in-render.expect.md |  2 +-
 ...tating-refs-in-render-transitive.expect.md |  4 +--
 ...ror.invalid-pass-ref-to-function.expect.md |  2 +-
 ...d-ref-prop-in-render-destructure.expect.md |  2 +-
 ...ref-prop-in-render-property-load.expect.md |  2 +-
 ...n-callback-invoked-during-render.expect.md |  2 +-
 ...error.invalid-ref-value-as-props.expect.md |  2 +-
 ...d-set-and-read-ref-during-render.expect.md |  4 +--
 ...ef-nested-property-during-render.expect.md |  4 +--
 ...f-added-to-dep-without-type-info.expect.md |  4 +--
 ...rite-but-dont-read-ref-in-render.expect.md |  2 +-
 ...invalid-write-ref-prop-in-render.expect.md |  2 +-
 .../error.repro-ref-mutable-range.expect.md   |  2 +-
 ...ified-later-preserve-memoization.expect.md |  2 +-
 ...ia-function-preserve-memoization.expect.md |  4 +--
 ...operty-dont-preserve-memoization.expect.md |  2 +-
 ...alidate-mutate-ref-arg-in-render.expect.md |  2 +-
 ...r.capture-ref-for-later-mutation.expect.md |  8 ++---
 ....maybe-mutable-ref-not-preserved.expect.md |  2 +-
 .../error.useMemo-with-refs.flow.expect.md    |  2 +-
 .../__tests__/ReactCompilerRule-test.ts       | 36 ++++++++++++++++---
 26 files changed, 75 insertions(+), 43 deletions(-)

diff --git a/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts b/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts
index 5ea6f9862815f..bfdf6b9e9f02d 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts
@@ -18,6 +18,11 @@ export enum ErrorSeverity {
    * Code that breaks the rules of React.
    */
   InvalidReact = 'InvalidReact',
+  /**
+   * Like InvalidReact, but this specific error is still in testing w some false positives
+   * so we special-case it to suppress in ESLint.
+   */
+  InvalidRefInRender = 'InvalidRefInRender',
   /**
    * Incorrect configuration of the compiler.
    */
@@ -232,6 +237,7 @@ export class CompilerError extends Error {
         case ErrorSeverity.InvalidJS:
         case ErrorSeverity.InvalidReact:
         case ErrorSeverity.InvalidConfig:
+        case ErrorSeverity.InvalidRefInRender:
           return true;
         case ErrorSeverity.CannotPreserveMemoization:
         case ErrorSeverity.Todo:
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccesInRender.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccesInRender.ts
index 8a65b4709c174..1732c0a5af614 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccesInRender.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccesInRender.ts
@@ -246,7 +246,7 @@ function validateNoRefAccessInRenderImpl(
             // Report a more precise error when calling a local function that accesses a ref
             if (state.refAccessingFunctions.has(callee.identifier.id)) {
               errors.push({
-                severity: ErrorSeverity.InvalidReact,
+                severity: ErrorSeverity.InvalidRefInRender,
                 reason:
                   'This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef)',
                 loc: callee.loc,
@@ -351,7 +351,7 @@ function validateNoRefValueAccess(
     state.refAccessingFunctions.has(operand.identifier.id)
   ) {
     errors.push({
-      severity: ErrorSeverity.InvalidReact,
+      severity: ErrorSeverity.InvalidRefInRender,
       reason:
         'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)',
       loc: state.refValues.get(operand.identifier.id) ?? operand.loc,
@@ -377,7 +377,7 @@ function validateNoRefAccess(
     state.refAccessingFunctions.has(operand.identifier.id)
   ) {
     errors.push({
-      severity: ErrorSeverity.InvalidReact,
+      severity: ErrorSeverity.InvalidRefInRender,
       reason:
         'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)',
       loc: loc,
@@ -398,7 +398,7 @@ function validateNoDirectRefValueAccess(
 ): void {
   if (state.refValues.has(operand.identifier.id)) {
     errors.push({
-      severity: ErrorSeverity.InvalidReact,
+      severity: ErrorSeverity.InvalidRefInRender,
       reason:
         'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)',
       loc: state.refValues.get(operand.identifier.id) ?? operand.loc,
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-later-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-later-mutation.expect.md
index 52350036257d0..244a26cd01422 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-later-mutation.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-later-mutation.expect.md
@@ -35,13 +35,13 @@ export const FIXTURE_ENTRYPOINT = {
   10 |   };
   11 |   const moveLeft = {
 > 12 |     handler: handleKey('left'),
-     |              ^^^^^^^^^ InvalidReact: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) (12:12)
+     |              ^^^^^^^^^ InvalidRefInRender: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) (12:12)
 
-InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (12:12)
+InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (12:12)
 
-InvalidReact: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) (15:15)
+InvalidRefInRender: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) (15:15)
 
-InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (15:15)
+InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (15:15)
   13 |   };
   14 |   const moveRight = {
   15 |     handler: handleKey('right'),
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-during-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-during-render.expect.md
index 02748366456fb..e84e74f7399b8 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-during-render.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-during-render.expect.md
@@ -18,7 +18,7 @@ function Component(props) {
   2 | function Component(props) {
   3 |   const ref = useRef(null);
 > 4 |   const value = ref.current;
-    |                 ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
+    |                 ^^^^^^^^^^^ InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
   5 |   return value;
   6 | }
   7 |
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-aliased-ref-in-callback-invoked-during-render-.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-aliased-ref-in-callback-invoked-during-render-.expect.md
index e2ce2cceae3b9..2485dbfdfdbcc 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-aliased-ref-in-callback-invoked-during-render-.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-aliased-ref-in-callback-invoked-during-render-.expect.md
@@ -22,7 +22,7 @@ function Component(props) {
    7 |     return <Foo item={item} current={current} />;
    8 |   };
 >  9 |   return <Items>{props.items.map(item => renderItem(item))}</Items>;
-     |                                  ^^^^^^^^^^^^^^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (9:9)
+     |                                  ^^^^^^^^^^^^^^^^^^^^^^^^ InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (9:9)
   10 | }
   11 |
 ```
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-ref-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-ref-in-render.expect.md
index b5547a1328629..0876bcb8f78bb 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-ref-in-render.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-ref-in-render.expect.md
@@ -19,7 +19,7 @@ function Component() {
   2 | function Component() {
   3 |   const ref = useRef(null);
 > 4 |   ref.current = false;
-    |   ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
+    |   ^^^^^^^^^^^ InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
   5 |
   6 |   return <button ref={ref} />;
   7 | }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.expect.md
index f23ff6f3c8c57..c9ff537e93c90 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.expect.md
@@ -24,9 +24,9 @@ function Component() {
    7 |   };
    8 |   const changeRef = setRef;
 >  9 |   changeRef();
-     |   ^^^^^^^^^ InvalidReact: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) (9:9)
+     |   ^^^^^^^^^ InvalidRefInRender: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) (9:9)
 
-InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (9:9)
+InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (9:9)
   10 |
   11 |   return <button ref={ref} />;
   12 | }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-ref-to-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-ref-to-function.expect.md
index 27c116e346b79..4b5b8d59a4e8d 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-ref-to-function.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-ref-to-function.expect.md
@@ -18,7 +18,7 @@ function Component(props) {
   2 | function Component(props) {
   3 |   const ref = useRef(null);
 > 4 |   const x = foo(ref);
-    |                 ^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
+    |                 ^^^ InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
   5 |   return x.current;
   6 | }
   7 |
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-destructure.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-destructure.expect.md
index 100dafaf38a88..1495d5bd99d39 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-destructure.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-destructure.expect.md
@@ -17,7 +17,7 @@ function Component({ref}) {
   1 | // @validateRefAccessDuringRender @compilationMode(infer)
   2 | function Component({ref}) {
 > 3 |   const value = ref.current;
-    |                 ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (3:3)
+    |                 ^^^^^^^^^^^ InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (3:3)
   4 |   return <div>{value}</div>;
   5 | }
   6 |
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-property-load.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-property-load.expect.md
index 4d8c4c735c70e..4299f1c0d1c59 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-property-load.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-property-load.expect.md
@@ -17,7 +17,7 @@ function Component(props) {
   1 | // @validateRefAccessDuringRender @compilationMode(infer)
   2 | function Component(props) {
 > 3 |   const value = props.ref.current;
-    |                 ^^^^^^^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (3:3)
+    |                 ^^^^^^^^^^^^^^^^^ InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (3:3)
   4 |   return <div>{value}</div>;
   5 | }
   6 |
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-in-callback-invoked-during-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-in-callback-invoked-during-render.expect.md
index b4c7ae72d1a71..35b978491c93d 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-in-callback-invoked-during-render.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-in-callback-invoked-during-render.expect.md
@@ -21,7 +21,7 @@ function Component(props) {
    6 |     return <Foo item={item} current={current} />;
    7 |   };
 >  8 |   return <Items>{props.items.map(item => renderItem(item))}</Items>;
-     |                                  ^^^^^^^^^^^^^^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (8:8)
+     |                                  ^^^^^^^^^^^^^^^^^^^^^^^^ InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (8:8)
    9 | }
   10 |
 ```
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-value-as-props.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-value-as-props.expect.md
index f86f6b7a39145..e040b224bc400 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-value-as-props.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-value-as-props.expect.md
@@ -17,7 +17,7 @@ function Component(props) {
   2 | function Component(props) {
   3 |   const ref = useRef(null);
 > 4 |   return <Foo ref={ref.current} />;
-    |                    ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
+    |                    ^^^^^^^^^^^ InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
   5 | }
   6 |
 ```
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md
index d38adb5589db3..0808eaf96fdbb 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md
@@ -18,9 +18,9 @@ function Component(props) {
   2 | function Component(props) {
   3 |   const ref = useRef(null);
 > 4 |   ref.current = props.value;
-    |   ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
+    |   ^^^^^^^^^^^ InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
 
-InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (5:5)
+InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (5:5)
   5 |   return ref.current;
   6 | }
   7 |
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.expect.md
index 527adfc6e9fc5..c10fba373bba3 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.expect.md
@@ -18,9 +18,9 @@ function Component(props) {
   2 | function Component(props) {
   3 |   const ref = useRef({inner: null});
 > 4 |   ref.current.inner = props.value;
-    |   ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
+    |   ^^^^^^^^^^^ InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
 
-InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (5:5)
+InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (5:5)
   5 |   return ref.current.inner;
   6 | }
   7 |
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-use-ref-added-to-dep-without-type-info.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-use-ref-added-to-dep-without-type-info.expect.md
index f576bac764613..b64dbf489fe9c 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-use-ref-added-to-dep-without-type-info.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-use-ref-added-to-dep-without-type-info.expect.md
@@ -25,9 +25,9 @@ function Foo({a}) {
    8 |   // however, this is an instance of accessing a ref during render and is disallowed
    9 |   // under React's rules, so we reject this input
 > 10 |   const x = {a, val: val.ref.current};
-     |                      ^^^^^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (10:10)
+     |                      ^^^^^^^^^^^^^^^ InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (10:10)
 
-InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (10:10)
+InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (10:10)
   11 |
   12 |   return <VideoList videos={x} />;
   13 | }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-but-dont-read-ref-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-but-dont-read-ref-in-render.expect.md
index 35009f0339cc0..65ef1d3066775 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-but-dont-read-ref-in-render.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-but-dont-read-ref-in-render.expect.md
@@ -20,7 +20,7 @@ function useHook({value}) {
   3 |   const ref = useRef(null);
   4 |   // Writing to a ref in render is against the rules:
 > 5 |   ref.current = value;
-    |   ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (5:5)
+    |   ^^^^^^^^^^^ InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (5:5)
   6 |   // returning a ref is allowed, so this alone doesn't trigger an error:
   7 |   return ref;
   8 | }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-ref-prop-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-ref-prop-in-render.expect.md
index c00aaca4fe3a3..3d106acb0e520 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-ref-prop-in-render.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-ref-prop-in-render.expect.md
@@ -18,7 +18,7 @@ function Component(props) {
   2 | function Component(props) {
   3 |   const ref = props.ref;
 > 4 |   ref.current = true;
-    |   ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
+    |   ^^^^^^^^^^^ InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
   5 |   return <div>{value}</div>;
   6 | }
   7 |
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-ref-mutable-range.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-ref-mutable-range.expect.md
index 1e5fda2a35fb0..f2c430f605d12 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-ref-mutable-range.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-ref-mutable-range.expect.md
@@ -31,7 +31,7 @@ export const FIXTURE_ENTRYPOINT = {
    9 |   mutate(value);
   10 |   if (CONST_TRUE) {
 > 11 |     return <Stringify ref={identity(ref)} />;
-     |                                     ^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (11:11)
+     |                                     ^^^ InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (11:11)
   12 |   }
   13 |   return value;
   14 | }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md
index 7a8f271bd2879..81deed05bfcfa 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md
@@ -34,7 +34,7 @@ export const FIXTURE_ENTRYPOINT = {
   12 |
   13 |   // The ref is modified later, extending its range and preventing memoization of onChange
 > 14 |   ref.current.inner = null;
-     |   ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (14:14)
+     |   ^^^^^^^^^^^ InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (14:14)
   15 |
   16 |   return <input onChange={onChange} />;
   17 | }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md
index f3ab9816218f9..e2c3fa4b2cf7d 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md
@@ -37,9 +37,9 @@ export const FIXTURE_ENTRYPOINT = {
   15 |     ref.current.inner = null;
   16 |   };
 > 17 |   reset();
-     |   ^^^^^ InvalidReact: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) (17:17)
+     |   ^^^^^ InvalidRefInRender: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) (17:17)
 
-InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (17:17)
+InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (17:17)
   18 |
   19 |   return <input onChange={onChange} />;
   20 | }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-set-ref-nested-property-dont-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-set-ref-nested-property-dont-preserve-memoization.expect.md
index dbc3060a26f43..dd06528577cc7 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-set-ref-nested-property-dont-preserve-memoization.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-set-ref-nested-property-dont-preserve-memoization.expect.md
@@ -33,7 +33,7 @@ export const FIXTURE_ENTRYPOINT = {
   11 |   });
   12 |
 > 13 |   ref.current.inner = null;
-     |   ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (13:13)
+     |   ^^^^^^^^^^^ InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (13:13)
   14 |
   15 |   return <input onChange={onChange} />;
   16 | }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.expect.md
index 04c2345409421..92b473f79de4e 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.expect.md
@@ -23,7 +23,7 @@ export const FIXTURE_ENTRYPOINT = {
   1 | // @validateRefAccessDuringRender:true
   2 | function Foo(props, ref) {
 > 3 |   console.log(ref.current);
-    |               ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (3:3)
+    |               ^^^^^^^^^^^ InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (3:3)
   4 |   return <div>{props.bar}</div>;
   5 | }
   6 |
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/error.capture-ref-for-later-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/error.capture-ref-for-later-mutation.expect.md
index f0b0e6f3a8679..c2d9b6d68b1f9 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/error.capture-ref-for-later-mutation.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/error.capture-ref-for-later-mutation.expect.md
@@ -36,13 +36,13 @@ export const FIXTURE_ENTRYPOINT = {
   11 |   };
   12 |   const moveLeft = {
 > 13 |     handler: handleKey('left'),
-     |              ^^^^^^^^^ InvalidReact: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) (13:13)
+     |              ^^^^^^^^^ InvalidRefInRender: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) (13:13)
 
-InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (13:13)
+InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (13:13)
 
-InvalidReact: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) (16:16)
+InvalidRefInRender: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) (16:16)
 
-InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (16:16)
+InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (16:16)
   14 |   };
   15 |   const moveRight = {
   16 |     handler: handleKey('right'),
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.expect.md
index 1ac3884f92f25..55c8c50cc5449 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.expect.md
@@ -26,7 +26,7 @@ export const FIXTURE_ENTRYPOINT = {
    6 | function useFoo() {
    7 |   const r = useRef();
 >  8 |   return useMemo(() => makeArray(r), []);
-     |                                  ^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (8:8)
+     |                                  ^ InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (8:8)
    9 | }
   10 |
   11 | export const FIXTURE_ENTRYPOINT = {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-with-refs.flow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-with-refs.flow.expect.md
index de37e0d3d4391..0380c62986f3d 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-with-refs.flow.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-with-refs.flow.expect.md
@@ -22,7 +22,7 @@ component Component(disableLocalRef, ref) {
    5 |   const localRef = useFooRef();
    6 |   const mergedRef = useMemo(() => {
 >  7 |     return disableLocalRef ? ref : identity(ref, localRef);
-     |                                             ^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (7:7)
+     |                                             ^^^ InvalidRefInRender: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (7:7)
    8 |   }, [disableLocalRef, ref, localRef]);
    9 |   return <div ref={mergedRef} />;
   10 | }
diff --git a/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts b/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts
index 71be6b6622eb5..874eb3ecc56a7 100644
--- a/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts
+++ b/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts
@@ -104,21 +104,47 @@ const tests: CompilerTestCases = {
         }
       `,
     },
+    {
+      name: 'Ref access in render (invalid, but suppressed internally)',
+      code: normalizeIndent`
+        function Component(props) {
+          const ref = useRef(props.init);
+          return <div>{ref.current}</div>;
+        }
+      `,
+    },
   ],
   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: '[InvalidInput] Ref access during render',
+      name: '[InvalidInput] Conditional hook',
       code: normalizeIndent`
         function Component(props) {
-          const ref = useRef(null);
-          const value = ref.current;
-          return value;
+          if (props.cond) {
+            useHook();
+          }
+          return <div>{props.value}</div>;
         }
       `,
       errors: [
         {
           message:
-            'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)',
+            'Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)',
         },
       ],
     },