OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2025-12-06 12:20:20 +01:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

[compiler] Use new diagnostics for core inference errors (#33760)

Browse Source 
Uses the new diagnostic type for errors created during mutation/aliasing
inference, such as errors for mutating immutable values like props or
state, reassigning globals, etc.

---
[//]: # (BEGIN SAPLING FOOTER)
Stack created with [Sapling](https://sapling-scm.com). Best reviewed
with [ReviewStack](https://reviewstack.dev/facebook/react/pull/33760).
* #33981
* #33777
* #33767
* #33765
* __->__ #33760
This commit is contained in:
Joseph Savona 2025-07-24 15:43:08 -07:00 committed by GitHub
parent 48bc166428
commit a39da6c61f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
61 changed files with 312 additions and 349 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts
View File

@ -995,13 +995,13 @@ export function printAliasingEffect(effect: AliasingEffect): string {
return `${effect.kind} ${printPlaceForAliasEffect(effect.value)}`;
}
case 'MutateFrozen': {
return `MutateFrozen ${printPlaceForAliasEffect(effect.place)} reason=${JSON.stringify(effect.error.reason)}`;
return `MutateFrozen ${printPlaceForAliasEffect(effect.place)} reason=${JSON.stringify(effect.error.category)}`;
}
case 'MutateGlobal': {
return `MutateGlobal ${printPlaceForAliasEffect(effect.place)} reason=${JSON.stringify(effect.error.reason)}`;
return `MutateGlobal ${printPlaceForAliasEffect(effect.place)} reason=${JSON.stringify(effect.error.category)}`;
}
case 'Impure': {
return `Impure ${printPlaceForAliasEffect(effect.place)} reason=${JSON.stringify(effect.error.reason)}`;
return `Impure ${printPlaceForAliasEffect(effect.place)} reason=${JSON.stringify(effect.error.category)}`;
}
case 'Render': {
return `Render ${printPlaceForAliasEffect(effect.place)}`;

12
compiler/packages/babel-plugin-react-compiler/src/Inference/AliasingEffects.ts
View File

@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
import {CompilerErrorDetailOptions} from '../CompilerError';
import {CompilerDiagnostic} from '../CompilerError';
import {
FunctionExpression,
GeneratedSource,
@ -133,19 +133,19 @@ export type AliasingEffect =
/**
* Mutation of a value known to be immutable
*/
| {kind: 'MutateFrozen'; place: Place; error: CompilerErrorDetailOptions}
| {kind: 'MutateFrozen'; place: Place; error: CompilerDiagnostic}
/**
* Mutation of a global
*/
| {
kind: 'MutateGlobal';
place: Place;
error: CompilerErrorDetailOptions;
error: CompilerDiagnostic;
}
/**
* Indicates a side-effect that is not safe during render
*/
| {kind: 'Impure'; place: Place; error: CompilerErrorDetailOptions}
| {kind: 'Impure'; place: Place; error: CompilerDiagnostic}
/**
* Indicates that a given place is accessed during render. Used to distingush
* hook arguments that are known to be called immediately vs those used for
@ -211,9 +211,9 @@ export function hashEffect(effect: AliasingEffect): string {
effect.kind,
effect.place.identifier.id,
effect.error.severity,
effect.error.reason,
effect.error.category,
effect.error.description,
printSourceLocation(effect.error.loc ?? GeneratedSource),
printSourceLocation(effect.error.primaryLocation() ?? GeneratedSource),
].join(':');
}
case 'Mutate':

22
compiler/packages/babel-plugin-react-compiler/src/Inference/InferFunctionEffects.ts
View File

@ -326,26 +326,26 @@ function isEffectSafeOutsideRender(effect: FunctionEffect): boolean {
export function getWriteErrorReason(abstractValue: AbstractValue): string {
if (abstractValue.reason.has(ValueReason.Global)) {
return 'Writing to a variable defined outside a component or hook is not allowed. Consider using an effect';
return 'Modifying a variable defined outside a component or hook is not allowed. Consider using an effect';
} else if (abstractValue.reason.has(ValueReason.JsxCaptured)) {
return 'Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX';
return 'Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX';
} else if (abstractValue.reason.has(ValueReason.Context)) {
return `Mutating a value returned from 'useContext()', which should not be mutated`;
return `Modifying a value returned from 'useContext()' is not allowed.`;
} else if (abstractValue.reason.has(ValueReason.KnownReturnSignature)) {
return 'Mutating a value returned from a function whose return value should not be mutated';
return 'Modifying a value returned from a function whose return value should not be mutated';
} else if (abstractValue.reason.has(ValueReason.ReactiveFunctionArgument)) {
return 'Mutating component props or hook arguments is not allowed. Consider using a local variable instead';
return 'Modifying component props or hook arguments is not allowed. Consider using a local variable instead';
} else if (abstractValue.reason.has(ValueReason.State)) {
return "Mutating a value returned from 'useState()', which should not be mutated. Use the setter function to update instead";
return "Modifying a value returned from 'useState()', which should not be modified directly. Use the setter function to update instead";
} else if (abstractValue.reason.has(ValueReason.ReducerState)) {
return "Mutating a value returned from 'useReducer()', which should not be mutated. Use the dispatch function to update instead";
return "Modifying a value returned from 'useReducer()', which should not be modified directly. Use the dispatch function to update instead";
} else if (abstractValue.reason.has(ValueReason.Effect)) {
return 'Updating a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the mutation before calling useEffect()';
return 'Modifying a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the modification before calling useEffect()';
} else if (abstractValue.reason.has(ValueReason.HookCaptured)) {
return 'Updating a value previously passed as an argument to a hook is not allowed. Consider moving the mutation before calling the hook';
return 'Modifying a value previously passed as an argument to a hook is not allowed. Consider moving the modification before calling the hook';
} else if (abstractValue.reason.has(ValueReason.HookReturn)) {
return 'Updating a value returned from a hook is not allowed. Consider moving the mutation into the hook where the value is constructed';
return 'Modifying a value returned from a hook is not allowed. Consider moving the modification into the hook where the value is constructed';
} else {
return 'This mutates a variable that React considers immutable';
return 'This modifies a variable that React considers immutable';
}
}

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

@ -6,6 +6,7 @@
*/
import {
CompilerDiagnostic,
CompilerError,
Effect,
ErrorSeverity,
@ -446,20 +447,24 @@ function applySignature(
reason: value.reason,
context: new Set(),
});
const message =
effect.value.identifier.name !== null &&
effect.value.identifier.name.kind === 'named'
? `\`${effect.value.identifier.name.value}\` cannot be modified`
: 'This value cannot be modified';
effects.push({
kind: 'MutateFrozen',
place: effect.value,
error: {
error: CompilerDiagnostic.create({
severity: ErrorSeverity.InvalidReact,
reason,
description:
effect.value.identifier.name !== null &&
effect.value.identifier.name.kind === 'named'
? `Found mutation of \`${effect.value.identifier.name.value}\``
: null,
loc: effect.value.loc,
category: 'This value cannot be modified',
description: reason,
suggestions: null,
},
}).withDetail({
kind: 'error',
loc: effect.value.loc,
message,
}),
});
}
}
@ -1016,30 +1021,28 @@ function applyEffect(
const description =
effect.value.identifier.name !== null &&
effect.value.identifier.name.kind === 'named'
? `Variable \`${effect.value.identifier.name.value}\` is accessed before it is declared`
: null;
? `Variable \`${effect.value.identifier.name.value}\``
: 'This variable';
const hoistedAccess = context.hoistedContextDeclarations.get(
effect.value.identifier.declarationId,
);
const diagnostic = CompilerDiagnostic.create({
severity: ErrorSeverity.InvalidReact,
category: 'Cannot access variable before it is declared',
description: `${description} is accessed before it is declared, which prevents the earlier access from updating when this value changes over time`,
});
if (hoistedAccess != null && hoistedAccess.loc != effect.value.loc) {
applyEffect(
context,
state,
{
kind: 'MutateFrozen',
place: effect.value,
error: {
severity: ErrorSeverity.InvalidReact,
reason: `This variable is accessed before it is declared, which may prevent it from updating as the assigned value changes over time`,
description,
loc: hoistedAccess.loc,
suggestions: null,
},
},
initialized,
effects,
);
diagnostic.withDetail({
kind: 'error',
loc: hoistedAccess.loc,
message: 'Variable accessed before it is declared',
});
}
diagnostic.withDetail({
kind: 'error',
loc: effect.value.loc,
message: 'The variable is declared here',
});
applyEffect(
context,
@ -1047,13 +1050,7 @@ function applyEffect(
{
kind: 'MutateFrozen',
place: effect.value,
error: {
severity: ErrorSeverity.InvalidReact,
reason: `This variable is accessed before it is declared, which prevents the earlier access from updating when this value changes over time`,
description,
loc: effect.value.loc,
suggestions: null,
},
error: diagnostic,
},
initialized,
effects,
@ -1064,11 +1061,11 @@ function applyEffect(
reason: value.reason,
context: new Set(),
});
const description =
const message =
effect.value.identifier.name !== null &&
effect.value.identifier.name.kind === 'named'
? `Found mutation of \`${effect.value.identifier.name.value}\``
: null;
? `\`${effect.value.identifier.name.value}\` cannot be modified`
: 'This value cannot be modified';
applyEffect(
context,
state,
@ -1078,13 +1075,15 @@ function applyEffect(
? 'MutateFrozen'
: 'MutateGlobal',
place: effect.value,
error: {
error: CompilerDiagnostic.create({
severity: ErrorSeverity.InvalidReact,
reason,
description,
category: 'This value cannot be modified',
description: reason,
}).withDetail({
kind: 'error',
loc: effect.value.loc,
suggestions: null,
},
message,
}),
},
initialized,
effects,
@ -2006,13 +2005,18 @@ function computeSignatureForInstruction(
effects.push({
kind: 'MutateGlobal',
place: value.value,
error: {
reason:
'Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)',
loc: instr.loc,
suggestions: null,
error: CompilerDiagnostic.create({
severity: ErrorSeverity.InvalidReact,
},
category:
'Cannot reassign variables declared outside of the component/hook',
description:
'Reassigning a variable declared outside of the component/hook 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)',
suggestions: null,
}).withDetail({
kind: 'error',
loc: instr.loc,
message: 'Cannot reassign variable',
}),
});
effects.push({kind: 'Assign', from: value.value, into: lvalue});
break;
@ -2102,17 +2106,20 @@ function computeEffectsForLegacySignature(
effects.push({
kind: 'Impure',
place: receiver,
error: {
reason:
'Calling an impure function can produce unstable results. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent)',
description:
signature.canonicalName != null
? `\`${signature.canonicalName}\` is an impure function whose results may change on every call`
: null,
error: CompilerDiagnostic.create({
severity: ErrorSeverity.InvalidReact,
loc,
category: 'Cannot call impure function during render',
description:
(signature.canonicalName != null
? `\`${signature.canonicalName}\` 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)',
suggestions: null,
},
}).withDetail({
kind: 'error',
loc,
message: 'Cannot call impure function',
}),
});
}
const stores: Array<Place> = [];

4
compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingRanges.ts
View File

@ -195,7 +195,7 @@ export function inferMutationAliasingRanges(
effect.kind === 'MutateGlobal' ||
effect.kind === 'Impure'
) {
errors.push(effect.error);
errors.pushDiagnostic(effect.error);
functionEffects.push(effect);
} else if (effect.kind === 'Render') {
renders.push({index: index++, place: effect.place});
@ -549,7 +549,7 @@ function appendFunctionErrors(errors: CompilerError, fn: HIRFunction): void {
case 'Impure':
case 'MutateFrozen':
case 'MutateGlobal': {
errors.push(effect.error);
errors.pushDiagnostic(effect.error);
break;
}
}

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

@ -16,18 +16,18 @@ function Component() {
```
Found 1 error:
Error: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
Error: Cannot reassign variables declared outside of the component/hook
Reassigning a variable declared outside of the component/hook is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.assign-global-in-component-tag-function.ts:3:4
1 | function Component() {
2 | const Foo = () => {
> 3 | someGlobal = true;
| ^^^^^^^^^^ Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
| ^^^^^^^^^^ Cannot reassign variable
4 | };
5 | return <Foo />;
6 | }
```

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

@ -19,18 +19,18 @@ function Component() {
```
Found 1 error:
Error: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
Error: Cannot reassign variables declared outside of the component/hook
Reassigning a variable declared outside of the component/hook is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.assign-global-in-jsx-children.ts:3:4
1 | function Component() {
2 | const foo = () => {
> 3 | someGlobal = true;
| ^^^^^^^^^^ Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
| ^^^^^^^^^^ Cannot reassign variable
4 | };
5 | // Children are generally access/called during render, so
6 | // modifying a global in a children function is almost
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-call-freezes-captured-identifier.expect.md
View File

@ -30,18 +30,18 @@ export const FIXTURE_ENTRYPOINT = {
```
Found 1 error:
Error: Updating a value previously passed as an argument to a hook is not allowed. Consider moving the mutation before calling the hook
Error: This value cannot be modified
Modifying a value previously passed as an argument to a hook is not allowed. Consider moving the modification before calling the hook
error.hook-call-freezes-captured-identifier.ts:13:2
11 | });
12 |
> 13 | x.value += count;
| ^ Updating a value previously passed as an argument to a hook is not allowed. Consider moving the mutation before calling the hook
| ^ This value cannot be modified
14 | return <Stringify x={x} cb={cb} />;
15 | }
16 |
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-call-freezes-captured-memberexpr.expect.md
View File

@ -30,18 +30,18 @@ export const FIXTURE_ENTRYPOINT = {
```
Found 1 error:
Error: Updating a value previously passed as an argument to a hook is not allowed. Consider moving the mutation before calling the hook
Error: This value cannot be modified
Modifying a value previously passed as an argument to a hook is not allowed. Consider moving the modification before calling the hook
error.hook-call-freezes-captured-memberexpr.ts:13:2
11 | });
12 |
> 13 | x.value += count;
| ^ Updating a value previously passed as an argument to a hook is not allowed. Consider moving the mutation before calling the hook
| ^ This value cannot be modified
14 | return <Stringify x={x} cb={cb} />;
15 | }
16 |
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-array-push-frozen.expect.md
View File

@ -16,18 +16,18 @@ function Component(props) {
```
Found 1 error:
Error: Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX
Error: This value cannot be modified
Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX
error.invalid-array-push-frozen.ts:4:2
2 | const x = [];
3 | <div>{x}</div>;
> 4 | x.push(props.value);
| ^ Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX
| ^ This value cannot be modified
5 | return x;
6 | }
7 |
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-computed-store-to-frozen-value.expect.md
View File

@ -17,18 +17,18 @@ function Component(props) {
```
Found 1 error:
Error: Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX
Error: This value cannot be modified
Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX
error.invalid-computed-store-to-frozen-value.ts:5:2
3 | // freeze
4 | <div>{x}</div>;
> 5 | x[0] = true;
| ^ Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX
| ^ This value cannot be modified
6 | return x;
7 | }
8 |
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-delete-computed-property-of-frozen-value.expect.md
View File

@ -17,18 +17,18 @@ function Component(props) {
```
Found 1 error:
Error: Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX
Error: This value cannot be modified
Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX
error.invalid-delete-computed-property-of-frozen-value.ts:5:9
3 | // freeze
4 | <div>{x}</div>;
> 5 | delete x[y];
| ^ Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX
| ^ This value cannot be modified
6 | return x;
7 | }
8 |
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-delete-property-of-frozen-value.expect.md
View File

@ -17,18 +17,18 @@ function Component(props) {
```
Found 1 error:
Error: Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX
Error: This value cannot be modified
Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX
error.invalid-delete-property-of-frozen-value.ts:5:9
3 | // freeze
4 | <div>{x}</div>;
> 5 | delete x.y;
| ^ Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX
| ^ This value cannot be modified
6 | return x;
7 | }
8 |
```

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

@ -14,17 +14,17 @@ function useFoo(props) {
```
Found 1 error:
Error: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
Error: Cannot reassign variables declared outside of the component/hook
Reassigning a variable declared outside of the component/hook is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.invalid-destructure-assignment-to-global.ts:2:3
1 | function useFoo(props) {
> 2 | [x] = props;
| ^ Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
| ^ Cannot reassign variable
3 | return {x};
4 | }
5 |
```

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

@ -16,18 +16,18 @@ function Component(props) {
```
Found 1 error:
Error: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
Error: Cannot reassign variables declared outside of the component/hook
Reassigning a variable declared outside of the component/hook is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.invalid-destructure-to-local-global-variables.ts:3:6
1 | function Component(props) {
2 | let a;
> 3 | [a, b] = props.value;
| ^ Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
| ^ Cannot reassign variable
4 |
5 | return [a, b];
6 | }
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-function-expression-mutates-immutable-value.expect.md
View File

@ -19,20 +19,18 @@ function Component(props) {
```
Found 1 error:
Error: Mutating a value returned from 'useState()', which should not be mutated. Use the setter function to update instead
Error: This value cannot be modified
Found mutation of `x`.
Modifying a value returned from 'useState()', which should not be modified directly. Use the setter function to update instead
error.invalid-function-expression-mutates-immutable-value.ts:5:4
3 | const onChange = e => {
4 | // INVALID! should use copy-on-write and pass the new value
> 5 | x.value = e.target.value;
| ^ Mutating a value returned from 'useState()', which should not be mutated. Use the setter function to update instead
| ^ `x` cannot be modified
6 | setX(x);
7 | };
8 | return <input value={x.value} onChange={onChange} />;
```

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

@ -36,18 +36,18 @@ export const FIXTURE_ENTRYPOINT = {
```
Found 1 error:
Error: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
Error: Cannot reassign variables declared outside of the component/hook
Reassigning a variable declared outside of the component/hook is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.invalid-global-reassignment-indirect.ts:9:4
7 |
8 | const setGlobal = () => {
> 9 | someGlobal = true;
| ^^^^^^^^^^ Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
| ^^^^^^^^^^ Cannot reassign variable
10 | };
11 | const indirectSetGlobal = () => {
12 | setGlobal();
```

17
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-hoisting-setstate.expect.md
View File

@ -38,35 +38,28 @@ export const FIXTURE_ENTRYPOINT = {
## Error
```
Found 2 errors:
Error: This variable is accessed before it is declared, which may prevent it from updating as the assigned value changes over time
Found 1 error:
Error: Cannot access variable before it is declared
Variable `setState` is accessed before it is declared.
Variable `setState` is accessed before it is declared, which prevents the earlier access from updating when this value changes over time
error.invalid-hoisting-setstate.ts:19:18
17 | * $2 = Function context=setState
18 | */
> 19 | useEffect(() => setState(2), []);
| ^^^^^^^^ This variable is accessed before it is declared, which may prevent it from updating as the assigned value changes over time
| ^^^^^^^^ Variable accessed before it is declared
20 |
21 | const [state, setState] = useState(0);
22 | return <Stringify state={state} />;
Error: This variable is accessed before it is declared, which prevents the earlier access from updating when this value changes over time
Variable `setState` is accessed before it is declared.
error.invalid-hoisting-setstate.ts:21:16
19 | useEffect(() => setState(2), []);
20 |
> 21 | const [state, setState] = useState(0);
| ^^^^^^^^ This variable is accessed before it is declared, which prevents the earlier access from updating when this value changes over time
| ^^^^^^^^ The variable is declared here
22 | return <Stringify state={state} />;
23 | }
24 |
```

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

@ -18,48 +18,42 @@ function Component() {
```
Found 3 errors:
Error: Calling an impure function can produce unstable results. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent)
Error: Cannot call impure function during render
`Date.now` is an impure function whose results may change on every call.
`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)
error.invalid-impure-functions-in-render.ts:4:15
2 |
3 | function Component() {
> 4 | const date = Date.now();
| ^^^^^^^^^^ Calling an impure function can produce unstable results. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent)
| ^^^^^^^^^^ Cannot call impure function
5 | const now = performance.now();
6 | const rand = Math.random();
7 | return <Foo date={date} now={now} rand={rand} />;
Error: Cannot call impure function during render
Error: Calling an impure function can produce unstable results. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent)
`performance.now` is an impure function whose results may change on every call.
`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)
error.invalid-impure-functions-in-render.ts:5:14
3 | function Component() {
4 | const date = Date.now();
> 5 | const now = performance.now();
| ^^^^^^^^^^^^^^^^^ Calling an impure function can produce unstable results. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent)
| ^^^^^^^^^^^^^^^^^ Cannot call impure function
6 | const rand = Math.random();
7 | return <Foo date={date} now={now} rand={rand} />;
8 | }
Error: Cannot call impure function during render
Error: Calling an impure function can produce unstable results. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent)
`Math.random` is an impure function whose results may change on every call.
`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)
error.invalid-impure-functions-in-render.ts:6:15
4 | const date = Date.now();
5 | const now = performance.now();
> 6 | const rand = Math.random();
| ^^^^^^^^^^^^^ Calling an impure function can produce unstable results. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent)
| ^^^^^^^^^^^^^ Cannot call impure function
7 | return <Foo date={date} now={now} rand={rand} />;
8 | }
9 |
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-jsx-captures-context-variable.expect.md
View File

@ -51,20 +51,18 @@ export const FIXTURE_ENTRYPOINT = {
```
Found 1 error:
Error: Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX
Error: This value cannot be modified
Found mutation of `i`.
Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX
error.invalid-jsx-captures-context-variable.ts:22:2
20 | />
21 | );
> 22 | i = i + 1;
| ^ Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX
| ^ `i` cannot be modified
23 | items.push(
24 | <Stringify
25 | key={i}
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-after-aliased-freeze.expect.md
View File

@ -26,18 +26,18 @@ function Component(props) {
```
Found 1 error:
Error: Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX
Error: This value cannot be modified
Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX
error.invalid-mutate-after-aliased-freeze.ts:13:2
11 | // y is MaybeFrozen at this point, since it may alias to x
12 | // (which is the above line freezes)
> 13 | y.push(props.p2);
| ^ Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX
| ^ This value cannot be modified
14 |
15 | return <Component x={x} y={y} />;
16 | }
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-after-freeze.expect.md
View File

@ -20,18 +20,18 @@ function Component(props) {
```
Found 1 error:
Error: Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX
Error: This value cannot be modified
Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX
error.invalid-mutate-after-freeze.ts:7:2
5 |
6 | // x is Frozen at this point
> 7 | x.push(props.p2);
| ^ Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX
| ^ This value cannot be modified
8 |
9 | return <div>{_}</div>;
10 | }
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-context-in-callback.expect.md
View File

@ -25,20 +25,18 @@ function Component(props) {
```
Found 1 error:
Error: Mutating a value returned from 'useContext()', which should not be mutated
Error: This value cannot be modified
Found mutation of `FooContext`.
Modifying a value returned from 'useContext()' is not allowed.
error.invalid-mutate-context-in-callback.ts:12:4
10 | // independently
11 | const onClick = () => {
> 12 | FooContext.current = true;
| ^^^^^^^^^^ Mutating a value returned from 'useContext()', which should not be mutated
| ^^^^^^^^^^ `FooContext` cannot be modified
13 | };
14 | return <div onClick={onClick} />;
15 | }
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-context.expect.md
View File

@ -15,18 +15,18 @@ function Component(props) {
```
Found 1 error:
Error: Mutating a value returned from 'useContext()', which should not be mutated
Error: This value cannot be modified
Modifying a value returned from 'useContext()' is not allowed.
error.invalid-mutate-context.ts:3:2
1 | function Component(props) {
2 | const context = useContext(FooContext);
> 3 | context.value = props.value;
| ^^^^^^^ Mutating a value returned from 'useContext()', which should not be mutated
| ^^^^^^^ This value cannot be modified
4 | return context.value;
5 | }
6 |
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-props-in-effect-fixpoint.expect.md
View File

@ -26,20 +26,18 @@ function Component(props) {
```
Found 1 error:
Error: Mutating component props or hook arguments is not allowed. Consider using a local variable instead
Error: This value cannot be modified
Found mutation of `y`.
Modifying component props or hook arguments is not allowed. Consider using a local variable instead
error.invalid-mutate-props-in-effect-fixpoint.ts:10:4
8 | let y = x;
9 | let mutateProps = () => {
> 10 | y.foo = true;
| ^ Mutating component props or hook arguments is not allowed. Consider using a local variable instead
| ^ `y` cannot be modified
11 | };
12 | let mutatePropsIndirect = () => {
13 | mutateProps();
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-props-via-for-of-iterator.expect.md
View File

@ -18,18 +18,18 @@ function Component(props) {
```
Found 1 error:
Error: Mutating component props or hook arguments is not allowed. Consider using a local variable instead
Error: This value cannot be modified
Modifying component props or hook arguments is not allowed. Consider using a local variable instead
error.invalid-mutate-props-via-for-of-iterator.ts:4:4
2 | const items = [];
3 | for (const x of props.items) {
> 4 | x.modified = true;
| ^ Mutating component props or hook arguments is not allowed. Consider using a local variable instead
| ^ This value cannot be modified
5 | items.push(x);
6 | }
7 | return items;
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutation-in-closure.expect.md
View File

@ -17,20 +17,18 @@ function useInvalidMutation(options) {
```
Found 1 error:
Error: Mutating component props or hook arguments is not allowed. Consider using a local variable instead
Error: This value cannot be modified
Found mutation of `options`.
Modifying component props or hook arguments is not allowed. Consider using a local variable instead
error.invalid-mutation-in-closure.ts:4:4
2 | function test() {
3 | foo(options.foo); // error should not point on this line
> 4 | options.foo = 'bar';
| ^^^^^^^ Mutating component props or hook arguments is not allowed. Consider using a local variable instead
| ^^^^^^^ `options` cannot be modified
5 | }
6 | return test;
7 | }
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutation-of-possible-props-phi-indirect.expect.md
View File

@ -20,20 +20,18 @@ function Component(props) {
```
Found 1 error:
Error: Writing to a variable defined outside a component or hook is not allowed. Consider using an effect
Error: This value cannot be modified
Found mutation of `x`.
Modifying a variable defined outside a component or hook is not allowed. Consider using an effect
error.invalid-mutation-of-possible-props-phi-indirect.ts:4:4
2 | let x = cond ? someGlobal : props.foo;
3 | const mutatePhiThatCouldBeProps = () => {
> 4 | x.y = true;
| ^ Writing to a variable defined outside a component or hook is not allowed. Consider using an effect
| ^ `x` cannot be modified
5 | };
6 | const indirectMutateProps = () => {
7 | mutatePhiThatCouldBeProps();
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-non-imported-reanimated-shared-value-writes.expect.md
View File

@ -25,20 +25,18 @@ function SomeComponent() {
```
Found 1 error:
Error: Updating a value returned from a hook is not allowed. Consider moving the mutation into the hook where the value is constructed
Error: This value cannot be modified
Found mutation of `sharedVal`.
Modifying a value returned from a hook is not allowed. Consider moving the modification into the hook where the value is constructed
error.invalid-non-imported-reanimated-shared-value-writes.ts:11:22
9 | return (
10 | <Button
> 11 | onPress={() => (sharedVal.value = Math.random())}
| ^^^^^^^^^ Updating a value returned from a hook is not allowed. Consider moving the mutation into the hook where the value is constructed
| ^^^^^^^^^ `sharedVal` cannot be modified
12 | title="Randomize"
13 | />
14 | );
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-prop-mutation-indirect.expect.md
View File

@ -19,20 +19,18 @@ function Component(props) {
```
Found 1 error:
Error: Mutating component props or hook arguments is not allowed. Consider using a local variable instead
Error: This value cannot be modified
Found mutation of `props`.
Modifying component props or hook arguments is not allowed. Consider using a local variable instead
error.invalid-prop-mutation-indirect.ts:3:4
1 | function Component(props) {
2 | const f = () => {
> 3 | props.value = true;
| ^^^^^ Mutating component props or hook arguments is not allowed. Consider using a local variable instead
| ^^^^^ `props` cannot be modified
4 | };
5 | const g = () => {
6 | f();
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-property-store-to-frozen-value.expect.md
View File

@ -17,18 +17,18 @@ function Component(props) {
```
Found 1 error:
Error: Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX
Error: This value cannot be modified
Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX
error.invalid-property-store-to-frozen-value.ts:5:2
3 | // freeze
4 | <div>{x}</div>;
> 5 | x.y = true;
| ^ Updating a value used previously in JSX is not allowed. Consider moving the mutation before the JSX
| ^ This value cannot be modified
6 | return x;
7 | }
8 |
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-props-mutation-in-effect-indirect.expect.md
View File

@ -19,20 +19,18 @@ function Component(props) {
```
Found 1 error:
Error: Mutating component props or hook arguments is not allowed. Consider using a local variable instead
Error: This value cannot be modified
Found mutation of `props`.
Modifying component props or hook arguments is not allowed. Consider using a local variable instead
error.invalid-props-mutation-in-effect-indirect.ts:3:4
1 | function Component(props) {
2 | const mutateProps = () => {
> 3 | props.value = true;
| ^^^^^ Mutating component props or hook arguments is not allowed. Consider using a local variable instead
| ^^^^^ `props` cannot be modified
4 | };
5 | const indirectMutateProps = () => {
6 | mutateProps();
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.modify-state-2.expect.md
View File

@ -18,18 +18,18 @@ function Foo() {
```
Found 1 error:
Error: Mutating a value returned from 'useState()', which should not be mutated. Use the setter function to update instead
Error: This value cannot be modified
Modifying a value returned from 'useState()', which should not be modified directly. Use the setter function to update instead
error.modify-state-2.ts:6:2
4 | const [state, setState] = useState({foo: {bar: 3}});
5 | const foo = state.foo;
> 6 | foo.bar = 1;
| ^^^ Mutating a value returned from 'useState()', which should not be mutated. Use the setter function to update instead
| ^^^ This value cannot be modified
7 | return state;
8 | }
9 |
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.modify-state.expect.md
View File

@ -17,18 +17,18 @@ function Foo() {
```
Found 1 error:
Error: Mutating a value returned from 'useState()', which should not be mutated. Use the setter function to update instead
Error: This value cannot be modified
Modifying a value returned from 'useState()', which should not be modified directly. Use the setter function to update instead
error.modify-state.ts:5:2
3 | function Foo() {
4 | let [state, setState] = useState({});
> 5 | state.foo = 1;
| ^^^^^ Mutating a value returned from 'useState()', which should not be mutated. Use the setter function to update instead
| ^^^^^ This value cannot be modified
6 | return state;
7 | }
8 |
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.modify-useReducer-state.expect.md
View File

@ -17,18 +17,18 @@ function Foo() {
```
Found 1 error:
Error: Mutating a value returned from 'useReducer()', which should not be mutated. Use the dispatch function to update instead
Error: This value cannot be modified
Modifying a value returned from 'useReducer()', which should not be modified directly. Use the dispatch function to update instead
error.modify-useReducer-state.ts:5:2
3 | function Foo() {
4 | let [state, setState] = useReducer({foo: 1});
> 5 | state.foo = 1;
| ^^^^^ Mutating a value returned from 'useReducer()', which should not be mutated. Use the dispatch function to update instead
| ^^^^^ This value cannot be modified
6 | return state;
7 | }
8 |
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-function-property.expect.md
View File

@ -16,18 +16,18 @@ export function ViewModeSelector(props) {
```
Found 1 error:
Error: This mutates a variable that React considers immutable
Error: This value cannot be modified
This modifies a variable that React considers immutable
error.mutate-function-property.ts:3:2
1 | export function ViewModeSelector(props) {
2 | const renderIcon = () => <AcceptIcon />;
> 3 | renderIcon.displayName = 'AcceptIcon';
| ^^^^^^^^^^ This mutates a variable that React considers immutable
| ^^^^^^^^^^ This value cannot be modified
4 |
5 | return <Dropdown checkableIndicator={{children: renderIcon}} />;
6 | }
```

14
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-hook-argument.expect.md
View File

@ -14,28 +14,28 @@ function useHook(a, b) {
```
Found 2 errors:
Error: Mutating component props or hook arguments is not allowed. Consider using a local variable instead
Error: This value cannot be modified
Modifying component props or hook arguments is not allowed. Consider using a local variable instead
error.mutate-hook-argument.ts:2:2
1 | function useHook(a, b) {
> 2 | b.test = 1;
| ^ Mutating component props or hook arguments is not allowed. Consider using a local variable instead
| ^ This value cannot be modified
3 | a.test = 2;
4 | }
5 |
Error: This value cannot be modified
Error: Mutating component props or hook arguments is not allowed. Consider using a local variable instead
Modifying component props or hook arguments is not allowed. Consider using a local variable instead
error.mutate-hook-argument.ts:3:2
1 | function useHook(a, b) {
2 | b.test = 1;
> 3 | a.test = 2;
| ^ Mutating component props or hook arguments is not allowed. Consider using a local variable instead
| ^ This value cannot be modified
4 | }
5 |
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-property-from-global.expect.md
View File

@ -16,18 +16,18 @@ function Foo() {
```
Found 1 error:
Error: Writing to a variable defined outside a component or hook is not allowed. Consider using an effect
Error: This value cannot be modified
Modifying a variable defined outside a component or hook is not allowed. Consider using an effect
error.mutate-property-from-global.ts:4:9
2 |
3 | function Foo() {
> 4 | delete wat.foo;
| ^^^ Writing to a variable defined outside a component or hook is not allowed. Consider using an effect
| ^^^ This value cannot be modified
5 | return wat;
6 | }
7 |
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-props.expect.md
View File

@ -14,17 +14,17 @@ function Foo(props) {
```
Found 1 error:
Error: Mutating component props or hook arguments is not allowed. Consider using a local variable instead
Error: This value cannot be modified
Modifying component props or hook arguments is not allowed. Consider using a local variable instead
error.mutate-props.ts:2:2
1 | function Foo(props) {
> 2 | props.test = 1;
| ^^^^^ Mutating component props or hook arguments is not allowed. Consider using a local variable instead
| ^^^^^ This value cannot be modified
3 | return null;
4 | }
5 |
```

14
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.not-useEffect-external-mutate.expect.md
View File

@ -18,30 +18,30 @@ function Component(props) {
```
Found 2 errors:
Error: Writing to a variable defined outside a component or hook is not allowed. Consider using an effect
Error: This value cannot be modified
Modifying a variable defined outside a component or hook is not allowed. Consider using an effect
error.not-useEffect-external-mutate.ts:5:4
3 | function Component(props) {
4 | foo(() => {
> 5 | x.a = 10;
| ^ Writing to a variable defined outside a component or hook is not allowed. Consider using an effect
| ^ This value cannot be modified
6 | x.a = 20;
7 | });
8 | }
Error: This value cannot be modified
Error: Writing to a variable defined outside a component or hook is not allowed. Consider using an effect
Modifying a variable defined outside a component or hook is not allowed. Consider using an effect
error.not-useEffect-external-mutate.ts:6:4
4 | foo(() => {
5 | x.a = 10;
> 6 | x.a = 20;
| ^ Writing to a variable defined outside a component or hook is not allowed. Consider using an effect
| ^ This value cannot be modified
7 | });
8 | }
9 |
```

4
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.object-capture-global-mutation.expect.md
View File

@ -23,13 +23,13 @@ export const FIXTURE_ENTRYPOINT = {
```
Found 1 error:
Error: Writing to a variable defined outside a component or hook is not allowed. Consider using an effect
Error: Modifying a variable defined outside a component or hook is not allowed. Consider using an effect
error.object-capture-global-mutation.ts:4:4
2 | function Foo() {
3 | const x = () => {
> 4 | window.href = 'foo';
| ^^^^^^ Writing to a variable defined outside a component or hook is not allowed. Consider using an effect
| ^^^^^^ Modifying a variable defined outside a component or hook is not allowed. Consider using an effect
5 | };
6 | const y = {x};
7 | return <Bar y={y} />;

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

@ -25,18 +25,18 @@ export const FIXTURE_ENTRYPOINT = {
```
Found 1 error:
Error: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
Error: Cannot reassign variables declared outside of the component/hook
Reassigning a variable declared outside of the component/hook is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.reassign-global-fn-arg.ts:5:4
3 | export default function MyApp() {
4 | const fn = () => {
> 5 | b = 2;
| ^ Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
| ^ Cannot reassign variable
6 | };
7 | return foo(fn);
8 | }
```

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

@ -18,30 +18,30 @@ function Component() {
```
Found 2 errors:
Error: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
Error: Cannot reassign variables declared outside of the component/hook
Reassigning a variable declared outside of the component/hook is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.reassignment-to-global-indirect.ts:4:4
2 | const foo = () => {
3 | // Cannot assign to globals
> 4 | someUnknownGlobal = true;
| ^^^^^^^^^^^^^^^^^ Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
| ^^^^^^^^^^^^^^^^^ Cannot reassign variable
5 | moduleLocal = true;
6 | };
7 | foo();
Error: Cannot reassign variables declared outside of the component/hook
Error: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
Reassigning a variable declared outside of the component/hook is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.reassignment-to-global-indirect.ts:5:4
3 | // Cannot assign to globals
4 | someUnknownGlobal = true;
> 5 | moduleLocal = true;
| ^^^^^^^^^^^ Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
| ^^^^^^^^^^^ Cannot reassign variable
6 | };
7 | foo();
8 | }
```

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

@ -15,29 +15,29 @@ function Component() {
```
Found 2 errors:
Error: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
Error: Cannot reassign variables declared outside of the component/hook
Reassigning a variable declared outside of the component/hook is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.reassignment-to-global.ts:3:2
1 | function Component() {
2 | // Cannot assign to globals
> 3 | someUnknownGlobal = true;
| ^^^^^^^^^^^^^^^^^ Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
| ^^^^^^^^^^^^^^^^^ Cannot reassign variable
4 | moduleLocal = true;
5 | }
6 |
Error: Cannot reassign variables declared outside of the component/hook
Error: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
Reassigning a variable declared outside of the component/hook is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.reassignment-to-global.ts:4:2
2 | // Cannot assign to globals
3 | someUnknownGlobal = true;
> 4 | moduleLocal = true;
| ^^^^^^^^^^^ Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
| ^^^^^^^^^^^ Cannot reassign variable
5 | }
6 |
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.store-property-in-global.expect.md
View File

@ -16,18 +16,18 @@ function Foo() {
```
Found 1 error:
Error: Writing to a variable defined outside a component or hook is not allowed. Consider using an effect
Error: This value cannot be modified
Modifying a variable defined outside a component or hook is not allowed. Consider using an effect
error.store-property-in-global.ts:4:2
2 |
3 | function Foo() {
> 4 | wat.test = 1;
| ^^^ Writing to a variable defined outside a component or hook is not allowed. Consider using an effect
| ^^^ This value cannot be modified
5 | return wat;
6 | }
7 |
```

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

@ -20,18 +20,18 @@ export const FIXTURE_ENTRYPOINT = {
```
Found 1 error:
Error: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
Error: Cannot reassign variables declared outside of the component/hook
Reassigning a variable declared outside of the component/hook is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.update-global-should-bailout.ts:3:2
1 | let renderCount = 0;
2 | function useFoo() {
> 3 | renderCount += 1;
| ^^^^^^^^^^^^^^^^ Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
| ^^^^^^^^^^^^^^^^ Cannot reassign variable
4 | return renderCount;
5 | }
6 |
```

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

@ -48,7 +48,7 @@ export const FIXTURE_ENTRYPOINT = {
## Logs
```
{"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":{"reason":"Updating a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the mutation before calling useEffect()","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":10,"column":2,"index":365},"end":{"line":10,"column":5,"index":368},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"}}}}
{"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":{"severity":"InvalidReact","category":"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":"This value cannot be modified"}]}}}
{"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"}]}
{"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}
```

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

@ -47,7 +47,7 @@ export const FIXTURE_ENTRYPOINT = {
## Logs
```
{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":158},"end":{"line":11,"column":1,"index":331},"filename":"mutate-after-useeffect-ref-access.ts"},"detail":{"options":{"reason":"Mutating component props or hook arguments is not allowed. Consider using a local variable instead","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":9,"column":2,"index":289},"end":{"line":9,"column":16,"index":303},"filename":"mutate-after-useeffect-ref-access.ts"}}}}
{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":158},"end":{"line":11,"column":1,"index":331},"filename":"mutate-after-useeffect-ref-access.ts"},"detail":{"options":{"severity":"InvalidReact","category":"This value cannot be modified","description":"Modifying component props or hook arguments is not allowed. Consider using a local variable instead","details":[{"kind":"error","loc":{"start":{"line":9,"column":2,"index":289},"end":{"line":9,"column":16,"index":303},"filename":"mutate-after-useeffect-ref-access.ts"},"message":"This value cannot be modified"}]}}}
{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":8,"column":2,"index":237},"end":{"line":8,"column":50,"index":285},"filename":"mutate-after-useeffect-ref-access.ts"},"decorations":[{"start":{"line":8,"column":24,"index":259},"end":{"line":8,"column":30,"index":265},"filename":"mutate-after-useeffect-ref-access.ts","identifierName":"arrRef"}]}
{"kind":"CompileSuccess","fnLoc":{"start":{"line":6,"column":0,"index":158},"end":{"line":11,"column":1,"index":331},"filename":"mutate-after-useeffect-ref-access.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
```

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

@ -47,7 +47,7 @@ export const FIXTURE_ENTRYPOINT = {
## Logs
```
{"kind":"CompileError","fnLoc":{"start":{"line":4,"column":0,"index":111},"end":{"line":11,"column":1,"index":242},"filename":"mutate-after-useeffect.ts"},"detail":{"options":{"reason":"Updating a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the mutation before calling useEffect()","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":9,"column":2,"index":214},"end":{"line":9,"column":5,"index":217},"filename":"mutate-after-useeffect.ts","identifierName":"arr"}}}}
{"kind":"CompileError","fnLoc":{"start":{"line":4,"column":0,"index":111},"end":{"line":11,"column":1,"index":242},"filename":"mutate-after-useeffect.ts"},"detail":{"options":{"severity":"InvalidReact","category":"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":"This value cannot be modified"}]}}}
{"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"}]}
{"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}
```

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

@ -54,7 +54,7 @@ export const FIXTURE_ENTRYPOINT = {
## Logs
```
{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":195},"end":{"line":14,"column":1,"index":409},"filename":"retry-no-emit.ts"},"detail":{"options":{"reason":"Updating a value previously passed as an argument to a hook is not allowed. Consider moving the mutation before calling the hook","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":12,"column":2,"index":372},"end":{"line":12,"column":6,"index":376},"filename":"retry-no-emit.ts","identifierName":"arr2"}}}}
{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":195},"end":{"line":14,"column":1,"index":409},"filename":"retry-no-emit.ts"},"detail":{"options":{"severity":"InvalidReact","category":"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":"This value cannot be modified"}]}}}
{"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"}]}
{"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"}]}
{"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}

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

@ -18,48 +18,42 @@ function Component() {
```
Found 3 errors:
Error: Calling an impure function can produce unstable results. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent)
Error: Cannot call impure function during render
`Date.now` is an impure function whose results may change on every call.
`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)
error.invalid-impure-functions-in-render.ts:4:15
2 |
3 | function Component() {
> 4 | const date = Date.now();
| ^^^^^^^^^^ Calling an impure function can produce unstable results. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent)
| ^^^^^^^^^^ Cannot call impure function
5 | const now = performance.now();
6 | const rand = Math.random();
7 | return <Foo date={date} now={now} rand={rand} />;
Error: Cannot call impure function during render
Error: Calling an impure function can produce unstable results. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent)
`performance.now` is an impure function whose results may change on every call.
`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)
error.invalid-impure-functions-in-render.ts:5:14
3 | function Component() {
4 | const date = Date.now();
> 5 | const now = performance.now();
| ^^^^^^^^^^^^^^^^^ Calling an impure function can produce unstable results. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent)
| ^^^^^^^^^^^^^^^^^ Cannot call impure function
6 | const rand = Math.random();
7 | return <Foo date={date} now={now} rand={rand} />;
8 | }
Error: Cannot call impure function during render
Error: Calling an impure function can produce unstable results. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent)
`Math.random` is an impure function whose results may change on every call.
`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)
error.invalid-impure-functions-in-render.ts:6:15
4 | const date = Date.now();
5 | const now = performance.now();
> 6 | const rand = Math.random();
| ^^^^^^^^^^^^^ Calling an impure function can produce unstable results. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent)
| ^^^^^^^^^^^^^ Cannot call impure function
7 | return <Foo date={date} now={now} rand={rand} />;
8 | }
9 |
```

17
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-referencing-frozen-hoisted-storecontext-const.expect.md
View File

@ -31,35 +31,28 @@ function Component({content, refetch}) {
## Error
```
Found 2 errors:
Error: This variable is accessed before it is declared, which may prevent it from updating as the assigned value changes over time
Found 1 error:
Error: Cannot access variable before it is declared
Variable `data` is accessed before it is declared.
Variable `data` is accessed before it is declared, which prevents the earlier access from updating when this value changes over time
undefined:11:12
9 | // TDZ violation!
10 | const onRefetch = useCallback(() => {
> 11 | refetch(data);
| ^^^^ This variable is accessed before it is declared, which may prevent it from updating as the assigned value changes over time
| ^^^^ Variable accessed before it is declared
12 | }, [refetch]);
13 |
14 | // The context variable gets frozen here since it's passed to a hook
Error: This variable is accessed before it is declared, which prevents the earlier access from updating when this value changes over time
Variable `data` is accessed before it is declared.
undefined:19:9
17 | // This has to error: onRefetch needs to memoize with `content` as a
18 | // dependency, but the dependency comes later
> 19 | const {data = null} = content;
| ^^^^^^^^^^^ This variable is accessed before it is declared, which prevents the earlier access from updating when this value changes over time
| ^^^^^^^^^^^ The variable is declared here
20 |
21 | return <Foo data={data} onSubmit={onSubmit} />;
22 | }
```

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.mutate-frozen-value.expect.md
View File

@ -17,18 +17,18 @@ function Component({a, b}) {
```
Found 1 error:
Error: Updating a value previously passed as an argument to a hook is not allowed. Consider moving the mutation before calling the hook
Error: This value cannot be modified
Modifying a value previously passed as an argument to a hook is not allowed. Consider moving the modification before calling the hook
error.mutate-frozen-value.ts:5:2
3 | const x = {a};
4 | useFreeze(x);
> 5 | x.y = true;
| ^ Updating a value previously passed as an argument to a hook is not allowed. Consider moving the mutation before calling the hook
| ^ This value cannot be modified
6 | return <div>error</div>;
7 | }
8 |
```

14
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.mutate-hook-argument.expect.md
View File

@ -15,29 +15,29 @@ function useHook(a, b) {
```
Found 2 errors:
Error: Mutating component props or hook arguments is not allowed. Consider using a local variable instead
Error: This value cannot be modified
Modifying component props or hook arguments is not allowed. Consider using a local variable instead
error.mutate-hook-argument.ts:3:2
1 | // @enableNewMutationAliasingModel
2 | function useHook(a, b) {
> 3 | b.test = 1;
| ^ Mutating component props or hook arguments is not allowed. Consider using a local variable instead
| ^ This value cannot be modified
4 | a.test = 2;
5 | }
6 |
Error: This value cannot be modified
Error: Mutating component props or hook arguments is not allowed. Consider using a local variable instead
Modifying component props or hook arguments is not allowed. Consider using a local variable instead
error.mutate-hook-argument.ts:4:2
2 | function useHook(a, b) {
3 | b.test = 1;
> 4 | a.test = 2;
| ^ Mutating component props or hook arguments is not allowed. Consider using a local variable instead
| ^ This value cannot be modified
5 | }
6 |
```

14
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.not-useEffect-external-mutate.expect.md
View File

@ -19,30 +19,30 @@ function Component(props) {
```
Found 2 errors:
Error: Writing to a variable defined outside a component or hook is not allowed. Consider using an effect
Error: This value cannot be modified
Modifying a variable defined outside a component or hook is not allowed. Consider using an effect
error.not-useEffect-external-mutate.ts:6:4
4 | function Component(props) {
5 | foo(() => {
> 6 | x.a = 10;
| ^ Writing to a variable defined outside a component or hook is not allowed. Consider using an effect
| ^ This value cannot be modified
7 | x.a = 20;
8 | });
9 | }
Error: This value cannot be modified
Error: Writing to a variable defined outside a component or hook is not allowed. Consider using an effect
Modifying a variable defined outside a component or hook is not allowed. Consider using an effect
error.not-useEffect-external-mutate.ts:7:4
5 | foo(() => {
6 | x.a = 10;
> 7 | x.a = 20;
| ^ Writing to a variable defined outside a component or hook is not allowed. Consider using an effect
| ^ This value cannot be modified
8 | });
9 | }
10 |
```

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

@ -19,30 +19,30 @@ function Component() {
```
Found 2 errors:
Error: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
Error: Cannot reassign variables declared outside of the component/hook
Reassigning a variable declared outside of the component/hook is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.reassignment-to-global-indirect.ts:5:4
3 | const foo = () => {
4 | // Cannot assign to globals
> 5 | someUnknownGlobal = true;
| ^^^^^^^^^^^^^^^^^ Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
| ^^^^^^^^^^^^^^^^^ Cannot reassign variable
6 | moduleLocal = true;
7 | };
8 | foo();
Error: Cannot reassign variables declared outside of the component/hook
Error: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
Reassigning a variable declared outside of the component/hook is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.reassignment-to-global-indirect.ts:6:4
4 | // Cannot assign to globals
5 | someUnknownGlobal = true;
> 6 | moduleLocal = true;
| ^^^^^^^^^^^ Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
| ^^^^^^^^^^^ Cannot reassign variable
7 | };
8 | foo();
9 | }
```

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

@ -16,29 +16,29 @@ function Component() {
```
Found 2 errors:
Error: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
Error: Cannot reassign variables declared outside of the component/hook
Reassigning a variable declared outside of the component/hook is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.reassignment-to-global.ts:4:2
2 | function Component() {
3 | // Cannot assign to globals
> 4 | someUnknownGlobal = true;
| ^^^^^^^^^^^^^^^^^ Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
| ^^^^^^^^^^^^^^^^^ Cannot reassign variable
5 | moduleLocal = true;
6 | }
7 |
Error: Cannot reassign variables declared outside of the component/hook
Error: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
Reassigning a variable declared outside of the component/hook is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.reassignment-to-global.ts:5:2
3 | // Cannot assign to globals
4 | someUnknownGlobal = true;
> 5 | moduleLocal = true;
| ^^^^^^^^^^^ Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
| ^^^^^^^^^^^ Cannot reassign variable
6 | }
7 |
```

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

@ -48,7 +48,7 @@ export const FIXTURE_ENTRYPOINT = {
## Logs
```
{"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":{"reason":"Updating a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the mutation before calling useEffect()","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":10,"column":2,"index":397},"end":{"line":10,"column":5,"index":400},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"}}}}
{"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":{"severity":"InvalidReact","category":"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":"This value cannot be modified"}]}}}
{"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"}]}
{"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}
```

2
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-ref-access.expect.md
View File

@ -47,7 +47,7 @@ export const FIXTURE_ENTRYPOINT = {
## Logs
```
{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":190},"end":{"line":11,"column":1,"index":363},"filename":"mutate-after-useeffect-ref-access.ts"},"detail":{"options":{"reason":"Mutating component props or hook arguments is not allowed. Consider using a local variable instead","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":9,"column":2,"index":321},"end":{"line":9,"column":16,"index":335},"filename":"mutate-after-useeffect-ref-access.ts"}}}}
{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":190},"end":{"line":11,"column":1,"index":363},"filename":"mutate-after-useeffect-ref-access.ts"},"detail":{"options":{"severity":"InvalidReact","category":"This value cannot be modified","description":"Modifying component props or hook arguments is not allowed. Consider using a local variable instead","details":[{"kind":"error","loc":{"start":{"line":9,"column":2,"index":321},"end":{"line":9,"column":16,"index":335},"filename":"mutate-after-useeffect-ref-access.ts"},"message":"This value cannot be modified"}]}}}
{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":8,"column":2,"index":269},"end":{"line":8,"column":50,"index":317},"filename":"mutate-after-useeffect-ref-access.ts"},"decorations":[{"start":{"line":8,"column":24,"index":291},"end":{"line":8,"column":30,"index":297},"filename":"mutate-after-useeffect-ref-access.ts","identifierName":"arrRef"}]}
{"kind":"CompileSuccess","fnLoc":{"start":{"line":6,"column":0,"index":190},"end":{"line":11,"column":1,"index":363},"filename":"mutate-after-useeffect-ref-access.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
```

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

@ -47,7 +47,7 @@ export const FIXTURE_ENTRYPOINT = {
## Logs
```
{"kind":"CompileError","fnLoc":{"start":{"line":4,"column":0,"index":143},"end":{"line":11,"column":1,"index":274},"filename":"mutate-after-useeffect.ts"},"detail":{"options":{"reason":"Updating a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the mutation before calling useEffect()","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":9,"column":2,"index":246},"end":{"line":9,"column":5,"index":249},"filename":"mutate-after-useeffect.ts","identifierName":"arr"}}}}
{"kind":"CompileError","fnLoc":{"start":{"line":4,"column":0,"index":143},"end":{"line":11,"column":1,"index":274},"filename":"mutate-after-useeffect.ts"},"detail":{"options":{"severity":"InvalidReact","category":"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":"This value cannot be modified"}]}}}
{"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"}]}
{"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}
```

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

@ -54,7 +54,7 @@ export const FIXTURE_ENTRYPOINT = {
## Logs
```
{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":227},"end":{"line":14,"column":1,"index":441},"filename":"retry-no-emit.ts"},"detail":{"options":{"reason":"Updating a value previously passed as an argument to a hook is not allowed. Consider moving the mutation before calling the hook","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":12,"column":2,"index":404},"end":{"line":12,"column":6,"index":408},"filename":"retry-no-emit.ts","identifierName":"arr2"}}}}
{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":227},"end":{"line":14,"column":1,"index":441},"filename":"retry-no-emit.ts"},"detail":{"options":{"severity":"InvalidReact","category":"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":"This value cannot be modified"}]}}}
{"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"}]}
{"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"}]}
{"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}