Repository: facebook/react
File: compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateHooksUsage.ts (TypeScript)

Code before:
}

function visitFunctionExpression(errors: CompilerError, fn: HIRFunction): void {
  for (const [, block] of fn.body.blocks) {
    for (const instr of block.instructions) {
      switch (instr.value.kind) {
        case 'ObjectMethod':
        case 'FunctionExpression': {
          visitFunctionExpression(errors, instr.value.loweredFunc.func);
          break;
        }
        case 'MethodCall':
        case 'CallExpression': {
          const callee =
            instr.value.kind === 'CallExpression'
              ? instr.value.callee
              : instr.value.property;
          const hookKind = getHookKind(fn.env, callee.identifier);
          if (hookKind != null) {
            errors.pushErrorDetail(
              new CompilerErrorDetail({
                severity: ErrorSeverity.InvalidReact,
                reason:
                  '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' ? 'custom hook' : hookKind} within a function component`,
                suggestions: null,
              }),
            );
          }
          break;
        }
      }
    }
  }
}


Review comment (suggestion):
Nit: just drop the `custom`? I don't think it's adding information here.

```suggestion
                description: `Cannot call ${hookKind === 'Custom' ? 'hook' : hookKind} within a function component`,
```

Also what's the difference bewteen reason and description? If they're concatenated it's a bit duplicative.

Code after:
}

function visitFunctionExpression(errors: CompilerError, fn: HIRFunction): void {
  for (const [, block] of fn.body.blocks) {
    for (const instr of block.instructions) {
      switch (instr.value.kind) {
        case 'ObjectMethod':
        case 'FunctionExpression': {
          visitFunctionExpression(errors, instr.value.loweredFunc.func);
          break;
        }
        case 'MethodCall':
        case 'CallExpression': {
          const callee =
            instr.value.kind === 'CallExpression'
              ? instr.value.callee
              : instr.value.property;
          const hookKind = getHookKind(fn.env, callee.identifier);
          if (hookKind != null) {
            errors.pushErrorDetail(
              new CompilerErrorDetail({
                severity: ErrorSeverity.InvalidReact,
                reason:
                  '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,
              }),
            );
          }
          break;
        }
      }
    }
  }
}