[compiler] Fix error description inconsistency (#34404)

compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts

+4 -5

@@ -141,11 +141,10 @@ export class CompilerDiagnostic {

141 }

142

143 printErrorMessage(source: string, options: PrintErrorMessageOptions): string {

144 - const buffer = [

145 - printErrorSummary(this.category, this.reason),

146 - '\n\n',

147 - this.description,

148 - ];

144 + const buffer = [printErrorSummary(this.category, this.reason)];

145 + if (this.description != null) {

146 + buffer.push('\n\n', `${this.description}.`);

147 + }

148 for (const detail of this.options.details) {

149 switch (detail.kind) {

150 case 'error': {

compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Imports.ts

+1 -1

@@ -256,7 +256,7 @@ export function addImportsToProgram(

256 {

257 reason:

258 'Encountered conflicting import specifiers in generated program',

259 - description: `Conflict from import ${loweredImport.module}:(${loweredImport.imported} as ${loweredImport.name}).`,

259 + description: `Conflict from import ${loweredImport.module}:(${loweredImport.imported} as ${loweredImport.name})`,

260 details: [

261 {

262 kind: 'error',

compiler/packages/babel-plugin-react-compiler/src/Entrypoint/ValidateNoUntransformedReferences.ts

+2 -4

@@ -96,7 +96,7 @@ function assertValidEffectImportReference(

96 reason:

97 'Cannot infer dependencies of this effect. This will break your build!',

98 description:

99 - 'To resolve, either pass a dependency array or fix reported compiler bailout diagnostics.' +

99 + 'To resolve, either pass a dependency array or fix reported compiler bailout diagnostics' +

100 (maybeErrorDiagnostic ? ` ${maybeErrorDiagnostic}` : ''),

101 details: [

102 {

@@ -128,9 +128,7 @@ function assertValidFireImportReference(

128 reason: '[Fire] Untransformed reference to compiler-required feature.',

129 description:

130 'Either remove this `fire` call or ensure it is successfully transformed by the compiler' +

131 - maybeErrorDiagnostic

132 - ? ` ${maybeErrorDiagnostic}`

133 - : '',

131 + (maybeErrorDiagnostic != null ? ` ${maybeErrorDiagnostic}` : ''),

132 details: [

133 {

134 kind: 'error',

compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts

+3 -3

@@ -109,7 +109,7 @@ export function lower(

109 CompilerDiagnostic.create({

110 category: ErrorCategory.Invariant,

111 reason: 'Could not find binding',

112 - description: `[BuildHIR] Could not find binding for param \`${param.node.name}\`.`,

112 + description: `[BuildHIR] Could not find binding for param \`${param.node.name}\``,

113 }).withDetails({

114 kind: 'error',

115 loc: param.node.loc ?? null,

@@ -173,7 +173,7 @@ export function lower(

173 CompilerDiagnostic.create({

174 category: ErrorCategory.Todo,

175 reason: `Handle ${param.node.type} parameters`,

176 - description: `[BuildHIR] Add support for ${param.node.type} parameters.`,

176 + description: `[BuildHIR] Add support for ${param.node.type} parameters`,

177 }).withDetails({

178 kind: 'error',

179 loc: param.node.loc ?? null,

@@ -204,7 +204,7 @@ export function lower(

204 CompilerDiagnostic.create({

205 category: ErrorCategory.Syntax,

206 reason: `Unexpected function body kind`,

207 - description: `Expected function body to be an expression or a block statement, got \`${body.type}\`.`,

207 + description: `Expected function body to be an expression or a block statement, got \`${body.type}\``,

208 }).withDetails({

209 kind: 'error',

210 loc: body.node.loc ?? null,

compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts

+1 -1

@@ -460,7 +460,7 @@ export function dropManualMemoization(

460 manualMemo.loadInstr.value.kind === 'PropertyLoad'

461 ? 'React.useMemo'

462 : 'useMemo'

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

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

464 suggestions: null,

465 }).withDetails({

466 kind: 'error',

compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts

+4 -4

@@ -473,7 +473,7 @@ function applySignature(

473 const diagnostic = CompilerDiagnostic.create({

474 category: ErrorCategory.Immutability,

475 reason: 'This value cannot be modified',

476 - description: `${reason}.`,

476 + description: reason,

477 }).withDetails({

478 kind: 'error',

479 loc: effect.value.loc,

@@ -1094,7 +1094,7 @@ function applyEffect(

1094 const diagnostic = CompilerDiagnostic.create({

1095 category: ErrorCategory.Immutability,

1096 reason: 'Cannot access variable before it is declared',

1097 - description: `${variable ?? 'This variable'} is accessed before it is declared, which prevents the earlier access from updating when this value changes over time.`,

1097 + description: `${variable ?? 'This variable'} is accessed before it is declared, which prevents the earlier access from updating when this value changes over time`,

1098 });

1099 if (hoistedAccess != null && hoistedAccess.loc != effect.value.loc) {

1100 diagnostic.withDetails({

@@ -1133,7 +1133,7 @@ function applyEffect(

1133 const diagnostic = CompilerDiagnostic.create({

1134 category: ErrorCategory.Immutability,

1135 reason: 'This value cannot be modified',

1136 - description: `${reason}.`,

1136 + description: reason,

1137 }).withDetails({

1138 kind: 'error',

1139 loc: effect.value.loc,

@@ -2269,7 +2269,7 @@ function computeEffectsForLegacySignature(

2269 'This API returns functions which cannot be memoized without leading to stale UI. ' +

2270 'To prevent this, by default React Compiler will skip memoizing this component/hook. ' +

2271 'However, you may see issues if values from this API are passed to other components/hooks that are ' +

2272 - 'memoized.',

2272 + 'memoized',

2273 ].join(''),

2274 }).withDetails({

2275 kind: 'error',

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/AssertScopeInstructionsWithinScope.ts

+1 -1

@@ -83,7 +83,7 @@ class CheckInstructionsAgainstScopesVisitor extends ReactiveFunctionVisitor<

83 CompilerError.invariant(false, {

84 reason:

85 'Encountered an instruction that should be part of a scope, but where that scope has already completed',

86 - description: `Instruction [${id}] is part of scope @${scope.id}, but that scope has already completed.`,

86 + description: `Instruction [${id}] is part of scope @${scope.id}, but that scope has already completed`,

87 details: [

88 {

89 kind: 'error',

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

+1 -1

@@ -39,7 +39,7 @@ export function validateLocalsNotReassignedAfterRender(fn: HIRFunction): void {

39 CompilerDiagnostic.create({

40 category: ErrorCategory.Immutability,

41 reason: 'Cannot reassign variable after render completes',

42 - description: `Reassigning ${variable} after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.`,

42 + description: `Reassigning ${variable} after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead`,

43 }).withDetails({

44 kind: 'error',

45 loc: reassignment.loc,

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

+2 -2

@@ -59,7 +59,7 @@ export function validateNoCapitalizedCalls(

59 CompilerError.throwInvalidReact({

60 category: ErrorCategory.CapitalizedCalls,

61 reason,

62 - description: `${calleeName} may be a component.`,

62 + description: `${calleeName} may be a component`,

63 loc: value.loc,

64 suggestions: null,

65 });

@@ -83,7 +83,7 @@ export function validateNoCapitalizedCalls(

83 errors.push({

84 category: ErrorCategory.CapitalizedCalls,

85 reason,

86 - description: `${propertyName} may be a component.`,

86 + description: `${propertyName} may be a component`,

87 loc: value.loc,

88 suggestions: null,

89 });

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

+1 -1

@@ -67,7 +67,7 @@ export function validateNoFreezingKnownMutableFunctions(

67 CompilerDiagnostic.create({

68 category: ErrorCategory.Immutability,

69 reason: 'Cannot modify local variables after render completes',

70 - description: `This argument is a function which may reassign or mutate ${variable} after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.`,

70 + description: `This argument is a function which may reassign or mutate ${variable} after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead`,

71 })

72 .withDetails({

73 kind: 'error',

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

+3 -3

@@ -304,7 +304,7 @@ function validateInferredDep(

304 errorDiagnostic

305 ? getCompareDependencyResultDescription(errorDiagnostic)

306 : 'Inferred dependency not present in source'

307 - }.`

307 + }`

308 : '',

309 ]

310 .join('')

@@ -551,7 +551,7 @@ class Visitor extends ReactiveFunctionVisitor<VisitorState> {

551 reason: 'Existing memoization could not be preserved',

552 description: [

553 'React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. ',

554 - 'This dependency may be mutated later, which could cause the value to change unexpectedly.',

554 + 'This dependency may be mutated later, which could cause the value to change unexpectedly',

555 ].join(''),

556 }).withDetails({

557 kind: 'error',

@@ -603,7 +603,7 @@ class Visitor extends ReactiveFunctionVisitor<VisitorState> {

603 category: ErrorCategory.PreserveManualMemo,

604 reason: 'Existing memoization could not be preserved',

605 description: [

606 - '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. ',

606 + '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',

607 DEBUG

608 ? `${printIdentifier(identifier)} was not memoized.`

609 : '',

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

+1 -1

@@ -67,7 +67,7 @@ export function validateStaticComponents(

67 CompilerDiagnostic.create({

68 category: ErrorCategory.StaticComponents,

69 reason: 'Cannot create components during render',

70 - description: `Components created during render will reset their state each time they are created. Declare components outside of render. `,

70 + description: `Components created during render will reset their state each time they are created. Declare components outside of render`,

71 })

72 .withDetails({

73 kind: 'error',

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

+2 -2

@@ -77,7 +77,7 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> {

77 category: ErrorCategory.UseMemo,

78 reason: 'useMemo() callbacks may not accept parameters',

79 description:

80 - '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.',

80 + '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',

81 suggestions: null,

82 }).withDetails({

83 kind: 'error',

@@ -94,7 +94,7 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> {

94 reason:

95 'useMemo() callbacks may not be async or generator functions',

96 description:

97 - 'useMemo() callbacks are called once and must synchronously return a value.',

97 + 'useMemo() callbacks are called once and must synchronously return a value',

98 suggestions: null,

99 }).withDetails({

100 kind: 'error',

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ecma/error.reserved-words.expect.md

+1 -1

@@ -26,7 +26,7 @@ Found 1 error:

26

27 Compilation Skipped: `this` is not supported syntax

28

29 -React Compiler does not support compiling functions that use `this`

29 +React Compiler does not support compiling functions that use `this`.

30

31 error.reserved-words.ts:8:28

32 6 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-component-tag-function.expect.md

+1 -1

@@ -19,7 +19,7 @@ Found 1 error:

19

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

21

22 -Variable `someGlobal` is 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)

22 +Variable `someGlobal` is 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).

23

24 error.assign-global-in-component-tag-function.ts:3:4

25 1 | function Component() {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-children.expect.md

+1 -1

@@ -22,7 +22,7 @@ Found 1 error:

22

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

24

25 -Variable `someGlobal` is 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)

25 +Variable `someGlobal` is 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).

26

27 error.assign-global-in-jsx-children.ts:3:4

28 1 | function Component() {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-flow-suppression.expect.md

+1 -1

@@ -20,7 +20,7 @@ Found 1 error:

20

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

22

23 -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]`

23 +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]`.

24

25 error.bailout-on-flow-suppression.ts:4:2

26 2 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-suppression-of-custom-rule.expect.md

+2 -2

@@ -23,7 +23,7 @@ Found 2 errors:

23

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

25

26 -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`

26 +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`.

27

28 error.bailout-on-suppression-of-custom-rule.ts:3:0

29 1 | // @eslintSuppressionRules:["my-app","react-rule"]

@@ -36,7 +36,7 @@ error.bailout-on-suppression-of-custom-rule.ts:3:0

36

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

38

39 -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`

39 +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`.

40

41 error.bailout-on-suppression-of-custom-rule.ts:7:2

42 5 | 'use forget';

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-infer-mutation-aliasing-effects.expect.md

+1 -1

@@ -31,7 +31,7 @@ Found 1 error:

31

32 Invariant: [InferMutationAliasingEffects] Expected value kind to be initialized

33

34 -<unknown> thunk$14

34 +<unknown> thunk$14.

35

36 error.bug-infer-mutation-aliasing-effects.ts:10:22

37 8 | function thunk(action) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-codegen-methodcall.expect.md

-2

@@ -18,8 +18,6 @@ Found 1 error:

18

19 Invariant: [Codegen] Internal error: MethodCall::property must be an unpromoted + unmemoized MemberExpression

20

21 -

22 -

21 error.bug-invariant-codegen-methodcall.ts:3:17

22 1 | const YearsAndMonthsSince = () => {

23 2 | const diff = foo();

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-expected-consistent-destructuring.expect.md

+1 -1

@@ -29,7 +29,7 @@ Found 1 error:

29

30 Invariant: Expected consistent kind for destructuring

31

32 -Other places were `Reassign` but 'mutate? #t8$46[7:9]{reactive}' is const

32 +Other places were `Reassign` but 'mutate? #t8$46[7:9]{reactive}' is const.

33

34 error.bug-invariant-expected-consistent-destructuring.ts:9:9

35 7 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-local-or-context-references.expect.md

+1 -1

@@ -31,7 +31,7 @@ Found 1 error:

31

32 Invariant: Expected all references to a variable to be consistently local or context references

33

34 -Identifier <unknown> err$7 is referenced as a context variable, but was previously referenced as a local variable

34 +Identifier <unknown> err$7 is referenced as a context variable, but was previously referenced as a local variable.

35

36 error.bug-invariant-local-or-context-references.ts:15:13

37 13 | setState(_prevState => ({

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-unexpected-terminal-in-optional.expect.md

-2

@@ -21,8 +21,6 @@ Found 1 error:

21

22 Invariant: Unexpected terminal in optional

23

24 -

25 -

24 error.bug-invariant-unexpected-terminal-in-optional.ts:3:16

25 1 | const Foo = ({json}) => {

26 2 | try {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-unnamed-temporary.expect.md

+1 -1

@@ -24,7 +24,7 @@ Found 1 error:

24

25 Invariant: Expected temporaries to be promoted to named identifiers in an earlier pass

26

27 -identifier 15 is unnamed

27 +identifier 15 is unnamed.

28 ```

29

30

\ No newline at end of file

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.call-args-destructuring-asignment-complex.expect.md

-2

@@ -18,8 +18,6 @@ Found 1 error:

18

19 Invariant: Const declaration cannot be referenced as an expression

20

21 -

22 -

21 error.call-args-destructuring-asignment-complex.ts:3:9

22 1 | function Component(props) {

23 2 | let x = makeObject();

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-function-call-aliased.expect.md

+1 -1

@@ -18,7 +18,7 @@ Found 1 error:

18

19 Error: Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler config

20

21 -Bar may be a component..

21 +Bar may be a component.

22

23 error.capitalized-function-call-aliased.ts:4:2

24 2 | function Foo() {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capitalized-function-call.expect.md

+1 -1

@@ -19,7 +19,7 @@ Found 1 error:

19

20 Error: Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler config

21

22 -SomeFunc may be a component..

22 +SomeFunc may be a component.

23

24 error.capitalized-function-call.ts:3:12

25 1 | // @validateNoCapitalizedCalls

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

+1 -1

@@ -19,7 +19,7 @@ Found 1 error:

19

20 Error: Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler config

21

22 -SomeFunc may be a component..

22 +SomeFunc may be a component.

23

24 error.capitalized-method-call.ts:3:12

25 1 | // @validateNoCapitalizedCalls

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-mutation.expect.md

+2 -2

@@ -36,7 +36,7 @@ Found 2 errors:

36

37 Error: Cannot access refs during render

38

39 -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)

39 +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).

40

41 error.capture-ref-for-mutation.ts:12:13

42 10 | };

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

49

50 Error: Cannot access refs during render

51

52 -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)

52 +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).

53

54 error.capture-ref-for-mutation.ts:15:13

55 13 | };

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

+2 -2

@@ -24,7 +24,7 @@ Found 2 errors:

24

25 Error: Cannot access refs during render

26

27 -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)

27 +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).

28

29 error.hook-ref-value.ts:5:23

30 3 | function Component(props) {

@@ -37,7 +37,7 @@ error.hook-ref-value.ts:5:23

37

38 Error: Cannot access refs during render

39

40 -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)

40 +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).

41

42 error.hook-ref-value.ts:5:23

43 3 | function Component(props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-during-render.expect.md

+1 -1

@@ -19,7 +19,7 @@ Found 1 error:

19

20 Error: Cannot access refs during render

21

22 -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)

22 +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).

23

24 error.invalid-access-ref-during-render.ts:4:16

25 2 | function Component(props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-reducer-init.expect.md

+1 -1

@@ -30,7 +30,7 @@ Found 1 error:

30

31 Error: Cannot access refs during render

32

33 -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)

33 +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).

34

35 error.invalid-access-ref-in-reducer-init.ts:8:4

36 6 | (state, action) => state + action,

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-reducer.expect.md

+1 -1

@@ -26,7 +26,7 @@ Found 1 error:

26

27 Error: Cannot access refs during render

28

29 -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)

29 +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).

30

31 error.invalid-access-ref-in-reducer.ts:5:29

32 3 | function Component(props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-render-mutate-object-with-ref-function.expect.md

+1 -1

@@ -22,7 +22,7 @@ Found 1 error:

22

23 Error: Cannot access refs during render

24

25 -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)

25 +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).

26

27 error.invalid-access-ref-in-render-mutate-object-with-ref-function.ts:7:19

28 5 | const object = {};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-state-initializer.expect.md

+1 -1

@@ -26,7 +26,7 @@ Found 1 error:

26

27 Error: Cannot access refs during render

28

29 -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)

29 +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).

30

31 error.invalid-access-ref-in-state-initializer.ts:5:27

32 3 | function Component(props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-aliased-ref-in-callback-invoked-during-render-.expect.md

+1 -1

@@ -23,7 +23,7 @@ Found 1 error:

23

24 Error: Cannot access refs during render

25

26 -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)

26 +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).

27

28 error.invalid-aliased-ref-in-callback-invoked-during-render-.ts:9:33

29 7 | return <Foo item={item} current={current} />;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assign-current-inferred-ref-during-render.expect.md

+1 -1

@@ -22,7 +22,7 @@ Found 1 error:

22

23 Error: Cannot access refs during render

24

25 -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)

25 +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).

26

27 4 | component Example() {

28 5 | const fooRef = makeObject_Primitives();

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-conditional-setState-in-useMemo.expect.md

+2 -2

@@ -26,7 +26,7 @@ Found 2 errors:

26

27 Error: Calling setState from useMemo may trigger an infinite loop

28

29 -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)

29 +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).

30

31 error.invalid-conditional-setState-in-useMemo.ts:7:6

32 5 | useMemo(() => {

@@ -39,7 +39,7 @@ error.invalid-conditional-setState-in-useMemo.ts:7:6

39

40 Error: Calling setState from useMemo may trigger an infinite loop

41

42 -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)

42 +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).

43

44 error.invalid-conditional-setState-in-useMemo.ts:8:6

45 6 | if (cond) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-destructure-assignment-to-global.expect.md

+1 -1

@@ -17,7 +17,7 @@ Found 1 error:

17

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

19

20 -Variable `x` is 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)

20 +Variable `x` is 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).

21

22 error.invalid-destructure-assignment-to-global.ts:2:3

23 1 | function useFoo(props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-destructure-to-local-global-variables.expect.md

+1 -1

@@ -19,7 +19,7 @@ Found 1 error:

19

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

21

22 -Variable `b` is 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)

22 +Variable `b` is 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).

23

24 error.invalid-destructure-to-local-global-variables.ts:3:6

25 1 | function Component(props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-ref-in-render.expect.md

+1 -1

@@ -20,7 +20,7 @@ Found 1 error:

20

21 Error: Cannot access refs during render

22

23 -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)

23 +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).

24

25 error.invalid-disallow-mutating-ref-in-render.ts:4:2

26 2 | function Component() {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.expect.md

+1 -1

@@ -25,7 +25,7 @@ Found 1 error:

25

26 Error: Cannot access refs during render

27

28 -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)

28 +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).

29

30 error.invalid-disallow-mutating-refs-in-render-transitive.ts:9:2

31 7 | };

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-global-reassignment-indirect.expect.md

+1 -1

@@ -39,7 +39,7 @@ Found 1 error:

39

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

41

42 -Variable `someGlobal` is 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)

42 +Variable `someGlobal` is 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).

43

44 error.invalid-global-reassignment-indirect.ts:9:4

45 7 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render.expect.md

+3 -3

@@ -21,7 +21,7 @@ Found 3 errors:

21

22 Error: Cannot call impure function during render

23

24 -`Date.now` is an impure function. 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)

24 +`Date.now` is an impure function. 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).

25

26 error.invalid-impure-functions-in-render.ts:4:15

27 2 |

@@ -34,7 +34,7 @@ error.invalid-impure-functions-in-render.ts:4:15

34

35 Error: Cannot call impure function during render

36

37 -`performance.now` is an impure function. 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)

37 +`performance.now` is an impure function. 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).

38

39 error.invalid-impure-functions-in-render.ts:5:14

40 3 | function Component() {

@@ -47,7 +47,7 @@ error.invalid-impure-functions-in-render.ts:5:14

47

48 Error: Cannot call impure function during render

49

50 -`Math.random` is an impure function. 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)

50 +`Math.random` is an impure function. 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).

51

52 error.invalid-impure-functions-in-render.ts:6:15

53 4 | const date = Date.now();

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-ref-to-function.expect.md

+1 -1

@@ -19,7 +19,7 @@ Found 1 error:

19

20 Error: Cannot access refs during render

21

22 -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)

22 +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).

23

24 error.invalid-pass-ref-to-function.ts:4:16

25 2 | function Component(props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-destructure.expect.md

+1 -1

@@ -18,7 +18,7 @@ Found 1 error:

18

19 Error: Cannot access refs during render

20

21 -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)

21 +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).

22

23 error.invalid-read-ref-prop-in-render-destructure.ts:3:16

24 1 | // @validateRefAccessDuringRender @compilationMode:"infer"

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-property-load.expect.md

+1 -1

@@ -18,7 +18,7 @@ Found 1 error:

18

19 Error: Cannot access refs during render

20

21 -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)

21 +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).

22

23 error.invalid-read-ref-prop-in-render-property-load.ts:3:16

24 1 | // @validateRefAccessDuringRender @compilationMode:"infer"

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-async-callback.expect.md

+1 -1

@@ -29,7 +29,7 @@ Found 1 error:

29

30 Error: Cannot reassign variable in async function

31

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

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

33

34 error.invalid-reassign-local-variable-in-async-callback.ts:8:6

35 6 | // after render, so this should error regardless of where this ends up

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-in-callback-invoked-during-render.expect.md

+1 -1

@@ -22,7 +22,7 @@ Found 1 error:

22

23 Error: Cannot access refs during render

24

25 -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)

25 +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).

26

27 error.invalid-ref-in-callback-invoked-during-render.ts:8:33

28 6 | return <Foo item={item} current={current} />;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-value-as-props.expect.md

+1 -1

@@ -18,7 +18,7 @@ Found 1 error:

18

19 Error: Cannot access refs during render

20

21 -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)

21 +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).

22

23 error.invalid-ref-value-as-props.ts:4:19

24 2 | function Component(props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md

+2 -2

@@ -19,7 +19,7 @@ Found 2 errors:

19

20 Error: Cannot access refs during render

21

22 -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)

22 +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).

23

24 error.invalid-set-and-read-ref-during-render.ts:4:2

25 2 | function Component(props) {

@@ -32,7 +32,7 @@ error.invalid-set-and-read-ref-during-render.ts:4:2

32

33 Error: Cannot access refs during render

34

35 -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)

35 +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).

36

37 error.invalid-set-and-read-ref-during-render.ts:5:9

38 3 | const ref = useRef(null);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.expect.md

+2 -2

@@ -19,7 +19,7 @@ Found 2 errors:

19

20 Error: Cannot access refs during render

21

22 -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)

22 +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).

23

24 error.invalid-set-and-read-ref-nested-property-during-render.ts:4:2

25 2 | function Component(props) {

@@ -32,7 +32,7 @@ error.invalid-set-and-read-ref-nested-property-during-render.ts:4:2

32

33 Error: Cannot access refs during render

34

35 -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)

35 +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).

36

37 error.invalid-set-and-read-ref-nested-property-during-render.ts:5:9

38 3 | const ref = useRef({inner: null});

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useMemo-indirect-useCallback.expect.md

+1 -1

@@ -30,7 +30,7 @@ Found 1 error:

30

31 Error: Calling setState from useMemo may trigger an infinite loop

32

33 -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)

33 +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).

34

35 error.invalid-setState-in-useMemo-indirect-useCallback.ts:13:4

36 11 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useMemo.expect.md

+2 -2

@@ -24,7 +24,7 @@ Found 2 errors:

24

25 Error: Calling setState from useMemo may trigger an infinite loop

26

27 -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)

27 +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).

28

29 error.invalid-setState-in-useMemo.ts:6:4

30 4 |

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

37

38 Error: Calling setState from useMemo may trigger an infinite loop

39

40 -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)

40 +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).

41

42 error.invalid-setState-in-useMemo.ts:7:4

43 5 | useMemo(() => {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-sketchy-code-use-forget.expect.md

+2 -2

@@ -21,7 +21,7 @@ Found 2 errors:

21

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

23

24 -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`

24 +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`.

25

26 error.invalid-sketchy-code-use-forget.ts:1:0

27 > 1 | /* eslint-disable react-hooks/rules-of-hooks */

@@ -32,7 +32,7 @@ error.invalid-sketchy-code-use-forget.ts:1:0

32

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

34

35 -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`

35 +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`.

36

37 error.invalid-sketchy-code-use-forget.ts:5:2

38 3 | 'use forget';

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unclosed-eslint-suppression.expect.md

+1 -1

@@ -40,7 +40,7 @@ Found 1 error:

40

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

42

43 -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`

43 +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`.

44

45 error.invalid-unclosed-eslint-suppression.ts:2:0

46 1 | // Note: Everything below this is sketchy

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-in-render.expect.md

+2 -2

@@ -23,7 +23,7 @@ Found 2 errors:

23

24 Error: Calling setState during render may trigger an infinite loop

25

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

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

27

28 error.invalid-unconditional-set-state-in-render.ts:6:2

29 4 | const aliased = setX;

@@ -36,7 +36,7 @@ error.invalid-unconditional-set-state-in-render.ts:6:2

36

37 Error: Calling setState during render may trigger an infinite loop

38

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

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

40

41 error.invalid-unconditional-set-state-in-render.ts:7:2

42 5 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-use-ref-added-to-dep-without-type-info.expect.md

+2 -2

@@ -26,7 +26,7 @@ Found 2 errors:

26

27 Error: Cannot access refs during render

28

29 -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)

29 +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).

30

31 error.invalid-use-ref-added-to-dep-without-type-info.ts:10:21

32 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

39

40 Error: Cannot access refs during render

41

42 -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)

42 +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).

43

44 error.invalid-use-ref-added-to-dep-without-type-info.ts:12:28

45 10 | const x = {a, val: val.ref.current};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-but-dont-read-ref-in-render.expect.md

+1 -1

@@ -21,7 +21,7 @@ Found 1 error:

21

22 Error: Cannot access refs during render

23

24 -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)

24 +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).

25

26 error.invalid-write-but-dont-read-ref-in-render.ts:5:2

27 3 | const ref = useRef(null);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-ref-prop-in-render.expect.md

+1 -1

@@ -19,7 +19,7 @@ Found 1 error:

19

20 Error: Cannot access refs during render

21

22 -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)

22 +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).

23

24 error.invalid-write-ref-prop-in-render.ts:4:2

25 2 | function Component(props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.nested-component-in-normal-function.expect.md

+1 -1

@@ -31,7 +31,7 @@ Found 1 error:

31

32 Error: Components and hooks cannot be created dynamically

33

34 -The function `Wrapper` appears to be a React component, but it's defined inside `getInput`. Components and Hooks should always be declared at module scope

34 +The function `Wrapper` appears to be a React component, but it's defined inside `getInput`. Components and Hooks should always be declared at module scope.

35

36 error.nested-component-in-normal-function.ts:2:16

37 1 | // @validateNoDynamicallyCreatedComponentsOrHooks

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.nested-hook-in-normal-function.expect.md

+1 -1

@@ -35,7 +35,7 @@ Found 1 error:

35

36 Error: Components and hooks cannot be created dynamically

37

38 -The function `useConfiguredState` appears to be a React hook, but it's defined inside `createCustomHook`. Components and Hooks should always be declared at module scope

38 +The function `useConfiguredState` appears to be a React hook, but it's defined inside `createCustomHook`. Components and Hooks should always be declared at module scope.

39

40 error.nested-hook-in-normal-function.ts:4:9

41 2 | import {useState} from 'react';

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassign-global-fn-arg.expect.md

+1 -1

@@ -28,7 +28,7 @@ Found 1 error:

28

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

30

31 -Variable `b` is 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)

31 +Variable `b` is 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).

32

33 error.reassign-global-fn-arg.ts:5:4

34 3 | export default function MyApp() {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassignment-to-global-indirect.expect.md

+2 -2

@@ -21,7 +21,7 @@ Found 2 errors:

21

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

23

24 -Variable `someUnknownGlobal` is 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)

24 +Variable `someUnknownGlobal` is 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).

25

26 error.reassignment-to-global-indirect.ts:4:4

27 2 | const foo = () => {

@@ -34,7 +34,7 @@ error.reassignment-to-global-indirect.ts:4:4

34

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

36

37 -Variable `moduleLocal` is 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)

37 +Variable `moduleLocal` is 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).

38

39 error.reassignment-to-global-indirect.ts:5:4

40 3 | // Cannot assign to globals

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassignment-to-global.expect.md

+2 -2

@@ -18,7 +18,7 @@ Found 2 errors:

18

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

20

21 -Variable `someUnknownGlobal` is 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)

21 +Variable `someUnknownGlobal` is 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).

22

23 error.reassignment-to-global.ts:3:2

24 1 | function Component() {

@@ -31,7 +31,7 @@ error.reassignment-to-global.ts:3:2

31

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

33

34 -Variable `moduleLocal` is 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)

34 +Variable `moduleLocal` is 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).

35

36 error.reassignment-to-global.ts:4:2

37 2 | // Cannot assign to globals

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-arbitrary.expect.md

+2 -2

@@ -29,7 +29,7 @@ Found 2 errors:

29

30 Error: Cannot access refs during render

31

32 -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)

32 +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).

33

34 6 | component C() {

35 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

41

42 Error: Cannot access refs during render

43

44 -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)

44 +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).

45

46 7 | const r = useRef(DEFAULT_VALUE);

47 8 | if (r.current == DEFAULT_VALUE) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call-2.expect.md

+1 -1

@@ -27,7 +27,7 @@ Found 1 error:

27

28 Error: Cannot access refs during render

29

30 -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)

30 +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).

31

32 5 | const r = useRef(null);

33 6 | if (r.current == null) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call.expect.md

+1 -1

@@ -27,7 +27,7 @@ Found 1 error:

27

28 Error: Cannot access refs during render

29

30 -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)

30 +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).

31

32 5 | const r = useRef(null);

33 6 | if (r.current == null) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-linear.expect.md

+1 -1

@@ -28,7 +28,7 @@ Found 1 error:

28

29 Error: Cannot access refs during render

30

31 -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)

31 +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).

32

33 6 | if (r.current == null) {

34 7 | r.current = 42;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-nonif.expect.md

+2 -2

@@ -28,7 +28,7 @@ Found 2 errors:

28

29 Error: Cannot access refs during render

30

31 -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)

31 +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).

32

33 4 | component C() {

34 5 | const r = useRef(null);

@@ -40,7 +40,7 @@ React refs are values that are not needed for rendering. Refs should only be acc

40

41 Error: Cannot access refs during render

42

43 -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)

43 +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).

44

45 5 | const r = useRef(null);

46 6 | const guard = r.current == null;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-other.expect.md

+1 -1

@@ -28,7 +28,7 @@ Found 1 error:

28

29 Error: Cannot access refs during render

30

31 -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)

31 +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).

32

33 6 | const r2 = useRef(null);

34 7 | if (r.current == null) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-post-access-2.expect.md

+1 -1

@@ -28,7 +28,7 @@ Found 1 error:

28

29 Error: Cannot access refs during render

30

31 -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)

31 +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).

32

33 7 | r.current = 1;

34 8 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-post-access.expect.md

+1 -1

@@ -28,7 +28,7 @@ Found 1 error:

28

29 Error: Cannot access refs during render

30

31 -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)

31 +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).

32

33 7 | r.current = 1;

34 8 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-optional.expect.md

+1 -1

@@ -24,7 +24,7 @@ Found 1 error:

24

25 Error: Cannot access refs during render

26

27 -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)

27 +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).

28

29 error.ref-optional.ts:5:9

30 3 | function Component(props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.sketchy-code-exhaustive-deps.expect.md

+1 -1

@@ -24,7 +24,7 @@ Found 1 error:

24

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

26

27 -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`

27 +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`.

28

29 error.sketchy-code-exhaustive-deps.ts:6:7

30 4 | () => {

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

+1 -1

@@ -25,7 +25,7 @@ Found 1 error:

25

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

27

28 -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`

28 +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`.

29

30 error.sketchy-code-rules-of-hooks.ts:1:0

31 > 1 | /* eslint-disable react-hooks/rules-of-hooks */

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-nested-method-calls-lower-property-load-into-temporary.expect.md

-2

@@ -26,8 +26,6 @@ Found 1 error:

26

27 Invariant: [Codegen] Internal error: MethodCall::property must be an unpromoted + unmemoized MemberExpression

28

29 -

30 -

29 error.todo-nested-method-calls-lower-property-load-into-temporary.ts:6:14

30 4 | function Component({}) {

31 5 | const items = makeArray(0, 1, 2, null, 4, false, 6);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-named-function-with-shadowed-local-same-name.expect.md

+1 -1

@@ -23,7 +23,7 @@ Found 1 error:

23

24 Invariant: [InferMutationAliasingEffects] Expected value kind to be initialized

25

26 -<unknown> hasErrors_0$15:TFunction

26 +<unknown> hasErrors_0$15:TFunction.

27

28 error.todo-repro-named-function-with-shadowed-local-same-name.ts:9:9

29 7 | return hasErrors;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md

+1 -1

@@ -35,7 +35,7 @@ Found 1 error:

35

36 Error: Cannot access refs during render

37

38 -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)

38 +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).

39

40 error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.ts:14:2

41 12 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-after-loop-break.expect.md

+1 -1

@@ -26,7 +26,7 @@ Found 1 error:

26

27 Error: Calling setState during render may trigger an infinite loop

28

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

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

30

31 error.unconditional-set-state-in-render-after-loop-break.ts:11:2

32 9 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-after-loop.expect.md

+1 -1

@@ -21,7 +21,7 @@ Found 1 error:

21

22 Error: Calling setState during render may trigger an infinite loop

23

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

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

25

26 error.unconditional-set-state-in-render-after-loop.ts:6:2

27 4 | for (const _ of props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-with-loop-throw.expect.md

+1 -1

@@ -26,7 +26,7 @@ Found 1 error:

26

27 Error: Calling setState during render may trigger an infinite loop

28

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

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

30

31 error.unconditional-set-state-in-render-with-loop-throw.ts:11:2

32 9 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-lambda.expect.md

+1 -1

@@ -24,7 +24,7 @@ Found 1 error:

24

25 Error: Calling setState during render may trigger an infinite loop

26

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

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

28

29 error.unconditional-set-state-lambda.ts:8:2

30 6 | setX(1);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-nested-function-expressions.expect.md

+1 -1

@@ -32,7 +32,7 @@ Found 1 error:

32

33 Error: Calling setState during render may trigger an infinite loop

34

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

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

36

37 error.unconditional-set-state-nested-function-expressions.ts:16:2

38 14 | bar();

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.update-global-should-bailout.expect.md

+1 -1

@@ -23,7 +23,7 @@ Found 1 error:

23

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

25

26 -Variable `renderCount` is 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)

26 +Variable `renderCount` is 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).

27

28 error.update-global-should-bailout.ts:3:2

29 1 | let renderCount = 0;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md

+1 -1

@@ -38,7 +38,7 @@ Found 1 error:

38

39 Error: Cannot access refs during render

40

41 -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)

41 +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).

42

43 error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.ts:17:2

44 15 | ref.current.inner = null;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-set-ref-nested-property-dont-preserve-memoization.expect.md

+1 -1

@@ -34,7 +34,7 @@ Found 1 error:

34

35 Error: Cannot access refs during render

36

37 -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)

37 +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).

38

39 error.useCallback-set-ref-nested-property-dont-preserve-memoization.ts:13:2

40 11 | });

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-non-literal-depslist.expect.md

+1 -1

@@ -32,7 +32,7 @@ Found 1 error:

32

33 Error: Expected the dependency list for useMemo to be an array literal

34

35 -Expected the dependency list for useMemo to be an array literal

35 +Expected the dependency list for useMemo to be an array literal.

36

37 error.useMemo-non-literal-depslist.ts:10:4

38 8 | return text.toUpperCase();

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.expect.md

+1 -1

@@ -24,7 +24,7 @@ Found 1 error:

24

25 Error: Cannot access refs during render

26

27 -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)

27 +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).

28

29 error.validate-mutate-ref-arg-in-render.ts:3:14

30 1 | // @validateRefAccessDuringRender:true

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-as-local.expect.md

+1 -1

@@ -54,7 +54,7 @@ Found 1 error:

54

55 Todo: Support local variables named `fbt`

56

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

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

58

59 error.todo-fbt-as-local.ts:18:19

60 16 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-unknown-enum-value.expect.md

+1 -1

@@ -23,7 +23,7 @@ Found 1 error:

23

24 Todo: Support duplicate fbt tags

25

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

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

27

28 error.todo-fbt-unknown-enum-value.ts:6:7

29 4 | return (

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-locally-require-fbt.expect.md

+1 -1

@@ -18,7 +18,7 @@ Found 1 error:

18

19 Todo: Support local variables named `fbt`

20

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

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

22

23 error.todo-locally-require-fbt.ts:2:8

24 1 | function Component(props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-multiple-fbt-plural.expect.md

+1 -1

@@ -57,7 +57,7 @@ Found 1 error:

57

58 Todo: Support duplicate fbt tags

59

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

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

61

62 error.todo-multiple-fbt-plural.ts:29:7

63 27 | return (

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-bailout-nopanic.expect.md

+1 -1

@@ -58,7 +58,7 @@ export const FIXTURE_ENTRYPOINT = {

58 ## Logs

59

60 ```

61 -{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":206},"end":{"line":16,"column":1,"index":433},"filename":"dynamic-gating-bailout-nopanic.ts"},"detail":{"options":{"category":"PreserveManualMemo","reason":"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 dependency was `value`, but the source dependencies were []. Inferred dependency not present in source.","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":9,"column":31,"index":288},"end":{"line":9,"column":52,"index":309},"filename":"dynamic-gating-bailout-nopanic.ts"},"message":"Could not preserve existing manual memoization"}]}}}

61 +{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":206},"end":{"line":16,"column":1,"index":433},"filename":"dynamic-gating-bailout-nopanic.ts"},"detail":{"options":{"category":"PreserveManualMemo","reason":"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 dependency was `value`, but the source dependencies were []. Inferred dependency not present in source","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":9,"column":31,"index":288},"end":{"line":9,"column":52,"index":309},"filename":"dynamic-gating-bailout-nopanic.ts"},"message":"Could not preserve existing manual memoization"}]}}}

62 ```

63

64 ### Eval output

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-syntax.expect.md

+1 -1

@@ -36,7 +36,7 @@ Found 1 error:

36

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

38

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

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

40

41 error.todo-syntax.ts:11:2

42 9 | function Component({prop1}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-optional-chain.expect.md

+1 -1

@@ -48,7 +48,7 @@ export const FIXTURE_ENTRYPOINT = {

48 ## Logs

49

50 ```

51 -{"kind":"CompileError","fnLoc":{"start":{"line":5,"column":0,"index":149},"end":{"line":12,"column":1,"index":404},"filename":"mutate-after-useeffect-optional-chain.ts"},"detail":{"options":{"category":"Immutability","reason":"This value cannot be modified","description":"Modifying a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the modification before calling useEffect().","details":[{"kind":"error","loc":{"start":{"line":10,"column":2,"index":365},"end":{"line":10,"column":5,"index":368},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"},"message":"value cannot be modified"}]}}}

51 +{"kind":"CompileError","fnLoc":{"start":{"line":5,"column":0,"index":149},"end":{"line":12,"column":1,"index":404},"filename":"mutate-after-useeffect-optional-chain.ts"},"detail":{"options":{"category":"Immutability","reason":"This value cannot be modified","description":"Modifying a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the modification before calling useEffect()","details":[{"kind":"error","loc":{"start":{"line":10,"column":2,"index":365},"end":{"line":10,"column":5,"index":368},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"},"message":"value cannot be modified"}]}}}

52 {"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":9,"column":2,"index":314},"end":{"line":9,"column":49,"index":361},"filename":"mutate-after-useeffect-optional-chain.ts"},"decorations":[{"start":{"line":9,"column":24,"index":336},"end":{"line":9,"column":27,"index":339},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"}]}

53 {"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":149},"end":{"line":12,"column":1,"index":404},"filename":"mutate-after-useeffect-optional-chain.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}

54 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect.expect.md

+1 -1

@@ -47,7 +47,7 @@ export const FIXTURE_ENTRYPOINT = {

47 ## Logs

48

49 ```

50 -{"kind":"CompileError","fnLoc":{"start":{"line":4,"column":0,"index":111},"end":{"line":11,"column":1,"index":242},"filename":"mutate-after-useeffect.ts"},"detail":{"options":{"category":"Immutability","reason":"This value cannot be modified","description":"Modifying a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the modification before calling useEffect().","details":[{"kind":"error","loc":{"start":{"line":9,"column":2,"index":214},"end":{"line":9,"column":5,"index":217},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},"message":"value cannot be modified"}]}}}

50 +{"kind":"CompileError","fnLoc":{"start":{"line":4,"column":0,"index":111},"end":{"line":11,"column":1,"index":242},"filename":"mutate-after-useeffect.ts"},"detail":{"options":{"category":"Immutability","reason":"This value cannot be modified","description":"Modifying a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the modification before calling useEffect()","details":[{"kind":"error","loc":{"start":{"line":9,"column":2,"index":214},"end":{"line":9,"column":5,"index":217},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},"message":"value cannot be modified"}]}}}

51 {"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":6,"column":2,"index":159},"end":{"line":8,"column":14,"index":210},"filename":"mutate-after-useeffect.ts"},"decorations":[{"start":{"line":7,"column":4,"index":181},"end":{"line":7,"column":7,"index":184},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},{"start":{"line":7,"column":4,"index":181},"end":{"line":7,"column":7,"index":184},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},{"start":{"line":7,"column":13,"index":190},"end":{"line":7,"column":16,"index":193},"filename":"mutate-after-useeffect.ts","identifierName":"foo"}]}

52 {"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":111},"end":{"line":11,"column":1,"index":242},"filename":"mutate-after-useeffect.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}

53 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/retry-no-emit.expect.md

+1 -1

@@ -54,7 +54,7 @@ export const FIXTURE_ENTRYPOINT = {

54 ## Logs

55

56 ```

57 -{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":195},"end":{"line":14,"column":1,"index":409},"filename":"retry-no-emit.ts"},"detail":{"options":{"category":"Immutability","reason":"This value cannot be modified","description":"Modifying a value previously passed as an argument to a hook is not allowed. Consider moving the modification before calling the hook.","details":[{"kind":"error","loc":{"start":{"line":12,"column":2,"index":372},"end":{"line":12,"column":6,"index":376},"filename":"retry-no-emit.ts","identifierName":"arr2"},"message":"value cannot be modified"}]}}}

57 +{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":195},"end":{"line":14,"column":1,"index":409},"filename":"retry-no-emit.ts"},"detail":{"options":{"category":"Immutability","reason":"This value cannot be modified","description":"Modifying a value previously passed as an argument to a hook is not allowed. Consider moving the modification before calling the hook","details":[{"kind":"error","loc":{"start":{"line":12,"column":2,"index":372},"end":{"line":12,"column":6,"index":376},"filename":"retry-no-emit.ts","identifierName":"arr2"},"message":"value cannot be modified"}]}}}

58 {"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":8,"column":2,"index":248},"end":{"line":8,"column":46,"index":292},"filename":"retry-no-emit.ts"},"decorations":[{"start":{"line":8,"column":31,"index":277},"end":{"line":8,"column":34,"index":280},"filename":"retry-no-emit.ts","identifierName":"arr"}]}

59 {"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":11,"column":2,"index":316},"end":{"line":11,"column":54,"index":368},"filename":"retry-no-emit.ts"},"decorations":[{"start":{"line":11,"column":25,"index":339},"end":{"line":11,"column":29,"index":343},"filename":"retry-no-emit.ts","identifierName":"arr2"},{"start":{"line":11,"column":25,"index":339},"end":{"line":11,"column":29,"index":343},"filename":"retry-no-emit.ts","identifierName":"arr2"},{"start":{"line":11,"column":35,"index":349},"end":{"line":11,"column":42,"index":356},"filename":"retry-no-emit.ts","identifierName":"propVal"}]}

60 {"kind":"CompileSuccess","fnLoc":{"start":{"line":6,"column":0,"index":195},"end":{"line":14,"column":1,"index":409},"filename":"retry-no-emit.ts"},"fnName":"Foo","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-impure-functions-in-render.expect.md

+3 -3

@@ -21,7 +21,7 @@ Found 3 errors:

21

22 Error: Cannot call impure function during render

23

24 -`Date.now` is an impure function. 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)

24 +`Date.now` is an impure function. 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).

25

26 error.invalid-impure-functions-in-render.ts:4:15

27 2 |

@@ -34,7 +34,7 @@ error.invalid-impure-functions-in-render.ts:4:15

34

35 Error: Cannot call impure function during render

36

37 -`performance.now` is an impure function. 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)

37 +`performance.now` is an impure function. 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).

38

39 error.invalid-impure-functions-in-render.ts:5:14

40 3 | function Component() {

@@ -47,7 +47,7 @@ error.invalid-impure-functions-in-render.ts:5:14

47

48 Error: Cannot call impure function during render

49

50 -`Math.random` is an impure function. 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)

50 +`Math.random` is an impure function. 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).

51

52 error.invalid-impure-functions-in-render.ts:6:15

53 4 | const date = Date.now();

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.reassignment-to-global-indirect.expect.md

+2 -2

@@ -22,7 +22,7 @@ Found 2 errors:

22

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

24

25 -Variable `someUnknownGlobal` is 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)

25 +Variable `someUnknownGlobal` is 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).

26

27 error.reassignment-to-global-indirect.ts:5:4

28 3 | const foo = () => {

@@ -35,7 +35,7 @@ error.reassignment-to-global-indirect.ts:5:4

35

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

37

38 -Variable `moduleLocal` is 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)

38 +Variable `moduleLocal` is 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).

39

40 error.reassignment-to-global-indirect.ts:6:4

41 4 | // Cannot assign to globals

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.reassignment-to-global.expect.md

+2 -2

@@ -19,7 +19,7 @@ Found 2 errors:

19

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

21

22 -Variable `someUnknownGlobal` is 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)

22 +Variable `someUnknownGlobal` is 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).

23

24 error.reassignment-to-global.ts:4:2

25 2 | function Component() {

@@ -32,7 +32,7 @@ error.reassignment-to-global.ts:4:2

32

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

34

35 -Variable `moduleLocal` is 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)

35 +Variable `moduleLocal` is 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).

36

37 error.reassignment-to-global.ts:5:2

38 3 | // Cannot assign to globals

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.todo-repro-named-function-with-shadowed-local-same-name.expect.md

+1 -1

@@ -24,7 +24,7 @@ Found 1 error:

24

25 Invariant: [InferMutationAliasingEffects] Expected value kind to be initialized

26

27 -<unknown> hasErrors_0$15:TFunction

27 +<unknown> hasErrors_0$15:TFunction.

28

29 error.todo-repro-named-function-with-shadowed-local-same-name.ts:10:9

30 8 | return hasErrors;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-optional-chain.expect.md

+1 -1

@@ -48,7 +48,7 @@ export const FIXTURE_ENTRYPOINT = {

48 ## Logs

49

50 ```

51 -{"kind":"CompileError","fnLoc":{"start":{"line":5,"column":0,"index":181},"end":{"line":12,"column":1,"index":436},"filename":"mutate-after-useeffect-optional-chain.ts"},"detail":{"options":{"category":"Immutability","reason":"This value cannot be modified","description":"Modifying a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the modification before calling useEffect().","details":[{"kind":"error","loc":{"start":{"line":10,"column":2,"index":397},"end":{"line":10,"column":5,"index":400},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"},"message":"value cannot be modified"}]}}}

51 +{"kind":"CompileError","fnLoc":{"start":{"line":5,"column":0,"index":181},"end":{"line":12,"column":1,"index":436},"filename":"mutate-after-useeffect-optional-chain.ts"},"detail":{"options":{"category":"Immutability","reason":"This value cannot be modified","description":"Modifying a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the modification before calling useEffect()","details":[{"kind":"error","loc":{"start":{"line":10,"column":2,"index":397},"end":{"line":10,"column":5,"index":400},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"},"message":"value cannot be modified"}]}}}

52 {"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":9,"column":2,"index":346},"end":{"line":9,"column":49,"index":393},"filename":"mutate-after-useeffect-optional-chain.ts"},"decorations":[{"start":{"line":9,"column":24,"index":368},"end":{"line":9,"column":27,"index":371},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"}]}

53 {"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":181},"end":{"line":12,"column":1,"index":436},"filename":"mutate-after-useeffect-optional-chain.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}

54 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect.expect.md

+1 -1

@@ -47,7 +47,7 @@ export const FIXTURE_ENTRYPOINT = {

47 ## Logs

48

49 ```

50 -{"kind":"CompileError","fnLoc":{"start":{"line":4,"column":0,"index":143},"end":{"line":11,"column":1,"index":274},"filename":"mutate-after-useeffect.ts"},"detail":{"options":{"category":"Immutability","reason":"This value cannot be modified","description":"Modifying a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the modification before calling useEffect().","details":[{"kind":"error","loc":{"start":{"line":9,"column":2,"index":246},"end":{"line":9,"column":5,"index":249},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},"message":"value cannot be modified"}]}}}

50 +{"kind":"CompileError","fnLoc":{"start":{"line":4,"column":0,"index":143},"end":{"line":11,"column":1,"index":274},"filename":"mutate-after-useeffect.ts"},"detail":{"options":{"category":"Immutability","reason":"This value cannot be modified","description":"Modifying a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the modification before calling useEffect()","details":[{"kind":"error","loc":{"start":{"line":9,"column":2,"index":246},"end":{"line":9,"column":5,"index":249},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},"message":"value cannot be modified"}]}}}

51 {"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":6,"column":2,"index":191},"end":{"line":8,"column":14,"index":242},"filename":"mutate-after-useeffect.ts"},"decorations":[{"start":{"line":7,"column":4,"index":213},"end":{"line":7,"column":7,"index":216},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},{"start":{"line":7,"column":4,"index":213},"end":{"line":7,"column":7,"index":216},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},{"start":{"line":7,"column":13,"index":222},"end":{"line":7,"column":16,"index":225},"filename":"mutate-after-useeffect.ts","identifierName":"foo"}]}

52 {"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":143},"end":{"line":11,"column":1,"index":274},"filename":"mutate-after-useeffect.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}

53 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/retry-no-emit.expect.md

+1 -1

@@ -54,7 +54,7 @@ export const FIXTURE_ENTRYPOINT = {

54 ## Logs

55

56 ```

57 -{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":227},"end":{"line":14,"column":1,"index":441},"filename":"retry-no-emit.ts"},"detail":{"options":{"category":"Immutability","reason":"This value cannot be modified","description":"Modifying a value previously passed as an argument to a hook is not allowed. Consider moving the modification before calling the hook.","details":[{"kind":"error","loc":{"start":{"line":12,"column":2,"index":404},"end":{"line":12,"column":6,"index":408},"filename":"retry-no-emit.ts","identifierName":"arr2"},"message":"value cannot be modified"}]}}}

57 +{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":227},"end":{"line":14,"column":1,"index":441},"filename":"retry-no-emit.ts"},"detail":{"options":{"category":"Immutability","reason":"This value cannot be modified","description":"Modifying a value previously passed as an argument to a hook is not allowed. Consider moving the modification before calling the hook","details":[{"kind":"error","loc":{"start":{"line":12,"column":2,"index":404},"end":{"line":12,"column":6,"index":408},"filename":"retry-no-emit.ts","identifierName":"arr2"},"message":"value cannot be modified"}]}}}

58 {"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":8,"column":2,"index":280},"end":{"line":8,"column":46,"index":324},"filename":"retry-no-emit.ts"},"decorations":[{"start":{"line":8,"column":31,"index":309},"end":{"line":8,"column":34,"index":312},"filename":"retry-no-emit.ts","identifierName":"arr"}]}

59 {"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":11,"column":2,"index":348},"end":{"line":11,"column":54,"index":400},"filename":"retry-no-emit.ts"},"decorations":[{"start":{"line":11,"column":25,"index":371},"end":{"line":11,"column":29,"index":375},"filename":"retry-no-emit.ts","identifierName":"arr2"},{"start":{"line":11,"column":25,"index":371},"end":{"line":11,"column":29,"index":375},"filename":"retry-no-emit.ts","identifierName":"arr2"},{"start":{"line":11,"column":35,"index":381},"end":{"line":11,"column":42,"index":388},"filename":"retry-no-emit.ts","identifierName":"propVal"}]}

60 {"kind":"CompileSuccess","fnLoc":{"start":{"line":6,"column":0,"index":227},"end":{"line":14,"column":1,"index":441},"filename":"retry-no-emit.ts"},"fnName":"Foo","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.expect.md

+1 -1

@@ -27,7 +27,7 @@ Found 1 error:

27

28 Error: Cannot access refs during render

29

30 -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)

30 +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).

31

32 error.maybe-mutable-ref-not-preserved.ts:8:33

33 6 | function useFoo() {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-with-refs.flow.expect.md

+1 -1

@@ -23,7 +23,7 @@ Found 1 error:

23

24 Error: Cannot access refs during render

25

26 -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)

26 +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).

27

28 5 | const localRef = useFooRef();

29 6 | const mergedRef = useMemo(() => {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.validate-useMemo-named-function.expect.md

+1 -1

@@ -24,7 +24,7 @@ Found 1 error:

24

25 Error: Expected the first argument to be an inline function expression

26

27 -Expected the first argument to be an inline function expression

27 +Expected the first argument to be an inline function expression.

28

29 error.validate-useMemo-named-function.ts:9:20

30 7 | // for now.

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-conditionally-assigned-dynamically-constructed-component-in-render.expect.md

+1 -1

@@ -50,7 +50,7 @@ function Example(props) {

50 ## Logs

51

52 ```

53 -{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","reason":"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}

53 +{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","reason":"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}

54 {"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}

55 ```

56

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-construct-component-in-render.expect.md

+1 -1

@@ -32,7 +32,7 @@ function Example(props) {

32 ## Logs

33

34 ```

35 -{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","reason":"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}

35 +{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","reason":"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}

36 {"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 ```

38

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-function.expect.md

+1 -1

@@ -37,7 +37,7 @@ function Example(props) {

37 ## Logs

38

39 ```

40 -{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","reason":"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}

40 +{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","reason":"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}

41 {"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}

42 ```

43

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-method-call.expect.md

+1 -1

@@ -41,7 +41,7 @@ function Example(props) {

41 ## Logs

42

43 ```

44 -{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","reason":"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}

44 +{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","reason":"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}

45 {"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}

46 ```

47

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-new.expect.md

+1 -1

@@ -32,7 +32,7 @@ function Example(props) {

32 ## Logs

33

34 ```

35 -{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","reason":"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}

35 +{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","reason":"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}

36 {"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}

37 ```

38

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.todo-syntax.expect.md

+1 -1

@@ -33,7 +33,7 @@ Found 1 error:

33

34 Error: [Fire] Untransformed reference to compiler-required feature.

35

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

36 +Either remove this `fire` call or ensure it is successfully transformed by the compiler Todo: (BuildHIR::lowerStatement) Handle TryStatement without a catch clause (11:4).

37

38 error.todo-syntax.ts:18:4

39 16 | };

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.untransformed-fire-reference.expect.md

+1 -1

@@ -17,7 +17,7 @@ Found 1 error:

17

18 Error: [Fire] Untransformed reference to compiler-required feature.

19

20 - null

20 +Either remove this `fire` call or ensure it is successfully transformed by the compiler.

21

22 error.untransformed-fire-reference.ts:4:12

23 2 | import {fire} from 'react';

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.use-no-memo.expect.md

+1 -1

@@ -34,7 +34,7 @@ Found 1 error:

34

35 Error: [Fire] Untransformed reference to compiler-required feature.

36

37 - null

37 +Either remove this `fire` call or ensure it is successfully transformed by the compiler.

38

39 error.use-no-memo.ts:15:4

40 13 | };