[compiler] Improve hook validation diagnostics

compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateHooksUsage.ts

@@ -7,8 +7,8 @@
 
 import * as t from '@babel/types';
 import {
+  CompilerDiagnostic,
   CompilerError,
-  CompilerErrorDetail,
   ErrorCategory,
   ErrorSeverity,
 } from '../CompilerError';
@@ -95,16 +95,16 @@ export function validateHooksUsage(
   const unconditionalBlocks = computeUnconditionalBlocks(fn);
 
   const errors = new CompilerError();
-  const errorsByPlace = new Map<t.SourceLocation, CompilerErrorDetail>();
+  const errorsByPlace = new Map<t.SourceLocation, CompilerDiagnostic>();
 
   function recordError(
     loc: SourceLocation,
-    errorDetail: CompilerErrorDetail,
+    diagnostic: CompilerDiagnostic,
   ): void {
     if (typeof loc === 'symbol') {
-      errors.pushErrorDetail(errorDetail);
+      errors.pushDiagnostic(diagnostic);
     } else {
-      errorsByPlace.set(loc, errorDetail);
+      errorsByPlace.set(loc, diagnostic);
     }
   }
 
@@ -112,7 +112,7 @@ export function validateHooksUsage(
     // Once a particular hook has a conditional call error, don't report any further issues for this hook
     setKind(place, Kind.Error);
 
-    const reason =
+    const description =
       '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)';
     const previousError =
       typeof place.loc !== 'symbol' ? errorsByPlace.get(place.loc) : undefined;
@@ -121,16 +121,19 @@ export function validateHooksUsage(
      * In some circumstances such as optional calls, we may first encounter a "hook may not be referenced as normal values" error.
      * If that same place is also used as a conditional call, upgrade the error to a conditonal hook error
      */
-    if (previousError === undefined || previousError.reason !== reason) {
+    if (previousError === undefined || previousError.reason !== description) {
       recordError(
         place.loc,
-        new CompilerErrorDetail({
+        CompilerDiagnostic.create({
           category: ErrorCategory.Hooks,
-          description: null,
-          reason,
-          loc: place.loc,
           severity: ErrorSeverity.InvalidReact,
+          reason: 'Cannot call hooks conditionally',
+          description,
           suggestions: null,
+        }).withDetail({
+          kind: 'error',
+          loc: place.loc,
+          message: 'Cannot call hook conditionally',
         }),
       );
     }
@@ -141,14 +144,17 @@ export function validateHooksUsage(
     if (previousError === undefined) {
       recordError(
         place.loc,
-        new CompilerErrorDetail({
+        CompilerDiagnostic.create({
           category: ErrorCategory.Hooks,
-          description: null,
-          reason:
-            'Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values',
-          loc: place.loc,
           severity: ErrorSeverity.InvalidReact,
+          reason: 'Cannot reference hooks as regular values',
+          description:
+            'Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values',
           suggestions: null,
+        }).withDetail({
+          kind: 'error',
+          loc: place.loc,
+          message: 'Hooks may not be referenced as values',
         }),
       );
     }
@@ -159,14 +165,17 @@ export function validateHooksUsage(
     if (previousError === undefined) {
       recordError(
         place.loc,
-        new CompilerErrorDetail({
+        CompilerDiagnostic.create({
           category: ErrorCategory.Hooks,
-          description: null,
-          reason:
-            'Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks',
-          loc: place.loc,
           severity: ErrorSeverity.InvalidReact,
+          reason: 'Hooks must be the same on every render',
+          description:
+            'Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks',
           suggestions: null,
+        }).withDetail({
+          kind: 'error',
+          loc: place.loc,
+          message: 'This value may change to a different function',
         }),
       );
     }
@@ -427,8 +436,8 @@ export function validateHooksUsage(
     }
   }
 
-  for (const [, error] of errorsByPlace) {
-    errors.pushErrorDetail(error);
+  for (const [, diagnostic] of errorsByPlace) {
+    errors.pushDiagnostic(diagnostic);
   }
   return errors.asResult();
 }
@@ -450,15 +459,18 @@ function visitFunctionExpression(errors: CompilerError, fn: HIRFunction): void {
               : instr.value.property;
           const hookKind = getHookKind(fn.env, callee.identifier);
           if (hookKind != null) {
-            errors.pushErrorDetail(
-              new CompilerErrorDetail({
+            errors.pushDiagnostic(
+              CompilerDiagnostic.create({
                 category: ErrorCategory.Hooks,
                 severity: ErrorSeverity.InvalidReact,
-                reason:
+                reason: 'Cannot call hooks within function expressions',
+                description:
                   'Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)',
-                loc: callee.loc,
-                description: `Cannot call ${hookKind === 'Custom' ? 'hook' : hookKind} within a function expression`,
                 suggestions: null,
+              }).withDetail({
+                kind: 'error',
+                loc: callee.loc,
+                message: `Cannot call ${hookKind === 'Custom' ? 'hook' : hookKind} within a function expression`,
               }),
             );
           }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.conditional-hook-unknown-hook-react-namespace.expect.md

@@ -18,13 +18,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.conditional-hook-unknown-hook-react-namespace.ts:4:8
   2 |   let x = null;
   3 |   if (props.cond) {
 > 4 |     x = React.useNonexistentHook();
-    |         ^^^^^^^^^^^^^^^^^^^^^^^^ 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)
+    |         ^^^^^^^^^^^^^^^^^^^^^^^^ Cannot call hook conditionally
   5 |   }
   6 |   return x;
   7 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.conditional-hooks-as-method-call.expect.md

@@ -18,13 +18,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.conditional-hooks-as-method-call.ts:4:8
   2 |   let x = null;
   3 |   if (props.cond) {
 > 4 |     x = Foo.useFoo();
-    |         ^^^^^^^^^^ 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)
+    |         ^^^^^^^^^^ Cannot call hook conditionally
   5 |   }
   6 |   return x;
   7 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-property-load-local-hook.expect.md

@@ -25,24 +25,28 @@ export const FIXTURE_ENTRYPOINT = {
 ```
 Found 2 errors:
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.hook-property-load-local-hook.ts:7:12
    5 |
    6 | function Foo() {
 >  7 |   let bar = useFoo.useBar;
-     |             ^^^^^^^^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+     |             ^^^^^^^^^^^^^ Hooks may not be referenced as values
    8 |   return bar();
    9 | }
   10 |
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.hook-property-load-local-hook.ts:8:9
    6 | function Foo() {
    7 |   let bar = useFoo.useBar;
 >  8 |   return bar();
-     |          ^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+     |          ^^^ Hooks may not be referenced as values
    9 | }
   10 |
   11 | export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assign-hook-to-local.expect.md

@@ -16,12 +16,14 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-assign-hook-to-local.ts:2:12
   1 | function Component(props) {
 > 2 |   const x = useState;
-    |             ^^^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |             ^^^^^^^^ Hooks may not be referenced as values
   3 |   const state = x(null);
   4 |   return state[0];
   5 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-aliased-hook-import.expect.md

@@ -20,13 +20,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-conditional-call-aliased-hook-import.ts:6:11
   4 |   let data;
   5 |   if (props.cond) {
 > 6 |     data = readFragment();
-    |            ^^^^^^^^^^^^ 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)
+    |            ^^^^^^^^^^^^ Cannot call hook conditionally
   7 |   }
   8 |   return data;
   9 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-aliased-react-hook.expect.md

@@ -20,13 +20,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-conditional-call-aliased-react-hook.ts:6:10
   4 |   let s;
   5 |   if (props.cond) {
 > 6 |     [s] = state();
-    |           ^^^^^ 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)
+    |           ^^^^^ Cannot call hook conditionally
   7 |   }
   8 |   return s;
   9 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-call-non-hook-imported-as-hook.expect.md

@@ -20,13 +20,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-conditional-call-non-hook-imported-as-hook.ts:6:11
   4 |   let data;
   5 |   if (props.cond) {
 > 6 |     data = useArray();
-    |            ^^^^^^^^ 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)
+    |            ^^^^^^^^ Cannot call hook conditionally
   7 |   }
   8 |   return data;
   9 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-hook-as-call-arg.expect.md

@@ -14,12 +14,14 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-pass-hook-as-call-arg.ts:2:13
   1 | function Component(props) {
 > 2 |   return foo(useFoo);
-    |              ^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |              ^^^^^^ Hooks may not be referenced as values
   3 | }
   4 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-hook-as-prop.expect.md

@@ -14,12 +14,14 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-pass-hook-as-prop.ts:2:21
   1 | function Component(props) {
 > 2 |   return <Child foo={useFoo} />;
-    |                      ^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |                      ^^^^^^ Hooks may not be referenced as values
   3 | }
   4 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ternary-with-hook-values.expect.md

@@ -15,43 +15,51 @@ function Component(props) {
 ```
 Found 4 errors:
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-ternary-with-hook-values.ts:2:25
   1 | function Component(props) {
 > 2 |   const x = props.cond ? useA : useB;
-    |                          ^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |                          ^^^^ Hooks may not be referenced as values
   3 |   return x();
   4 | }
   5 |
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-ternary-with-hook-values.ts:2:32
   1 | function Component(props) {
 > 2 |   const x = props.cond ? useA : useB;
-    |                                 ^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |                                 ^^^^ Hooks may not be referenced as values
   3 |   return x();
   4 | }
   5 |
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-ternary-with-hook-values.ts:2:12
   1 | function Component(props) {
 > 2 |   const x = props.cond ? useA : useB;
-    |             ^^^^^^^^^^^^^^^^^^^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |             ^^^^^^^^^^^^^^^^^^^^^^^^ Hooks may not be referenced as values
   3 |   return x();
   4 | }
   5 |
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-ternary-with-hook-values.ts:3:9
   1 | function Component(props) {
   2 |   const x = props.cond ? useA : useB;
 > 3 |   return x();
-    |          ^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |          ^ Hooks may not be referenced as values
   4 | }
   5 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.propertyload-hook.expect.md

@@ -15,23 +15,27 @@ function Component() {
 ```
 Found 2 errors:
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.propertyload-hook.ts:2:12
   1 | function Component() {
 > 2 |   const x = Foo.useFoo;
-    |             ^^^^^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |             ^^^^^^^^^^ Hooks may not be referenced as values
   3 |   return x();
   4 | }
   5 |
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.propertyload-hook.ts:3:9
   1 | function Component() {
   2 |   const x = Foo.useFoo;
 > 3 |   return x();
-    |          ^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |          ^ Hooks may not be referenced as values
   4 | }
   5 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.bail.rules-of-hooks-3d692676194b.expect.md

@@ -22,15 +22,15 @@ const ComponentWithHookInsideCallback = React.forwardRef((props, ref) => {
 ```
 Found 1 error:
 
-Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks within function expressions
 
-Cannot call hook within a function expression.
+Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.bail.rules-of-hooks-3d692676194b.ts:8:4
    6 | const ComponentWithHookInsideCallback = React.forwardRef((props, ref) => {
    7 |   useEffect(() => {
 >  8 |     useHookInsideCallback();
-     |     ^^^^^^^^^^^^^^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |     ^^^^^^^^^^^^^^^^^^^^^ Cannot call hook within a function expression
    9 |   });
   10 |   return <button {...props} ref={ref} />;
   11 | });

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.bail.rules-of-hooks-8503ca76d6f8.expect.md

@@ -22,15 +22,15 @@ const ComponentWithHookInsideCallback = React.memo(props => {
 ```
 Found 1 error:
 
-Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks within function expressions
 
-Cannot call hook within a function expression.
+Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.bail.rules-of-hooks-8503ca76d6f8.ts:8:4
    6 | const ComponentWithHookInsideCallback = React.memo(props => {
    7 |   useEffect(() => {
 >  8 |     useHookInsideCallback();
-     |     ^^^^^^^^^^^^^^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |     ^^^^^^^^^^^^^^^^^^^^^ Cannot call hook within a function expression
    9 |   });
   10 |   return <button {...props} />;
   11 | });

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-call-phi-possibly-hook.expect.md

@@ -20,35 +20,41 @@ function Component(props) {
 ```
 Found 3 errors:
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-call-phi-possibly-hook.ts:3:31
   1 | function Component(props) {
   2 |   // This is a violation of using a hook as a normal value rule:
 > 3 |   const getUser = props.cond ? useGetUser : emptyFunction;
-    |                                ^^^^^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |                                ^^^^^^^^^^ Hooks may not be referenced as values
   4 |
   5 |   // Ideally we would report a "conditional hook call" error here.
   6 |   // It's an unconditional call, but the value may or may not be a hook.
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-call-phi-possibly-hook.ts:3:18
   1 | function Component(props) {
   2 |   // This is a violation of using a hook as a normal value rule:
 > 3 |   const getUser = props.cond ? useGetUser : emptyFunction;
-    |                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Hooks may not be referenced as values
   4 |
   5 |   // Ideally we would report a "conditional hook call" error here.
   6 |   // It's an unconditional call, but the value may or may not be a hook.
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-call-phi-possibly-hook.ts:8:9
    6 |   // It's an unconditional call, but the value may or may not be a hook.
    7 |   // TODO: report a conditional hook call error here
 >  8 |   return getUser();
-     |          ^^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+     |          ^^^^^^^ Hooks may not be referenced as values
    9 | }
   10 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-conditionally-call-local-named-like-hook.expect.md

@@ -19,13 +19,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-conditionally-call-local-named-like-hook.ts:6:4
   4 |   const useFoo = makeObject_Primitives();
   5 |   if (props.cond) {
 > 6 |     useFoo();
-    |     ^^^^^^ 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)
+    |     ^^^^^^ Cannot call hook conditionally
   7 |   }
   8 | }
   9 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-conditionally-call-prop-named-like-hook.expect.md

@@ -16,13 +16,15 @@ function Component({cond, useFoo}) {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-conditionally-call-prop-named-like-hook.ts:3:4
   1 | function Component({cond, useFoo}) {
   2 |   if (cond) {
 > 3 |     useFoo();
-    |     ^^^^^^ 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)
+    |     ^^^^^^ Cannot call hook conditionally
   4 |   }
   5 | }
   6 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-conditionally-methodcall-hooklike-property-of-local.expect.md

@@ -19,13 +19,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-conditionally-methodcall-hooklike-property-of-local.ts:6:4
   4 |   const local = makeObject_Primitives();
   5 |   if (props.cond) {
 > 6 |     local.useFoo();
-    |     ^^^^^^^^^^^^ 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)
+    |     ^^^^^^^^^^^^ Cannot call hook conditionally
   7 |   }
   8 | }
   9 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-condtionally-call-hooklike-property-of-local.expect.md

@@ -20,13 +20,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-condtionally-call-hooklike-property-of-local.ts:7:4
    5 |   if (props.cond) {
    6 |     const foo = local.useFoo;
 >  7 |     foo();
-     |     ^^^ 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)
+     |     ^^^ Cannot call hook conditionally
    8 |   }
    9 | }
   10 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-dynamic-hook-via-hooklike-local.expect.md

@@ -16,13 +16,15 @@ function Component() {
 ```
 Found 1 error:
 
-Error: Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+Error: Hooks must be the same on every render
+
+Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
 
 error.invalid-dynamic-hook-via-hooklike-local.ts:4:2
   2 |   const someFunction = useContext(FooContext);
   3 |   const useOhItsNamedLikeAHookNow = someFunction;
 > 4 |   useOhItsNamedLikeAHookNow();
-    |   ^^^^^^^^^^^^^^^^^^^^^^^^^ Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+    |   ^^^^^^^^^^^^^^^^^^^^^^^^^ This value may change to a different function
   5 | }
   6 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-after-early-return.expect.md

@@ -17,13 +17,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-hook-after-early-return.ts:5:9
   3 |     return null;
   4 |   }
 > 5 |   return useHook();
-    |          ^^^^^^^ 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)
+    |          ^^^^^^^ Cannot call hook conditionally
   6 | }
   7 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-as-conditional-test.expect.md

@@ -15,12 +15,14 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-hook-as-conditional-test.ts:2:26
   1 | function Component(props) {
 > 2 |   const x = props.cond ? (useFoo ? 1 : 2) : 3;
-    |                           ^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |                           ^^^^^^ Hooks may not be referenced as values
   3 |   return x;
   4 | }
   5 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-as-prop.expect.md

@@ -14,12 +14,14 @@ function Component({useFoo}) {
 ```
 Found 1 error:
 
-Error: Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+Error: Hooks must be the same on every render
+
+Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
 
 error.invalid-hook-as-prop.ts:2:2
   1 | function Component({useFoo}) {
 > 2 |   useFoo();
-    |   ^^^^^^ Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+    |   ^^^^^^ This value may change to a different function
   3 | }
   4 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-for.expect.md

@@ -18,24 +18,28 @@ function Component(props) {
 ```
 Found 2 errors:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-hook-for.ts:4:9
   2 |   let i = 0;
   3 |   for (let x = 0; useHook(x) < 10; useHook(i), x++) {
 > 4 |     i += useHook(x);
-    |          ^^^^^^^ 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)
+    |          ^^^^^^^ Cannot call hook conditionally
   5 |   }
   6 |   return i;
   7 | }
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-hook-for.ts:3:35
   1 | function Component(props) {
   2 |   let i = 0;
 > 3 |   for (let x = 0; useHook(x) < 10; useHook(i), x++) {
-    |                                    ^^^^^^^ 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)
+    |                                    ^^^^^^^ Cannot call hook conditionally
   4 |     i += useHook(x);
   5 |   }
   6 |   return i;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-from-hook-return.expect.md

@@ -16,13 +16,15 @@ function useFoo({data}) {
 ```
 Found 1 error:
 
-Error: Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+Error: Hooks must be the same on every render
+
+Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
 
 error.invalid-hook-from-hook-return.ts:3:14
   1 | function useFoo({data}) {
   2 |   const useMedia = useVideoPlayer();
 > 3 |   const foo = useMedia();
-    |               ^^^^^^^^ Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+    |               ^^^^^^^^ This value may change to a different function
   4 |   return foo;
   5 | }
   6 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-from-property-of-other-hook.expect.md

@@ -16,13 +16,15 @@ function useFoo({data}) {
 ```
 Found 1 error:
 
-Error: Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+Error: Hooks must be the same on every render
+
+Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
 
 error.invalid-hook-from-property-of-other-hook.ts:3:14
   1 | function useFoo({data}) {
   2 |   const player = useVideoPlayer();
 > 3 |   const foo = player.useMedia();
-    |               ^^^^^^^^^^^^^^^ Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+    |               ^^^^^^^^^^^^^^^ This value may change to a different function
   4 |   return foo;
   5 | }
   6 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-if-alternate.expect.md

@@ -19,13 +19,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-hook-if-alternate.ts:5:8
   3 |   if (props.cond) {
   4 |   } else {
 > 5 |     x = useHook();
-    |         ^^^^^^^ 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)
+    |         ^^^^^^^ Cannot call hook conditionally
   6 |   }
   7 |   return x;
   8 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-if-consequent.expect.md

@@ -18,13 +18,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-hook-if-consequent.ts:4:8
   2 |   let x = null;
   3 |   if (props.cond) {
 > 4 |     x = useHook();
-    |         ^^^^^^^ 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)
+    |         ^^^^^^^ Cannot call hook conditionally
   5 |   }
   6 |   return x;
   7 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-in-nested-function-expression-object-expression.expect.md

@@ -30,15 +30,15 @@ function Component() {
 ```
 Found 1 error:
 
-Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks within function expressions
 
-Cannot call hook within a function expression.
+Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-hook-in-nested-function-expression-object-expression.ts:10:21
    8 |           const y = {
    9 |             inner() {
 > 10 |               return useFoo();
-     |                      ^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |                      ^^^^^^ Cannot call hook within a function expression
   11 |             },
   12 |           };
   13 |           return y;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-in-nested-object-method.expect.md

@@ -26,15 +26,15 @@ function Component() {
 ```
 Found 1 error:
 
-Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks within function expressions
 
-Cannot call hook within a function expression.
+Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-hook-in-nested-object-method.ts:8:17
    6 |       const y = {
    7 |         inner() {
 >  8 |           return useFoo();
-     |                  ^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |                  ^^^^^^ Cannot call hook within a function expression
    9 |         },
   10 |       };
   11 |       return y;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-optional-methodcall.expect.md

@@ -15,12 +15,14 @@ function Component() {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-hook-optional-methodcall.ts:2:19
   1 | function Component() {
 > 2 |   const {result} = Module.useConditionalHook?.() ?? {};
-    |                    ^^^^^^^^^^^^^^^^^^^^^^^^^ 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)
+    |                    ^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot call hook conditionally
   3 |   return result;
   4 | }
   5 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-optional-property.expect.md

@@ -15,12 +15,14 @@ function Component() {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-hook-optional-property.ts:2:19
   1 | function Component() {
 > 2 |   const {result} = Module?.useConditionalHook() ?? {};
-    |                    ^^^^^^^^^^^^^^^^^^^^^^^^^^ 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)
+    |                    ^^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot call hook conditionally
   3 |   return result;
   4 | }
   5 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-optionalcall.expect.md

@@ -15,12 +15,14 @@ function Component() {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-hook-optionalcall.ts:2:19
   1 | function Component() {
 > 2 |   const {result} = useConditionalHook?.() ?? {};
-    |                    ^^^^^^^^^^^^^^^^^^ 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)
+    |                    ^^^^^^^^^^^^^^^^^^ Cannot call hook conditionally
   3 |   return result;
   4 | }
   5 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-reassigned-in-conditional.expect.md

@@ -16,35 +16,41 @@ function Component(props) {
 ```
 Found 3 errors:
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-hook-reassigned-in-conditional.ts:3:20
   1 | function Component(props) {
   2 |   let y;
 > 3 |   props.cond ? (y = useFoo) : null;
-    |                     ^^^^^^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |                     ^^^^^^ Hooks may not be referenced as values
   4 |   return y();
   5 | }
   6 |
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-hook-reassigned-in-conditional.ts:3:16
   1 | function Component(props) {
   2 |   let y;
 > 3 |   props.cond ? (y = useFoo) : null;
-    |                 ^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |                 ^ Hooks may not be referenced as values
   4 |   return y();
   5 | }
   6 |
 
-Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+Error: Cannot reference hooks as regular values
+
+Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
 
 error.invalid-hook-reassigned-in-conditional.ts:4:9
   2 |   let y;
   3 |   props.cond ? (y = useFoo) : null;
 > 4 |   return y();
-    |          ^ Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+    |          ^ Hooks may not be referenced as values
   5 | }
   6 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-1b9527f967f3.expect.md

@@ -27,46 +27,54 @@ function useHookInLoops() {
 ```
 Found 4 errors:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-rules-of-hooks-1b9527f967f3.ts:7:4
    5 | function useHookInLoops() {
    6 |   while (a) {
 >  7 |     useHook1();
-     |     ^^^^^^^^ 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)
+     |     ^^^^^^^^ Cannot call hook conditionally
    8 |     if (b) return;
    9 |     useHook2();
   10 |   }
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-rules-of-hooks-1b9527f967f3.ts:9:4
    7 |     useHook1();
    8 |     if (b) return;
 >  9 |     useHook2();
-     |     ^^^^^^^^ 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)
+     |     ^^^^^^^^ Cannot call hook conditionally
   10 |   }
   11 |   while (c) {
   12 |     useHook3();
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-rules-of-hooks-1b9527f967f3.ts:12:4
   10 |   }
   11 |   while (c) {
 > 12 |     useHook3();
-     |     ^^^^^^^^ 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)
+     |     ^^^^^^^^ Cannot call hook conditionally
   13 |     if (d) return;
   14 |     useHook4();
   15 |   }
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-rules-of-hooks-1b9527f967f3.ts:14:4
   12 |     useHook3();
   13 |     if (d) return;
 > 14 |     useHook4();
-     |     ^^^^^^^^ 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)
+     |     ^^^^^^^^ Cannot call hook conditionally
   15 |   }
   16 | }
   17 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-2aabd222fc6a.expect.md

@@ -20,13 +20,15 @@ function ComponentWithConditionalHook() {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-rules-of-hooks-2aabd222fc6a.ts:7:4
    5 | function ComponentWithConditionalHook() {
    6 |   if (cond) {
 >  7 |     useConditionalHook();
-     |     ^^^^^^^^^^^^^^^^^^ 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)
+     |     ^^^^^^^^^^^^^^^^^^ Cannot call hook conditionally
    8 |   }
    9 | }
   10 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-49d341e5d68f.expect.md

@@ -21,13 +21,15 @@ function useLabeledBlock() {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-rules-of-hooks-49d341e5d68f.ts:8:4
    6 |   label: {
    7 |     if (a) break label;
 >  8 |     useHook();
-     |     ^^^^^^^ 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)
+     |     ^^^^^^^ Cannot call hook conditionally
    9 |   }
   10 | }
   11 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-79128a755612.expect.md

@@ -20,13 +20,15 @@ function ComponentWithHookInsideLoop() {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-rules-of-hooks-79128a755612.ts:7:4
    5 | function ComponentWithHookInsideLoop() {
    6 |   while (cond) {
 >  7 |     useHookInsideLoop();
-     |     ^^^^^^^^^^^^^^^^^ 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)
+     |     ^^^^^^^^^^^^^^^^^ Cannot call hook conditionally
    8 |   }
    9 | }
   10 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-9718e30b856c.expect.md

@@ -24,13 +24,15 @@ function useHook() {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-rules-of-hooks-9718e30b856c.ts:12:2
   10 |     console.log('false');
   11 |   }
 > 12 |   useState();
-     |   ^^^^^^^^ 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)
+     |   ^^^^^^^^ Cannot call hook conditionally
   13 | }
   14 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-9bf17c174134.expect.md

@@ -19,24 +19,28 @@ function useHook() {
 ```
 Found 2 errors:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-rules-of-hooks-9bf17c174134.ts:6:7
   4 | // This *must* be invalid.
   5 | function useHook() {
 > 6 |   a && useHook1();
-    |        ^^^^^^^^ 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)
+    |        ^^^^^^^^ Cannot call hook conditionally
   7 |   b && useHook2();
   8 | }
   9 |
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-rules-of-hooks-9bf17c174134.ts:7:7
   5 | function useHook() {
   6 |   a && useHook1();
 > 7 |   b && useHook2();
-    |        ^^^^^^^^ 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)
+    |        ^^^^^^^^ Cannot call hook conditionally
   8 | }
   9 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-b4dcda3d60ed.expect.md

@@ -18,13 +18,15 @@ function ComponentWithTernaryHook() {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-rules-of-hooks-b4dcda3d60ed.ts:6:9
   4 | // This *must* be invalid.
   5 | function ComponentWithTernaryHook() {
 > 6 |   cond ? useTernaryHook() : null;
-    |          ^^^^^^^^^^^^^^ 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)
+    |          ^^^^^^^^^^^^^^ Cannot call hook conditionally
   7 | }
   8 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-c906cace44e9.expect.md

@@ -19,13 +19,15 @@ function useHook() {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-rules-of-hooks-c906cace44e9.ts:7:2
   5 | function useHook() {
   6 |   if (a) return;
 > 7 |   useState();
-    |   ^^^^^^^^ 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)
+    |   ^^^^^^^^ Cannot call hook conditionally
   8 | }
   9 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-d740d54e9c21.expect.md

@@ -20,13 +20,15 @@ function normalFunctionWithConditionalHook() {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-rules-of-hooks-d740d54e9c21.ts:7:4
    5 | function normalFunctionWithConditionalHook() {
    6 |   if (cond) {
 >  7 |     useHookInsideNormalFunction();
-     |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^ 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)
+     |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot call hook conditionally
    8 |   }
    9 | }
   10 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-d85c144bdf40.expect.md

@@ -22,24 +22,28 @@ function useHookInLoops() {
 ```
 Found 2 errors:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-rules-of-hooks-d85c144bdf40.ts:7:4
    5 | function useHookInLoops() {
    6 |   while (a) {
 >  7 |     useHook1();
-     |     ^^^^^^^^ 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)
+     |     ^^^^^^^^ Cannot call hook conditionally
    8 |     if (b) continue;
    9 |     useHook2();
   10 |   }
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-rules-of-hooks-d85c144bdf40.ts:9:4
    7 |     useHook1();
    8 |     if (b) continue;
 >  9 |     useHook2();
-     |     ^^^^^^^^ 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)
+     |     ^^^^^^^^ Cannot call hook conditionally
   10 |   }
   11 | }
   12 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-ea7c2fb545a9.expect.md

@@ -20,13 +20,15 @@ function useHookWithConditionalHook() {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-rules-of-hooks-ea7c2fb545a9.ts:7:4
    5 | function useHookWithConditionalHook() {
    6 |   if (cond) {
 >  7 |     useConditionalHook();
-     |     ^^^^^^^^^^^^^^^^^^ 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)
+     |     ^^^^^^^^^^^^^^^^^^ Cannot call hook conditionally
    8 |   }
    9 | }
   10 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-f3d6c5e9c83d.expect.md

@@ -24,13 +24,15 @@ function useHook() {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-rules-of-hooks-f3d6c5e9c83d.ts:12:2
   10 |   }
   11 |   if (a) return;
 > 12 |   useState();
-     |   ^^^^^^^^ 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)
+     |   ^^^^^^^^ Cannot call hook conditionally
   13 | }
   14 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-rules-of-hooks-f69800950ff0.expect.md

@@ -20,35 +20,41 @@ function useHook({bar}) {
 ```
 Found 3 errors:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-rules-of-hooks-f69800950ff0.ts:6:20
   4 | // This *must* be invalid.
   5 | function useHook({bar}) {
 > 6 |   let foo1 = bar && useState();
-    |                     ^^^^^^^^ 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)
+    |                     ^^^^^^^^ Cannot call hook conditionally
   7 |   let foo2 = bar || useState();
   8 |   let foo3 = bar ?? useState();
   9 | }
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-rules-of-hooks-f69800950ff0.ts:7:20
    5 | function useHook({bar}) {
    6 |   let foo1 = bar && useState();
 >  7 |   let foo2 = bar || useState();
-     |                     ^^^^^^^^ 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)
+     |                     ^^^^^^^^ Cannot call hook conditionally
    8 |   let foo3 = bar ?? useState();
    9 | }
   10 |
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 error.invalid-rules-of-hooks-f69800950ff0.ts:8:20
    6 |   let foo1 = bar && useState();
    7 |   let foo2 = bar || useState();
 >  8 |   let foo3 = bar ?? useState();
-     |                     ^^^^^^^^ 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)
+     |                     ^^^^^^^^ Cannot call hook conditionally
    9 | }
   10 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-0a1dbff27ba0.expect.md

@@ -20,15 +20,15 @@ function createHook() {
 ```
 Found 1 error:
 
-Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks within function expressions
 
-Cannot call hook within a function expression.
+Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid.invalid-rules-of-hooks-0a1dbff27ba0.ts:6:6
   4 |   return function useHookWithConditionalHook() {
   5 |     if (cond) {
 > 6 |       useConditionalHook();
-    |       ^^^^^^^^^^^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |       ^^^^^^^^^^^^^^^^^^ Cannot call hook within a function expression
   7 |     }
   8 |   };
   9 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-0de1224ce64b.expect.md

@@ -20,28 +20,28 @@ function createComponent() {
 ```
 Found 2 errors:
 
-Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks within function expressions
 
-Cannot call hook within a function expression.
+Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid.invalid-rules-of-hooks-0de1224ce64b.ts:6:6
   4 |   return function ComponentWithHookInsideCallback() {
   5 |     useEffect(() => {
 > 6 |       useHookInsideCallback();
-    |       ^^^^^^^^^^^^^^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |       ^^^^^^^^^^^^^^^^^^^^^ Cannot call hook within a function expression
   7 |     });
   8 |   };
   9 | }
 
-Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks within function expressions
 
-Cannot call useEffect within a function expression.
+Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid.invalid-rules-of-hooks-0de1224ce64b.ts:5:4
   3 | function createComponent() {
   4 |   return function ComponentWithHookInsideCallback() {
 > 5 |     useEffect(() => {
-    |     ^^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |     ^^^^^^^^^ Cannot call useEffect within a function expression
   6 |       useHookInsideCallback();
   7 |     });
   8 |   };

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-449a37146a83.expect.md

@@ -20,15 +20,15 @@ function createComponent() {
 ```
 Found 1 error:
 
-Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks within function expressions
 
-Cannot call useState within a function expression.
+Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid.invalid-rules-of-hooks-449a37146a83.ts:6:6
   4 |   return function ComponentWithHookInsideCallback() {
   5 |     function handleClick() {
 > 6 |       useState();
-    |       ^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |       ^^^^^^^^ Cannot call useState within a function expression
   7 |     }
   8 |   };
   9 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-76a74b4666e9.expect.md

@@ -18,15 +18,15 @@ function ComponentWithHookInsideCallback() {
 ```
 Found 1 error:
 
-Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks within function expressions
 
-Cannot call useState within a function expression.
+Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid.invalid-rules-of-hooks-76a74b4666e9.ts:5:4
   3 | function ComponentWithHookInsideCallback() {
   4 |   function handleClick() {
 > 5 |     useState();
-    |     ^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |     ^^^^^^^^ Cannot call useState within a function expression
   6 |   }
   7 | }
   8 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-d842d36db450.expect.md

@@ -20,15 +20,15 @@ function createComponent() {
 ```
 Found 1 error:
 
-Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks within function expressions
 
-Cannot call hook within a function expression.
+Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid.invalid-rules-of-hooks-d842d36db450.ts:6:6
   4 |   return function ComponentWithConditionalHook() {
   5 |     if (cond) {
 > 6 |       useConditionalHook();
-    |       ^^^^^^^^^^^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |       ^^^^^^^^^^^^^^^^^^ Cannot call hook within a function expression
   7 |     }
   8 |   };
   9 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid.invalid-rules-of-hooks-d952b82c2597.expect.md

@@ -18,15 +18,15 @@ function ComponentWithHookInsideCallback() {
 ```
 Found 1 error:
 
-Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks within function expressions
 
-Cannot call hook within a function expression.
+Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid.invalid-rules-of-hooks-d952b82c2597.ts:5:4
   3 | function ComponentWithHookInsideCallback() {
   4 |   useEffect(() => {
 > 5 |     useHookInsideCallback();
-    |     ^^^^^^^^^^^^^^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+    |     ^^^^^^^^^^^^^^^^^^^^^ Cannot call hook within a function expression
   6 |   });
   7 | }
   8 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-368024110a58.expect.md

@@ -22,13 +22,15 @@ const FancyButton = forwardRef(function (props, ref) {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 todo.error.invalid-rules-of-hooks-368024110a58.ts:8:4
    6 | const FancyButton = forwardRef(function (props, ref) {
    7 |   if (props.fancy) {
 >  8 |     useCustomHook();
-     |     ^^^^^^^^^^^^^ 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)
+     |     ^^^^^^^^^^^^^ Cannot call hook conditionally
    9 |   }
   10 |   return <button ref={ref}>{props.children}</button>;
   11 | });

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-8566f9a360e2.expect.md

@@ -22,13 +22,15 @@ const MemoizedButton = memo(function (props) {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 todo.error.invalid-rules-of-hooks-8566f9a360e2.ts:8:4
    6 | const MemoizedButton = memo(function (props) {
    7 |   if (props.fancy) {
 >  8 |     useCustomHook();
-     |     ^^^^^^^^^^^^^ 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)
+     |     ^^^^^^^^^^^^^ Cannot call hook conditionally
    9 |   }
   10 |   return <button>{props.children}</button>;
   11 | });

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.invalid-rules-of-hooks-a0058f0b446d.expect.md

@@ -21,13 +21,15 @@ function ComponentWithConditionalHook() {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 todo.error.invalid-rules-of-hooks-a0058f0b446d.ts:8:4
    6 | function ComponentWithConditionalHook() {
    7 |   if (cond) {
 >  8 |     Namespace.useConditionalHook();
-     |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 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)
+     |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot call hook conditionally
    9 |   }
   10 | }
   11 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-27c18dc8dad2.expect.md

@@ -22,13 +22,15 @@ const FancyButton = React.forwardRef((props, ref) => {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 todo.error.rules-of-hooks-27c18dc8dad2.ts:8:4
    6 | const FancyButton = React.forwardRef((props, ref) => {
    7 |   if (props.fancy) {
 >  8 |     useCustomHook();
-     |     ^^^^^^^^^^^^^ 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)
+     |     ^^^^^^^^^^^^^ Cannot call hook conditionally
    9 |   }
   10 |   return <button ref={ref}>{props.children}</button>;
   11 | });

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-d0935abedc42.expect.md

@@ -21,13 +21,15 @@ React.unknownFunction((foo, bar) => {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 todo.error.rules-of-hooks-d0935abedc42.ts:8:4
    6 | React.unknownFunction((foo, bar) => {
    7 |   if (foo) {
 >  8 |     useNotAHook(bar);
-     |     ^^^^^^^^^^^ 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)
+     |     ^^^^^^^^^^^ Cannot call hook conditionally
    9 |   }
   10 | });
   11 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/todo.error.rules-of-hooks-e29c874aa913.expect.md

@@ -22,13 +22,15 @@ function useHook() {
 ```
 Found 1 error:
 
-Error: 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)
+Error: Cannot call hooks conditionally
+
+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)
 
 todo.error.rules-of-hooks-e29c874aa913.ts:9:4
    7 |   try {
    8 |     f();
 >  9 |     useState();
-     |     ^^^^^^^^ 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)
+     |     ^^^^^^^^ Cannot call hook conditionally
   10 |   } catch {}
   11 | }
   12 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/error.invalid-nested-use-effect.expect.md

@@ -30,15 +30,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Error: Cannot call hooks within function expressions
 
-Cannot call useEffect within a function expression.
+Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
 
 error.invalid-nested-use-effect.ts:9:4
    7 |   };
    8 |   useEffect(() => {
 >  9 |     useEffect(() => {
-     |     ^^^^^^^^^ Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+     |     ^^^^^^^^^ Cannot call useEffect within a function expression
   10 |       function nested() {
   11 |         fire(foo(props));
   12 |       }

compiler/packages/eslint-plugin-react-compiler/__tests__/PluginTest-test.ts

@@ -68,9 +68,7 @@ testRule('plugin-recommended', TestRecommendedRules, {
           </>;
         }
       `,
-      errors: [
-        makeTestCaseError('Hooks must always be called in a consistent order'),
-      ],
+      errors: [makeTestCaseError('Cannot call hooks conditionally')],
     },
     {
       name: 'Multiple diagnostics within the same file are surfaced',
@@ -84,8 +82,8 @@ testRule('plugin-recommended', TestRecommendedRules, {
           return props.cond && useConditionalHook();
         }`,
       errors: [
-        makeTestCaseError('Hooks must always be called in a consistent order'),
-        makeTestCaseError('Hooks must always be called in a consistent order'),
+        makeTestCaseError('Cannot call hooks conditionally'),
+        makeTestCaseError('Cannot call hooks conditionally'),
       ],
     },
     {
@@ -98,9 +96,7 @@ testRule('plugin-recommended', TestRecommendedRules, {
 
         }
       `,
-      errors: [
-        makeTestCaseError('Hooks must always be called in a consistent order'),
-      ],
+      errors: [makeTestCaseError('Cannot call hooks conditionally')],
     },
     {
       name: 'Multiple non-fatal useMemo diagnostics are surfaced',