[compiler] Standarize CompilerDiagnostic descriptions (trailing periods)

Separated this out into its own PR since it's really a cosmetic change. CompilerErrorDetail and CompilerDiagnostic now both expect `reason`/`category` and `description` to *not* have trailing periods.
2025-11-01 09:12:30 +00:00 · 2025-08-11 13:48:58 -07:00
parent 8c0829bda4
commit 68a07a15cf
93 changed files with 132 additions and 129 deletions
@@ -129,7 +129,7 @@ export class CompilerDiagnostic {
    const errorEntry = ErrorCodeDetails[code];
    let description = undefined;
    if (errorEntry.description != null) {
-      description = errorEntry.description;
+      description = errorEntry.description + '.';
    }
    if (options?.description != null && options.description.length > 0) {
      if (description != null && description.length > 0) {
@@ -137,7 +137,7 @@ export class CompilerDiagnostic {
      } else {
        description = '';
      }
-      description += options.description;
+      description += options.description + '.';
    }

    const diagnosticOptions: CompilerDiagnosticOptions = {
@@ -284,22 +284,25 @@ export class CompilerErrorDetail {
    if (this.options.errorCode != null) {
      let description = undefined;
      if (ErrorCodeDetails[this.options.errorCode].description != null) {
-        description = ErrorCodeDetails[this.options.errorCode].description;
+        description =
+          ErrorCodeDetails[this.options.errorCode].description + '.';
      }
      if (
        this.options.description != null &&
        this.options.description.length > 0
      ) {
        if (description != null && description.length > 0) {
-          description += '. ';
+          description += ' ';
        } else {
          description = '';
        }
-        description += this.options.description;
+        description += this.options.description + '.';
      }
      return description;
    }
-    return this.options.description;
+    return this.options.description
+      ? this.options.description + '.'
+      : this.options.description;
  }
  get severity(): ErrorSeverity {
    if (this.options.errorCode != null) {
@@ -327,7 +330,7 @@ export class CompilerErrorDetail {
  printErrorMessage(source: string, options: PrintErrorMessageOptions): string {
    const buffer = [printErrorSummary(this.severity, this.reason)];
    if (this.description != null) {
-      buffer.push(`\n\n${this.description}.`);
+      buffer.push(`\n\n${this.description}`);
    }
    const loc = this.loc;
    if (loc != null && typeof loc !== 'symbol') {
@@ -89,9 +89,7 @@ function assertValidEffectImportReference(
         */
        logAndThrowDiagnostic(
          CompilerDiagnostic.fromCode(ErrorCode.DID_NOT_INFER_DEPS, {
-            description:
-              'To resolve, either pass a dependency array or fix reported compiler bailout diagnostics.' +
-              (maybeErrorDiagnostic ? ` ${maybeErrorDiagnostic}` : ''),
+            description: maybeErrorDiagnostic ? `${maybeErrorDiagnostic}` : '',
            details: [
              {
                kind: 'error',
@@ -457,7 +457,7 @@ function applySignature(
              place: effect.value,
              // TODO: remove ERROR_CODE.INVALID_WRITE and update test fixtures
              error: CompilerDiagnostic.fromCode(ErrorCode.INVALID_WRITE, {
-                description: ErrorCodeDetails[errorCode].reason + '.',
+                description: ErrorCodeDetails[errorCode].reason,
              }).withDetail({
                kind: 'error',
                loc: effect.value.loc,
@@ -1074,7 +1074,7 @@ function applyEffect(
              place: effect.value,
              // TODO: remove ERROR_CODE.INVALID_WRITE and update test fixtures
              error: CompilerDiagnostic.fromCode(ErrorCode.INVALID_WRITE, {
-                description: ErrorCodeDetails[errorCode].reason + '.',
+                description: ErrorCodeDetails[errorCode].reason,
              }).withDetail({
                kind: 'error',
                loc: effect.value.loc,
@@ -147,7 +147,7 @@ export const ErrorCodeDetails: Record<ErrorCode, ErrorCodeType> = {
    severity: ErrorSeverity.InvalidReact,
    reason: 'Cannot call impure functions during render',
    description:
-      'Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).',
+      'Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent)',
    linterCategory: LinterCategory.IMPURE_FUNCTIONS,
  },
  [ErrorCode.JSX_IN_TRY]: {
@@ -186,14 +186,14 @@ export const ErrorCodeDetails: Record<ErrorCode, ErrorCodeType> = {
    code: ErrorCode.WRITE_AFTER_RENDER,
    severity: ErrorSeverity.InvalidReact,
    reason: 'Cannot modify local variables after render completes',
-    description: `This argument is a function which may reassign or mutate a variable after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.`,
+    description: `This argument is a function which may reassign or mutate a variable after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead`,
    linterCategory: LinterCategory.INVALID_WRITE,
  },
  [ErrorCode.REASSIGN_AFTER_RENDER]: {
    code: ErrorCode.REASSIGN_AFTER_RENDER,
    severity: ErrorSeverity.InvalidReact,
    reason: 'Cannot reassign local variables after render completes',
-    description: `Reassigning local variables after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.`,
+    description: `Reassigning local variables after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead`,
    linterCategory: LinterCategory.INVALID_WRITE,
  },
  [ErrorCode.REASSIGN_IN_ASYNC]: {
@@ -253,7 +253,7 @@ export const ErrorCodeDetails: Record<ErrorCode, ErrorCodeType> = {
    severity: ErrorSeverity.InvalidReact,
    reason: 'useMemo() callbacks may not accept parameters',
    description:
-      'useMemo() callbacks are called by React to cache calculations across re-renders. They should not take parameters. Instead, directly reference the props, state, or local variables needed for the computation.',
+      'useMemo() callbacks are called by React to cache calculations across re-renders. They should not take parameters. Instead, directly reference the props, state, or local variables needed for the computation',
    linterCategory: LinterCategory.VALIDATE_MANUAL_MEMO,
  },
  [ErrorCode.INVALID_USE_MEMO_CALLBACK_ASYNC]: {
@@ -261,7 +261,7 @@ export const ErrorCodeDetails: Record<ErrorCode, ErrorCodeType> = {
    severity: ErrorSeverity.InvalidReact,
    reason: 'useMemo() callbacks may not be async or generator functions',
    description:
-      'useMemo() callbacks are called once and must synchronously return a value.',
+      'useMemo() callbacks are called once and must synchronously return a value',
    linterCategory: LinterCategory.VALIDATE_MANUAL_MEMO,
  },
  [ErrorCode.INVALID_USE_MEMO_CALLBACK_RETURN]: {
@@ -331,7 +331,7 @@ export const ErrorCodeDetails: Record<ErrorCode, ErrorCodeType> = {
  [ErrorCode.INVALID_WRITE_IMMUTABLE_VALUE_USE_CONTEXT]: {
    code: ErrorCode.INVALID_WRITE_IMMUTABLE_VALUE_USE_CONTEXT,
    severity: ErrorSeverity.InvalidReact,
-    reason: `Modifying a value returned from 'useContext()' is not allowed.`,
+    reason: `Modifying a value returned from 'useContext()' is not allowed`,
    linterCategory: LinterCategory.INVALID_WRITE,
  },
  [ErrorCode.INVALID_WRITE_IMMUTABLE_VALUE_KNOWN_SIGNATURE]: {
@@ -413,7 +413,7 @@ export const ErrorCodeDetails: Record<ErrorCode, ErrorCodeType> = {
  [ErrorCode.FILENAME_NOT_SET]: {
    code: ErrorCode.FILENAME_NOT_SET,
    severity: ErrorSeverity.InvalidConfig,
-    reason: `Expected a filename but found none.`,
+    reason: `Expected a filename but found none`,
    description:
      "When the 'sources' config options is specified, the React compiler will only compile files with a name",
    linterCategory: LinterCategory.COMPILER_CONFIG,
@@ -545,7 +545,7 @@ export const ErrorCodeDetails: Record<ErrorCode, ErrorCodeType> = {
    reason:
      'Compilation skipped because existing memoization could not be preserved',
    description:
-      'React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output.',
+      'React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output',
    severity: ErrorSeverity.CannotPreserveMemoization,
    linterCategory: LinterCategory.TODO_SYNTAX,
  },
@@ -563,6 +563,8 @@ export const ErrorCodeDetails: Record<ErrorCode, ErrorCodeType> = {
    code: ErrorCode.DID_NOT_INFER_DEPS,
    reason:
      'Cannot infer dependencies of this effect. This will break your build!',
+    description:
+      'To resolve, either pass a dependency array or fix reported compiler bailout diagnostics',
    severity: ErrorSeverity.InvalidReact,
    linterCategory: LinterCategory.UNSUPPORTED_SYNTAX,
  },
@@ -604,7 +606,7 @@ export const ErrorCodeDetails: Record<ErrorCode, ErrorCodeType> = {
      'Compilation skipped because existing memoization could not be preserved',
    description: [
      'React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. ',
-      'This dependency may be mutated later, which could cause the value to change unexpectedly.',
+      'This dependency may be mutated later, which could cause the value to change unexpectedly',
    ].join(''),
    severity: ErrorSeverity.CannotPreserveMemoization,
    linterCategory: LinterCategory.UNSUPPORTED_SYNTAX,
@@ -615,7 +617,7 @@ export const ErrorCodeDetails: Record<ErrorCode, ErrorCodeType> = {
      'Compilation skipped because existing memoization could not be preserved',
    description:
      'React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. ' +
-      'The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected.',
+      'The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected',
    severity: ErrorSeverity.CannotPreserveMemoization,
    linterCategory: LinterCategory.UNSUPPORTED_SYNTAX,
  },
@@ -289,7 +289,7 @@ function validateInferredDep(
              errorDiagnostic
                ? getCompareDependencyResultDescription(errorDiagnostic)
                : 'Inferred dependency not present in source'
-            }.`
+            }`
          : '',
      suggestions: null,
    }).withDetail({
@@ -566,7 +566,7 @@ class Visitor extends ReactiveFunctionVisitor<VisitorState> {
              state.errors.pushDiagnostic(
                CompilerDiagnostic.fromCode(ErrorCode.MANUAL_MEMO_REMOVED, {
                  description: DEBUG
-                    ? `${printIdentifier(identifier)} was not memoized.`
+                    ? `${printIdentifier(identifier)} was not memoized`
                    : '',
                }).withDetail({
                  kind: 'error',
@@ -19,7 +19,7 @@ Found 1 error:

 Error: Cannot reassign variables declared outside of the component/hook

-Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
+Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).

 error.assign-global-in-component-tag-function.ts:3:4
  1 | function Component() {
@@ -22,7 +22,7 @@ Found 1 error:

 Error: Cannot reassign variables declared outside of the component/hook

-Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
+Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).

 error.assign-global-in-jsx-children.ts:3:4
  1 | function Component() {
@@ -20,7 +20,7 @@ Found 1 error:

 Error: React Compiler has skipped optimizing this component because one or more React rule violations were reported by Flow

-React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior Found suppression `$FlowFixMe[react-rule-hook]`
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `$FlowFixMe[react-rule-hook]`.

 error.bailout-on-flow-suppression.ts:4:2
  2 |
@@ -23,7 +23,7 @@ Found 2 errors:

 Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled

-React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior Found suppression `eslint-disable my-app/react-rule`
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable my-app/react-rule`.

 error.bailout-on-suppression-of-custom-rule.ts:3:0
  1 | // @eslintSuppressionRules:["my-app","react-rule"]
@@ -36,7 +36,7 @@ error.bailout-on-suppression-of-custom-rule.ts:3:0

 Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled

-React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior Found suppression `eslint-disable-next-line my-app/react-rule`
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable-next-line my-app/react-rule`.

 error.bailout-on-suppression-of-custom-rule.ts:7:2
   5 |   'use forget';
@@ -36,7 +36,7 @@ Found 2 errors:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.capture-ref-for-mutation.ts:12:13
  10 |   };
@@ -49,7 +49,7 @@ error.capture-ref-for-mutation.ts:12:13

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.capture-ref-for-mutation.ts:15:13
  13 |   };
@@ -24,7 +24,7 @@ Found 2 errors:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.hook-ref-value.ts:5:23
  3 | function Component(props) {
@@ -37,7 +37,7 @@ error.hook-ref-value.ts:5:23

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.hook-ref-value.ts:5:23
  3 | function Component(props) {
@@ -19,7 +19,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.invalid-access-ref-during-render.ts:4:16
  2 | function Component(props) {
@@ -30,7 +30,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.invalid-access-ref-in-reducer-init.ts:8:4
   6 |     (state, action) => state + action,
@@ -26,7 +26,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.invalid-access-ref-in-reducer.ts:5:29
  3 | function Component(props) {
@@ -22,7 +22,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.invalid-access-ref-in-render-mutate-object-with-ref-function.ts:7:19
   5 |   const object = {};
@@ -26,7 +26,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.invalid-access-ref-in-state-initializer.ts:5:27
  3 | function Component(props) {
@@ -23,7 +23,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.invalid-aliased-ref-in-callback-invoked-during-render-.ts:9:33
   7 |     return <Foo item={item} current={current} />;
@@ -22,7 +22,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

  4 | component Example() {
  5 |   const fooRef = makeObject_Primitives();
@@ -26,7 +26,7 @@ Found 2 errors:

 Error: Calling setState from useMemo may trigger an infinite loop

-Each time the memo callback is evaluated it will change state. This can cause a memoization dependency to change, running the memo function again and causing an infinite loop. Instead of setting state in useMemo(), prefer deriving the value during render. (https://react.dev/reference/react/useState)
+Each time the memo callback is evaluated it will change state. This can cause a memoization dependency to change, running the memo function again and causing an infinite loop. Instead of setting state in useMemo(), prefer deriving the value during render. (https://react.dev/reference/react/useState).

 error.invalid-conditional-setState-in-useMemo.ts:7:6
   5 |   useMemo(() => {
@@ -39,7 +39,7 @@ error.invalid-conditional-setState-in-useMemo.ts:7:6

 Error: Calling setState from useMemo may trigger an infinite loop

-Each time the memo callback is evaluated it will change state. This can cause a memoization dependency to change, running the memo function again and causing an infinite loop. Instead of setting state in useMemo(), prefer deriving the value during render. (https://react.dev/reference/react/useState)
+Each time the memo callback is evaluated it will change state. This can cause a memoization dependency to change, running the memo function again and causing an infinite loop. Instead of setting state in useMemo(), prefer deriving the value during render. (https://react.dev/reference/react/useState).

 error.invalid-conditional-setState-in-useMemo.ts:8:6
   6 |     if (cond) {
@@ -17,7 +17,7 @@ Found 1 error:

 Error: Cannot reassign variables declared outside of the component/hook

-Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
+Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).

 error.invalid-destructure-assignment-to-global.ts:2:3
  1 | function useFoo(props) {
@@ -19,7 +19,7 @@ Found 1 error:

 Error: Cannot reassign variables declared outside of the component/hook

-Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
+Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).

 error.invalid-destructure-to-local-global-variables.ts:3:6
  1 | function Component(props) {
@@ -20,7 +20,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.invalid-disallow-mutating-ref-in-render.ts:4:2
  2 | function Component() {
@@ -25,7 +25,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.invalid-disallow-mutating-refs-in-render-transitive.ts:9:2
   7 |   };
@@ -39,7 +39,7 @@ Found 1 error:

 Error: Cannot reassign variables declared outside of the component/hook

-Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
+Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).

 error.invalid-global-reassignment-indirect.ts:9:4
   7 |
@@ -42,7 +42,7 @@ Found 1 error:

 Error: Cannot access variable before it is declared

-Reading a variable before it is initialized will prevent the earlier access from updating when this value changes over time. Instead, move the variable access to after it has been initialized
+Reading a variable before it is initialized will prevent the earlier access from updating when this value changes over time. Instead, move the variable access to after it has been initialized.

 error.invalid-hoisting-setstate.ts:19:18
  17 |    * $2 = Function context=setState
@@ -28,7 +28,7 @@ Found 1 error:

 Error: This value cannot be modified

-Modifying a value returned from 'useContext()' is not allowed..
+Modifying a value returned from 'useContext()' is not allowed.

 error.invalid-mutate-context-in-callback.ts:12:4
  10 |   // independently
@@ -18,7 +18,7 @@ Found 1 error:

 Error: This value cannot be modified

-Modifying a value returned from 'useContext()' is not allowed..
+Modifying a value returned from 'useContext()' is not allowed.

 error.invalid-mutate-context.ts:3:2
  1 | function Component(props) {
@@ -19,7 +19,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.invalid-pass-ref-to-function.ts:4:16
  2 | function Component(props) {
@@ -18,7 +18,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.invalid-read-ref-prop-in-render-destructure.ts:3:16
  1 | // @validateRefAccessDuringRender @compilationMode:"infer"
@@ -18,7 +18,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.invalid-read-ref-prop-in-render-property-load.ts:3:16
  1 | // @validateRefAccessDuringRender @compilationMode:"infer"
@@ -29,7 +29,7 @@ Found 1 error:

 Error: Cannot reassign variable in async function

-Reassigning a variable in an async function can cause inconsistent behavior on subsequent renders. Consider using state instead
+Reassigning a variable in an async function can cause inconsistent behavior on subsequent renders. Consider using state instead.

 error.invalid-reassign-local-variable-in-async-callback.ts:8:6
   6 |       // after render, so this should error regardless of where this ends up
@@ -22,7 +22,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.invalid-ref-in-callback-invoked-during-render.ts:8:33
   6 |     return <Foo item={item} current={current} />;
@@ -18,7 +18,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.invalid-ref-value-as-props.ts:4:19
  2 | function Component(props) {
@@ -19,7 +19,7 @@ Found 2 errors:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.invalid-set-and-read-ref-during-render.ts:4:2
  2 | function Component(props) {
@@ -32,7 +32,7 @@ error.invalid-set-and-read-ref-during-render.ts:4:2

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.invalid-set-and-read-ref-during-render.ts:5:9
  3 |   const ref = useRef(null);
@@ -19,7 +19,7 @@ Found 2 errors:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.invalid-set-and-read-ref-nested-property-during-render.ts:4:2
  2 | function Component(props) {
@@ -32,7 +32,7 @@ error.invalid-set-and-read-ref-nested-property-during-render.ts:4:2

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.invalid-set-and-read-ref-nested-property-during-render.ts:5:9
  3 |   const ref = useRef({inner: null});
@@ -30,7 +30,7 @@ Found 1 error:

 Error: Calling setState from useMemo may trigger an infinite loop

-Each time the memo callback is evaluated it will change state. This can cause a memoization dependency to change, running the memo function again and causing an infinite loop. Instead of setting state in useMemo(), prefer deriving the value during render. (https://react.dev/reference/react/useState)
+Each time the memo callback is evaluated it will change state. This can cause a memoization dependency to change, running the memo function again and causing an infinite loop. Instead of setting state in useMemo(), prefer deriving the value during render. (https://react.dev/reference/react/useState).

 error.invalid-setState-in-useMemo-indirect-useCallback.ts:13:4
  11 |
@@ -24,7 +24,7 @@ Found 2 errors:

 Error: Calling setState from useMemo may trigger an infinite loop

-Each time the memo callback is evaluated it will change state. This can cause a memoization dependency to change, running the memo function again and causing an infinite loop. Instead of setting state in useMemo(), prefer deriving the value during render. (https://react.dev/reference/react/useState)
+Each time the memo callback is evaluated it will change state. This can cause a memoization dependency to change, running the memo function again and causing an infinite loop. Instead of setting state in useMemo(), prefer deriving the value during render. (https://react.dev/reference/react/useState).

 error.invalid-setState-in-useMemo.ts:6:4
  4 |
@@ -37,7 +37,7 @@ error.invalid-setState-in-useMemo.ts:6:4

 Error: Calling setState from useMemo may trigger an infinite loop

-Each time the memo callback is evaluated it will change state. This can cause a memoization dependency to change, running the memo function again and causing an infinite loop. Instead of setting state in useMemo(), prefer deriving the value during render. (https://react.dev/reference/react/useState)
+Each time the memo callback is evaluated it will change state. This can cause a memoization dependency to change, running the memo function again and causing an infinite loop. Instead of setting state in useMemo(), prefer deriving the value during render. (https://react.dev/reference/react/useState).

 error.invalid-setState-in-useMemo.ts:7:4
   5 |   useMemo(() => {
@@ -21,7 +21,7 @@ Found 2 errors:

 Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled

-React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior Found suppression `eslint-disable react-hooks/rules-of-hooks`
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable react-hooks/rules-of-hooks`.

 error.invalid-sketchy-code-use-forget.ts:1:0
 > 1 | /* eslint-disable react-hooks/rules-of-hooks */
@@ -32,7 +32,7 @@ error.invalid-sketchy-code-use-forget.ts:1:0

 Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled

-React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior Found suppression `eslint-disable-next-line react-hooks/rules-of-hooks`
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable-next-line react-hooks/rules-of-hooks`.

 error.invalid-sketchy-code-use-forget.ts:5:2
  3 |   'use forget';
@@ -40,7 +40,7 @@ Found 1 error:

 Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled

-React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior Found suppression `eslint-disable react-hooks/rules-of-hooks`
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable react-hooks/rules-of-hooks`.

 error.invalid-unclosed-eslint-suppression.ts:2:0
  1 | // Note: Everything below this is sketchy
@@ -23,7 +23,7 @@ Found 2 errors:

 Error: Calling setState during render may trigger an infinite loop

-Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState)
+Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState).

 error.invalid-unconditional-set-state-in-render.ts:6:2
  4 |   const aliased = setX;
@@ -36,7 +36,7 @@ error.invalid-unconditional-set-state-in-render.ts:6:2

 Error: Calling setState during render may trigger an infinite loop

-Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState)
+Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState).

 error.invalid-unconditional-set-state-in-render.ts:7:2
   5 |
@@ -26,7 +26,7 @@ Found 2 errors:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.invalid-use-ref-added-to-dep-without-type-info.ts:10:21
   8 |   // however, this is an instance of accessing a ref during render and is disallowed
@@ -39,7 +39,7 @@ error.invalid-use-ref-added-to-dep-without-type-info.ts:10:21

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.invalid-use-ref-added-to-dep-without-type-info.ts:12:28
  10 |   const x = {a, val: val.ref.current};
@@ -21,7 +21,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.invalid-write-but-dont-read-ref-in-render.ts:5:2
  3 |   const ref = useRef(null);
@@ -19,7 +19,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.invalid-write-ref-prop-in-render.ts:4:2
  2 | function Component(props) {
@@ -28,7 +28,7 @@ Found 1 error:

 Error: Cannot reassign variables declared outside of the component/hook

-Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
+Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).

 error.reassign-global-fn-arg.ts:5:4
  3 | export default function MyApp() {
@@ -21,7 +21,7 @@ Found 2 errors:

 Error: Cannot reassign variables declared outside of the component/hook

-Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
+Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).

 error.reassignment-to-global-indirect.ts:4:4
  2 |   const foo = () => {
@@ -34,7 +34,7 @@ error.reassignment-to-global-indirect.ts:4:4

 Error: Cannot reassign variables declared outside of the component/hook

-Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
+Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).

 error.reassignment-to-global-indirect.ts:5:4
  3 |     // Cannot assign to globals
@@ -18,7 +18,7 @@ Found 2 errors:

 Error: Cannot reassign variables declared outside of the component/hook

-Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
+Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).

 error.reassignment-to-global.ts:3:2
  1 | function Component() {
@@ -31,7 +31,7 @@ error.reassignment-to-global.ts:3:2

 Error: Cannot reassign variables declared outside of the component/hook

-Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
+Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).

 error.reassignment-to-global.ts:4:2
  2 |   // Cannot assign to globals
@@ -29,7 +29,7 @@ Found 2 errors:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

   6 | component C() {
   7 |   const r = useRef(DEFAULT_VALUE);
@@ -41,7 +41,7 @@ React refs are values that are not needed for rendering. Refs should only be acc

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

   7 |   const r = useRef(DEFAULT_VALUE);
   8 |   if (r.current == DEFAULT_VALUE) {
@@ -27,7 +27,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

   5 |   const r = useRef(null);
   6 |   if (r.current == null) {
@@ -27,7 +27,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

   5 |   const r = useRef(null);
   6 |   if (r.current == null) {
@@ -28,7 +28,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

   6 |   if (r.current == null) {
   7 |     r.current = 42;
@@ -28,7 +28,7 @@ Found 2 errors:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

  4 | component C() {
  5 |   const r = useRef(null);
@@ -40,7 +40,7 @@ React refs are values that are not needed for rendering. Refs should only be acc

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

   5 |   const r = useRef(null);
   6 |   const guard = r.current == null;
@@ -28,7 +28,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

   6 |   const r2 = useRef(null);
   7 |   if (r.current == null) {
@@ -28,7 +28,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

   7 |     r.current = 1;
   8 |   }
@@ -28,7 +28,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

   7 |     r.current = 1;
   8 |   }
@@ -24,7 +24,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.ref-optional.ts:5:9
  3 | function Component(props) {
@@ -24,7 +24,7 @@ Found 1 error:

 Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled

-React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior Found suppression `eslint-disable-next-line react-hooks/exhaustive-deps`
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable-next-line react-hooks/exhaustive-deps`.

 error.sketchy-code-exhaustive-deps.ts:6:7
  4 |     () => {
@@ -25,7 +25,7 @@ Found 1 error:

 Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled

-React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior Found suppression `eslint-disable react-hooks/rules-of-hooks`
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable react-hooks/rules-of-hooks`.

 error.sketchy-code-rules-of-hooks.ts:1:0
 > 1 | /* eslint-disable react-hooks/rules-of-hooks */
@@ -35,7 +35,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.ts:14:2
  12 |
@@ -26,7 +26,7 @@ Found 1 error:

 Error: Calling setState during render may trigger an infinite loop

-Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState)
+Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState).

 error.unconditional-set-state-in-render-after-loop-break.ts:11:2
   9 |     }
@@ -21,7 +21,7 @@ Found 1 error:

 Error: Calling setState during render may trigger an infinite loop

-Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState)
+Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState).

 error.unconditional-set-state-in-render-after-loop.ts:6:2
  4 |   for (const _ of props) {
@@ -26,7 +26,7 @@ Found 1 error:

 Error: Calling setState during render may trigger an infinite loop

-Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState)
+Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState).

 error.unconditional-set-state-in-render-with-loop-throw.ts:11:2
   9 |     }
@@ -24,7 +24,7 @@ Found 1 error:

 Error: Calling setState during render may trigger an infinite loop

-Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState)
+Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState).

 error.unconditional-set-state-lambda.ts:8:2
   6 |     setX(1);
@@ -32,7 +32,7 @@ Found 1 error:

 Error: Calling setState during render may trigger an infinite loop

-Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState)
+Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState).

 error.unconditional-set-state-nested-function-expressions.ts:16:2
  14 |     bar();
@@ -23,7 +23,7 @@ Found 1 error:

 Error: Cannot reassign variables declared outside of the component/hook

-Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
+Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).

 error.update-global-should-bailout.ts:3:2
  1 | let renderCount = 0;
@@ -38,7 +38,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.ts:17:2
  15 |     ref.current.inner = null;
@@ -34,7 +34,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.useCallback-set-ref-nested-property-dont-preserve-memoization.ts:13:2
  11 |   });
@@ -28,7 +28,7 @@ Found 2 errors:

 Error: useMemo() callbacks must return a value

-This useMemo callback doesn't return a value. useMemo is for computing and caching values, not for arbitrary side effects.
+This useMemo callback doesn't return a value. useMemo is for computing and caching values, not for arbitrary side effects..

 error.useMemo-no-return-value.ts:3:16
  1 | // @validateNoVoidUseMemo
@@ -45,7 +45,7 @@ error.useMemo-no-return-value.ts:3:16

 Error: useMemo() callbacks must return a value

-This React.useMemo callback doesn't return a value. useMemo is for computing and caching values, not for arbitrary side effects.
+This React.useMemo callback doesn't return a value. useMemo is for computing and caching values, not for arbitrary side effects..

 error.useMemo-no-return-value.ts:6:17
   4 |     console.log('computing');
@@ -24,7 +24,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.validate-mutate-ref-arg-in-render.ts:3:14
  1 | // @validateRefAccessDuringRender:true
@@ -54,7 +54,7 @@ Found 1 error:

 Todo: Support local variables named `fbt`

-Local variables named `fbt` may conflict with the fbt plugin and are not yet supported
+Local variables named `fbt` may conflict with the fbt plugin and are not yet supported.

 error.todo-fbt-as-local.ts:18:19
  16 |
@@ -23,7 +23,7 @@ Found 1 error:

 Todo: Support duplicate fbt tags

-Support `<fbt>` tags with multiple `<fbt:enum>` values
+Support `<fbt>` tags with multiple `<fbt:enum>` values.

 error.todo-fbt-unknown-enum-value.ts:6:7
  4 |   return (
@@ -18,7 +18,7 @@ Found 1 error:

 Todo: Support local variables named `fbt`

-Local variables named `fbt` may conflict with the fbt plugin and are not yet supported
+Local variables named `fbt` may conflict with the fbt plugin and are not yet supported.

 error.todo-locally-require-fbt.ts:2:8
  1 | function Component(props) {
@@ -57,7 +57,7 @@ Found 1 error:

 Todo: Support duplicate fbt tags

-Support `<fbt>` tags with multiple `<fbt:plural>` values
+Support `<fbt>` tags with multiple `<fbt:plural>` values.

 error.todo-multiple-fbt-plural.ts:29:7
  27 |   return (
@@ -38,7 +38,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs

 ```
-{"kind":"CompileError","fnLoc":{"start":{"line":3,"column":0,"index":86},"end":{"line":7,"column":1,"index":190},"filename":"dynamic-gating-invalid-multiple.ts"},"detail":{"options":{"reason":"Expected a single dynamic gating directive","description":"Expected a single directive but found [use memo if(getTrue), use memo if(getFalse)]","severity":"InvalidReact","loc":{"start":{"line":4,"column":2,"index":105},"end":{"line":4,"column":25,"index":128},"filename":"dynamic-gating-invalid-multiple.ts"}}}}
+{"kind":"CompileError","fnLoc":{"start":{"line":3,"column":0,"index":86},"end":{"line":7,"column":1,"index":190},"filename":"dynamic-gating-invalid-multiple.ts"},"detail":{"options":{"reason":"Expected a single dynamic gating directive","description":"Expected a single directive but found [use memo if(getTrue), use memo if(getFalse)].","severity":"InvalidReact","loc":{"start":{"line":4,"column":2,"index":105},"end":{"line":4,"column":25,"index":128},"filename":"dynamic-gating-invalid-multiple.ts"}}}}
 ```
      
 ### Eval output
@@ -36,7 +36,7 @@ Found 1 error:

 Error: Cannot infer dependencies of this effect. This will break your build!

-To resolve, either pass a dependency array or fix reported compiler bailout diagnostics. Todo: (BuildHIR::lowerStatement) Handle TryStatement without a catch clause (13:6)
+To resolve, either pass a dependency array or fix reported compiler bailout diagnostics. Todo: (BuildHIR::lowerStatement) Handle TryStatement without a catch clause (13:6).

 error.todo-syntax.ts:11:2
   9 | function Component({prop1}) {
@@ -47,7 +47,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs

 ```
-{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":158},"end":{"line":11,"column":1,"index":331},"filename":"mutate-after-useeffect-ref-access.ts"},"detail":{"options":{"severity":"InvalidReact","category":"Cannot access refs during render","description":"React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)","details":[{"kind":"error","loc":{"start":{"line":9,"column":2,"index":289},"end":{"line":9,"column":16,"index":303},"filename":"mutate-after-useeffect-ref-access.ts"},"message":"Cannot update ref during render"}]}}}
+{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":158},"end":{"line":11,"column":1,"index":331},"filename":"mutate-after-useeffect-ref-access.ts"},"detail":{"options":{"severity":"InvalidReact","category":"Cannot access refs during render","description":"React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).","details":[{"kind":"error","loc":{"start":{"line":9,"column":2,"index":289},"end":{"line":9,"column":16,"index":303},"filename":"mutate-after-useeffect-ref-access.ts"},"message":"Cannot update ref during render"}]}}}
 {"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":8,"column":2,"index":237},"end":{"line":8,"column":50,"index":285},"filename":"mutate-after-useeffect-ref-access.ts"},"decorations":[{"start":{"line":8,"column":24,"index":259},"end":{"line":8,"column":30,"index":265},"filename":"mutate-after-useeffect-ref-access.ts","identifierName":"arrRef"}]}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":6,"column":0,"index":158},"end":{"line":11,"column":1,"index":331},"filename":"mutate-after-useeffect-ref-access.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
@@ -65,7 +65,7 @@ function Component(props) {
 ## Logs

 ```
-{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Avoid constructing JSX within try/catch","description":"React does not immediately render components when JSX is rendered, so any errors from this component will not be caught by the try/catch. To catch errors in rendering a given component, wrap that component in an error boundary. (https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)","details":[{"kind":"error","loc":{"start":{"line":11,"column":11,"index":222},"end":{"line":11,"column":32,"index":243},"filename":"invalid-jsx-in-catch-in-outer-try-with-catch.ts"},"message":"Avoid constructing JSX within try/catch"}]}},"fnLoc":null}
+{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Avoid constructing JSX within try/catch","description":"React does not immediately render components when JSX is rendered, so any errors from this component will not be caught by the try/catch. To catch errors in rendering a given component, wrap that component in an error boundary. (https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary).","details":[{"kind":"error","loc":{"start":{"line":11,"column":11,"index":222},"end":{"line":11,"column":32,"index":243},"filename":"invalid-jsx-in-catch-in-outer-try-with-catch.ts"},"message":"Avoid constructing JSX within try/catch"}]}},"fnLoc":null}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":91},"end":{"line":17,"column":1,"index":298},"filename":"invalid-jsx-in-catch-in-outer-try-with-catch.ts"},"fnName":"Component","memoSlots":4,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
      
@@ -42,7 +42,7 @@ function Component(props) {
 ## Logs

 ```
-{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Avoid constructing JSX within try/catch","description":"React does not immediately render components when JSX is rendered, so any errors from this component will not be caught by the try/catch. To catch errors in rendering a given component, wrap that component in an error boundary. (https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)","details":[{"kind":"error","loc":{"start":{"line":5,"column":9,"index":104},"end":{"line":5,"column":16,"index":111},"filename":"invalid-jsx-in-try-with-catch.ts"},"message":"Avoid constructing JSX within try/catch"}]}},"fnLoc":null}
+{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Avoid constructing JSX within try/catch","description":"React does not immediately render components when JSX is rendered, so any errors from this component will not be caught by the try/catch. To catch errors in rendering a given component, wrap that component in an error boundary. (https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary).","details":[{"kind":"error","loc":{"start":{"line":5,"column":9,"index":104},"end":{"line":5,"column":16,"index":111},"filename":"invalid-jsx-in-try-with-catch.ts"},"message":"Avoid constructing JSX within try/catch"}]}},"fnLoc":null}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":49},"end":{"line":10,"column":1,"index":160},"filename":"invalid-jsx-in-try-with-catch.ts"},"fnName":"Component","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
      
@@ -65,7 +65,7 @@ function _temp(s) {
 ## Logs

 ```
-{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Calling setState synchronously within an effect can trigger cascading renders","description":"Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:\n* Update external systems with the latest state from React.\n* Subscribe for updates from some external system, calling setState in a callback function when external state changes.\n\nCalling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect)","details":[{"kind":"error","loc":{"start":{"line":13,"column":4,"index":265},"end":{"line":13,"column":5,"index":266},"filename":"invalid-setState-in-useEffect-transitive.ts","identifierName":"g"},"message":"Avoid calling setState() directly within an effect"}]}},"fnLoc":null}
+{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Calling setState synchronously within an effect can trigger cascading renders","description":"Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:\n* Update external systems with the latest state from React.\n* Subscribe for updates from some external system, calling setState in a callback function when external state changes.\n\nCalling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect).","details":[{"kind":"error","loc":{"start":{"line":13,"column":4,"index":265},"end":{"line":13,"column":5,"index":266},"filename":"invalid-setState-in-useEffect-transitive.ts","identifierName":"g"},"message":"Avoid calling setState() directly within an effect"}]}},"fnLoc":null}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":92},"end":{"line":16,"column":1,"index":293},"filename":"invalid-setState-in-useEffect-transitive.ts"},"fnName":"Component","memoSlots":2,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
      
@@ -45,7 +45,7 @@ function _temp(s) {
 ## Logs

 ```
-{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Calling setState synchronously within an effect can trigger cascading renders","description":"Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:\n* Update external systems with the latest state from React.\n* Subscribe for updates from some external system, calling setState in a callback function when external state changes.\n\nCalling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect)","details":[{"kind":"error","loc":{"start":{"line":7,"column":4,"index":180},"end":{"line":7,"column":12,"index":188},"filename":"invalid-setState-in-useEffect.ts","identifierName":"setState"},"message":"Avoid calling setState() directly within an effect"}]}},"fnLoc":null}
+{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Calling setState synchronously within an effect can trigger cascading renders","description":"Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:\n* Update external systems with the latest state from React.\n* Subscribe for updates from some external system, calling setState in a callback function when external state changes.\n\nCalling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect).","details":[{"kind":"error","loc":{"start":{"line":7,"column":4,"index":180},"end":{"line":7,"column":12,"index":188},"filename":"invalid-setState-in-useEffect.ts","identifierName":"setState"},"message":"Avoid calling setState() directly within an effect"}]}},"fnLoc":null}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":92},"end":{"line":10,"column":1,"index":225},"filename":"invalid-setState-in-useEffect.ts"},"fnName":"Component","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
      
@@ -35,7 +35,7 @@ Found 1 error:

 Error: Cannot access variable before it is declared

-Reading a variable before it is initialized will prevent the earlier access from updating when this value changes over time. Instead, move the variable access to after it has been initialized
+Reading a variable before it is initialized will prevent the earlier access from updating when this value changes over time. Instead, move the variable access to after it has been initialized.

   9 |   // TDZ violation!
  10 |   const onRefetch = useCallback(() => {
@@ -22,7 +22,7 @@ Found 2 errors:

 Error: Cannot reassign variables declared outside of the component/hook

-Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
+Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).

 error.reassignment-to-global-indirect.ts:5:4
  3 |   const foo = () => {
@@ -35,7 +35,7 @@ error.reassignment-to-global-indirect.ts:5:4

 Error: Cannot reassign variables declared outside of the component/hook

-Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
+Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).

 error.reassignment-to-global-indirect.ts:6:4
  4 |     // Cannot assign to globals
@@ -19,7 +19,7 @@ Found 2 errors:

 Error: Cannot reassign variables declared outside of the component/hook

-Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
+Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).

 error.reassignment-to-global.ts:4:2
  2 | function Component() {
@@ -32,7 +32,7 @@ error.reassignment-to-global.ts:4:2

 Error: Cannot reassign variables declared outside of the component/hook

-Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
+Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).

 error.reassignment-to-global.ts:5:2
  3 |   // Cannot assign to globals
@@ -47,7 +47,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs

 ```
-{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":190},"end":{"line":11,"column":1,"index":363},"filename":"mutate-after-useeffect-ref-access.ts"},"detail":{"options":{"severity":"InvalidReact","category":"Cannot access refs during render","description":"React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)","details":[{"kind":"error","loc":{"start":{"line":9,"column":2,"index":321},"end":{"line":9,"column":16,"index":335},"filename":"mutate-after-useeffect-ref-access.ts"},"message":"Cannot update ref during render"}]}}}
+{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":190},"end":{"line":11,"column":1,"index":363},"filename":"mutate-after-useeffect-ref-access.ts"},"detail":{"options":{"severity":"InvalidReact","category":"Cannot access refs during render","description":"React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).","details":[{"kind":"error","loc":{"start":{"line":9,"column":2,"index":321},"end":{"line":9,"column":16,"index":335},"filename":"mutate-after-useeffect-ref-access.ts"},"message":"Cannot update ref during render"}]}}}
 {"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":8,"column":2,"index":269},"end":{"line":8,"column":50,"index":317},"filename":"mutate-after-useeffect-ref-access.ts"},"decorations":[{"start":{"line":8,"column":24,"index":291},"end":{"line":8,"column":30,"index":297},"filename":"mutate-after-useeffect-ref-access.ts","identifierName":"arrRef"}]}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":6,"column":0,"index":190},"end":{"line":11,"column":1,"index":363},"filename":"mutate-after-useeffect-ref-access.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
@@ -27,7 +27,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

 error.maybe-mutable-ref-not-preserved.ts:8:33
   6 | function useFoo() {
@@ -23,7 +23,7 @@ Found 1 error:

 Error: Cannot access refs during render

-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

   5 |   const localRef = useFooRef();
   6 |   const mergedRef = useMemo(() => {
@@ -50,7 +50,7 @@ function Example(props) {
 ## Logs

 ```
-{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render. ","details":[{"kind":"error","loc":{"start":{"line":9,"column":10,"index":202},"end":{"line":9,"column":19,"index":211},"filename":"invalid-conditionally-assigned-dynamically-constructed-component-in-render.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":5,"column":16,"index":124},"end":{"line":5,"column":33,"index":141},"filename":"invalid-conditionally-assigned-dynamically-constructed-component-in-render.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
+{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render. .","details":[{"kind":"error","loc":{"start":{"line":9,"column":10,"index":202},"end":{"line":9,"column":19,"index":211},"filename":"invalid-conditionally-assigned-dynamically-constructed-component-in-render.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":5,"column":16,"index":124},"end":{"line":5,"column":33,"index":141},"filename":"invalid-conditionally-assigned-dynamically-constructed-component-in-render.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":45},"end":{"line":10,"column":1,"index":217},"filename":"invalid-conditionally-assigned-dynamically-constructed-component-in-render.ts"},"fnName":"Example","memoSlots":3,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
      
@@ -32,7 +32,7 @@ function Example(props) {
 ## Logs

 ```
-{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render. ","details":[{"kind":"error","loc":{"start":{"line":4,"column":10,"index":120},"end":{"line":4,"column":19,"index":129},"filename":"invalid-dynamically-construct-component-in-render.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":20,"index":91},"end":{"line":3,"column":37,"index":108},"filename":"invalid-dynamically-construct-component-in-render.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
+{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render. .","details":[{"kind":"error","loc":{"start":{"line":4,"column":10,"index":120},"end":{"line":4,"column":19,"index":129},"filename":"invalid-dynamically-construct-component-in-render.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":20,"index":91},"end":{"line":3,"column":37,"index":108},"filename":"invalid-dynamically-construct-component-in-render.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":45},"end":{"line":5,"column":1,"index":135},"filename":"invalid-dynamically-construct-component-in-render.ts"},"fnName":"Example","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
      
@@ -37,7 +37,7 @@ function Example(props) {
 ## Logs

 ```
-{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render. ","details":[{"kind":"error","loc":{"start":{"line":6,"column":10,"index":130},"end":{"line":6,"column":19,"index":139},"filename":"invalid-dynamically-constructed-component-function.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":2,"index":73},"end":{"line":5,"column":3,"index":119},"filename":"invalid-dynamically-constructed-component-function.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
+{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render. .","details":[{"kind":"error","loc":{"start":{"line":6,"column":10,"index":130},"end":{"line":6,"column":19,"index":139},"filename":"invalid-dynamically-constructed-component-function.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":2,"index":73},"end":{"line":5,"column":3,"index":119},"filename":"invalid-dynamically-constructed-component-function.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":45},"end":{"line":7,"column":1,"index":145},"filename":"invalid-dynamically-constructed-component-function.ts"},"fnName":"Example","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
      
@@ -41,7 +41,7 @@ function Example(props) {
 ## Logs

 ```
-{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render. ","details":[{"kind":"error","loc":{"start":{"line":4,"column":10,"index":118},"end":{"line":4,"column":19,"index":127},"filename":"invalid-dynamically-constructed-component-method-call.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":20,"index":91},"end":{"line":3,"column":35,"index":106},"filename":"invalid-dynamically-constructed-component-method-call.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
+{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render. .","details":[{"kind":"error","loc":{"start":{"line":4,"column":10,"index":118},"end":{"line":4,"column":19,"index":127},"filename":"invalid-dynamically-constructed-component-method-call.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":20,"index":91},"end":{"line":3,"column":35,"index":106},"filename":"invalid-dynamically-constructed-component-method-call.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":45},"end":{"line":5,"column":1,"index":133},"filename":"invalid-dynamically-constructed-component-method-call.ts"},"fnName":"Example","memoSlots":4,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
      
@@ -32,7 +32,7 @@ function Example(props) {
 ## Logs

 ```
-{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render. ","details":[{"kind":"error","loc":{"start":{"line":4,"column":10,"index":125},"end":{"line":4,"column":19,"index":134},"filename":"invalid-dynamically-constructed-component-new.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":20,"index":91},"end":{"line":3,"column":42,"index":113},"filename":"invalid-dynamically-constructed-component-new.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
+{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render. .","details":[{"kind":"error","loc":{"start":{"line":4,"column":10,"index":125},"end":{"line":4,"column":19,"index":134},"filename":"invalid-dynamically-constructed-component-new.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":20,"index":91},"end":{"line":3,"column":42,"index":113},"filename":"invalid-dynamically-constructed-component-new.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":45},"end":{"line":5,"column":1,"index":140},"filename":"invalid-dynamically-constructed-component-new.ts"},"fnName":"Example","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
      
@@ -33,7 +33,7 @@ Found 1 error:

 Error: Cannot compile `fire`

- Todo: (BuildHIR::lowerStatement) Handle TryStatement without a catch clause (11:4)
+ Todo: (BuildHIR::lowerStatement) Handle TryStatement without a catch clause (11:4).

 error.todo-syntax.ts:18:4
  16 |   };
@@ -17,7 +17,7 @@ Found 1 error:

 Error: Cannot compile `fire`

- null
+ null.

 error.untransformed-fire-reference.ts:4:12
  2 | import {fire} from 'react';
@@ -34,7 +34,7 @@ Found 1 error:

 Error: Cannot compile `fire`

- null
+ null.

 error.use-no-memo.ts:15:4
  13 |   };