Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge 0e7ab749d2 into sapling-pr-archive-josephsavona

Browse Source
This commit is contained in:
Joseph Savona
2025-07-11 09:53:52 -07:00
committed by GitHub
parent bc36001f5b 0e7ab749d2
commit 724ef382b1
77 changed files with 204 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files
compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
+5 -8
View File
@@ -107,10 +107,9 @@ export function lower(
if (binding.kind !== 'Identifier') {
builder.errors.pushDiagnostic(
CompilerDiagnostic.create({
category: 'Could not find binding',
description: `[BuildHIR] Could not find binding for param \`${param.node.name}\``,
severity: ErrorSeverity.Invariant,
suggestions: null,
category: 'Could not find binding',
description: `[BuildHIR] Could not find binding for param \`${param.node.name}\`.`,
}).withDetail({
kind: 'error',
loc: param.node.loc ?? null,
@@ -172,10 +171,9 @@ export function lower(
} else {
builder.errors.pushDiagnostic(
CompilerDiagnostic.create({
category: `Handle ${param.node.type} parameters`,
description: `[BuildHIR] Add support for ${param.node.type} parameters`,
severity: ErrorSeverity.Todo,
suggestions: null,
category: `Handle ${param.node.type} parameters`,
description: `[BuildHIR] Add support for ${param.node.type} parameters.`,
}).withDetail({
kind: 'error',
loc: param.node.loc ?? null,
@@ -205,8 +203,7 @@ export function lower(
CompilerDiagnostic.create({
severity: ErrorSeverity.InvalidJS,
category: `Unexpected function body kind`,
description: `Expected function body to be an expression or a block statement, got \`${body.type}\``,
suggestions: null,
description: `Expected function body to be an expression or a block statement, got \`${body.type}\`.`,
}).withDetail({
kind: 'error',
loc: body.node.loc ?? null,
compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts
+19 -22
View File
@@ -447,23 +447,22 @@ function applySignature(
reason: value.reason,
context: new Set(),
});
const message =
const variable =
effect.value.identifier.name !== null &&
effect.value.identifier.name.kind === 'named'
? `\`${effect.value.identifier.name.value}\` cannot be modified`
: 'This value cannot be modified';
? `\`${effect.value.identifier.name.value}\``
: 'value';
effects.push({
kind: 'MutateFrozen',
place: effect.value,
error: CompilerDiagnostic.create({
severity: ErrorSeverity.InvalidReact,
category: 'This value cannot be modified',
description: reason,
suggestions: null,
description: `${reason}.`,
}).withDetail({
kind: 'error',
loc: effect.value.loc,
message,
message: `${variable} cannot be modified`,
}),
});
}
@@ -1018,30 +1017,30 @@ function applyEffect(
effect.value.identifier.declarationId,
)
) {
const description =
const variable =
effect.value.identifier.name !== null &&
effect.value.identifier.name.kind === 'named'
? `Variable \`${effect.value.identifier.name.value}\``
: 'This variable';
? `\`${effect.value.identifier.name.value}\``
: null;
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`,
description: `${variable ?? 'This variable'} 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) {
diagnostic.withDetail({
kind: 'error',
loc: hoistedAccess.loc,
message: 'Variable accessed before it is declared',
message: `${variable ?? 'variable'} accessed before it is declared`,
});
}
diagnostic.withDetail({
kind: 'error',
loc: effect.value.loc,
message: 'The variable is declared here',
message: `${variable ?? 'variable'} is declared here`,
});
applyEffect(
@@ -1061,11 +1060,11 @@ function applyEffect(
reason: value.reason,
context: new Set(),
});
const message =
const variable =
effect.value.identifier.name !== null &&
effect.value.identifier.name.kind === 'named'
? `\`${effect.value.identifier.name.value}\` cannot be modified`
: 'This value cannot be modified';
? `\`${effect.value.identifier.name.value}\``
: 'value';
applyEffect(
context,
state,
@@ -1078,11 +1077,11 @@ function applyEffect(
error: CompilerDiagnostic.create({
severity: ErrorSeverity.InvalidReact,
category: 'This value cannot be modified',
description: reason,
description: `${reason}.`,
}).withDetail({
kind: 'error',
loc: effect.value.loc,
message,
message: `${variable} cannot be modified`,
}),
},
initialized,
@@ -1987,6 +1986,7 @@ function computeSignatureForInstruction(
break;
}
case 'StoreGlobal': {
const variable = `\`${value.name}\``;
effects.push({
kind: 'MutateGlobal',
place: value.value,
@@ -1994,13 +1994,11 @@ function computeSignatureForInstruction(
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,
description: `Variable ${variable} is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)`,
}).withDetail({
kind: 'error',
loc: instr.loc,
message: 'Cannot reassign variable',
message: `${variable} cannot be reassigned`,
}),
});
effects.push({kind: 'Assign', from: value.value, into: lvalue});
@@ -2099,7 +2097,6 @@ function computeEffectsForLegacySignature(
? `\`${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,
compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateLocalsNotReassignedAfterRender.ts
+8 -3
View File
@@ -29,15 +29,20 @@ export function validateLocalsNotReassignedAfterRender(fn: HIRFunction): void {
);
if (reassignment !== null) {
const errors = new CompilerError();
const variable =
reassignment.identifier.name != null &&
reassignment.identifier.name.kind === 'named'
? `\`${reassignment.identifier.name.value}\``
: 'variable';
errors.pushDiagnostic(
CompilerDiagnostic.create({
severity: ErrorSeverity.InvalidReact,
category: 'Cannot reassign a variable after render completes',
description: `Reassigning ${reassignment.identifier.name != null && reassignment.identifier.name.kind === 'named' ? `variable \`${reassignment.identifier.name.value}\`` : 'a variable'} after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead`,
category: 'Cannot reassign variable after render completes',
description: `Reassigning ${variable} after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.`,
}).withDetail({
kind: 'error',
loc: reassignment.loc,
message: 'Cannot reassign variable after render completes',
message: `Cannot reassign ${variable} after render completes`,
}),
);
throw errors;
compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoFreezingKnownMutableFunctions.ts
+10 -4
View File
@@ -57,22 +57,28 @@ export function validateNoFreezingKnownMutableFunctions(
if (operand.effect === Effect.Freeze) {
const effect = contextMutationEffects.get(operand.identifier.id);
if (effect != null) {
const place = [...effect.places][0];
const variable =
place != null &&
place.identifier.name != null &&
place.identifier.name.kind === 'named'
? `\`${place.identifier.name.value}\``
: 'a local variable';
errors.pushDiagnostic(
CompilerDiagnostic.create({
severity: ErrorSeverity.InvalidReact,
category: 'Cannot modify local variables after render completes',
description: `This argument is a function which may reassign or mutate local variables after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead`,
description: `This argument is a function which may reassign or mutate ${variable} after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.`,
})
.withDetail({
kind: 'error',
loc: operand.loc,
message:
'This function may (indirectly) reassign or modify local variables after render',
message: `This function may (indirectly) reassign or modify ${variable} after render`,
})
.withDetail({
kind: 'error',
loc: effect.loc,
message: 'This modifies a local variable',
message: `This modifies ${variable}`,
}),
);
}
compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts
+3 -3
View File
@@ -82,7 +82,7 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> {
}).withDetail({
kind: 'error',
loc,
message: '',
message: 'Callbacks with parameters are not supported',
}),
);
}
@@ -92,9 +92,9 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> {
CompilerDiagnostic.create({
severity: ErrorSeverity.InvalidReact,
category:
'useMemo callbacks may not be async or generator functions',
'useMemo() callbacks may not be async or generator functions',
description:
'useMemo() callbacks are called once and must synchronously return a value',
'useMemo() callbacks are called once and must synchronously return a value.',
suggestions: null,
}).withDetail({
kind: 'error',
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-component-tag-function.expect.md
+2 -2
View File
@@ -18,13 +18,13 @@ function Component() {
Found 1 error:
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)
Variable `someGlobal` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.assign-global-in-component-tag-function.ts:3:4
1 | function Component() {
2 | const Foo = () => {
> 3 | someGlobal = true;
| ^^^^^^^^^^ Cannot reassign variable
| ^^^^^^^^^^ `someGlobal` cannot be reassigned
4 | };
5 | return <Foo />;
6 | }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-children.expect.md
+2 -2
View File
@@ -21,13 +21,13 @@ function Component() {
Found 1 error:
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)
Variable `someGlobal` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.assign-global-in-jsx-children.ts:3:4
1 | function Component() {
2 | const foo = () => {
> 3 | someGlobal = true;
| ^^^^^^^^^^ Cannot reassign variable
| ^^^^^^^^^^ `someGlobal` cannot be reassigned
4 | };
5 | // Children are generally access/called during render, so
6 | // modifying a global in a children function is almost
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-old-inference-false-positive-ref-validation-in-use-effect.expect.md
+2 -2
View File
@@ -39,7 +39,7 @@ function Component() {
Found 1 error:
Error: Cannot modify local variables after render completes
This argument is a function which may reassign or mutate local variables after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead
This argument is a function which may reassign or mutate a local variable after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.
error.bug-old-inference-false-positive-ref-validation-in-use-effect.ts:20:12
18 | );
@@ -53,7 +53,7 @@ error.bug-old-inference-false-positive-ref-validation-in-use-effect.ts:20:12
> 23 | }
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 24 | }, [update]);
| ^^^^ This function may (indirectly) reassign or modify local variables after render
| ^^^^ This function may (indirectly) reassign or modify a local variable after render
25 |
26 | return 'ok';
27 | }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.context-variable-only-chained-assign.expect.md
+3 -3
View File
@@ -29,15 +29,15 @@ export const FIXTURE_ENTRYPOINT = {
```
Found 1 error:
Error: Cannot reassign a variable after render completes
Error: Cannot reassign variable after render completes
Reassigning variable `x` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead
Reassigning `x` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.
error.context-variable-only-chained-assign.ts:10:19
8 | };
9 | const fn2 = () => {
> 10 | const copy2 = (x = 4);
| ^ Cannot reassign variable after render completes
| ^ Cannot reassign `x` after render completes
11 | return [invoke(fn1), copy2, identity(copy2)];
12 | };
13 | return invoke(fn2);
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.declare-reassign-variable-in-function-declaration.expect.md
+3 -3
View File
@@ -18,15 +18,15 @@ function Component() {
```
Found 1 error:
Error: Cannot reassign a variable after render completes
Error: Cannot reassign variable after render completes
Reassigning variable `x` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead
Reassigning `x` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.
error.declare-reassign-variable-in-function-declaration.ts:4:4
2 | let x = null;
3 | function foo() {
> 4 | x = 9;
| ^ Cannot reassign variable after render completes
| ^ Cannot reassign `x` after render completes
5 | }
6 | const y = bar(foo);
7 | return <Child y={y} />;
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.function-expression-references-variable-its-assigned-to.expect.md
+3 -3
View File
@@ -16,15 +16,15 @@ function Component() {
```
Found 1 error:
Error: Cannot reassign a variable after render completes
Error: Cannot reassign variable after render completes
Reassigning variable `callback` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead
Reassigning `callback` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.
error.function-expression-references-variable-its-assigned-to.ts:3:4
1 | function Component() {
2 | let callback = () => {
> 3 | callback = null;
| ^^^^^^^^ Cannot reassign variable after render completes
| ^^^^^^^^ Cannot reassign `callback` after render completes
4 | };
5 | return <div onClick={callback} />;
6 | }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-call-freezes-captured-identifier.expect.md
+2 -2
View File
@@ -32,13 +32,13 @@ export const FIXTURE_ENTRYPOINT = {
Found 1 error:
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
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;
| ^ This value cannot be modified
| ^ value cannot be modified
14 | return <Stringify x={x} cb={cb} />;
15 | }
16 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-call-freezes-captured-memberexpr.expect.md
+2 -2
View File
@@ -32,13 +32,13 @@ export const FIXTURE_ENTRYPOINT = {
Found 1 error:
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
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;
| ^ This value cannot be modified
| ^ value cannot be modified
14 | return <Stringify x={x} cb={cb} />;
15 | }
16 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ReactUseMemo-async-callback.expect.md
+2 -2
View File
@@ -16,9 +16,9 @@ function component(a, b) {
```
Found 1 error:
Error: useMemo callbacks may not be async or generator functions
Error: useMemo() callbacks may not be async or generator functions
useMemo() callbacks are called once and must synchronously return a value
useMemo() callbacks are called once and must synchronously return a value.
error.invalid-ReactUseMemo-async-callback.ts:2:24
1 | function component(a, b) {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-array-push-frozen.expect.md
+2 -2
View File
@@ -18,13 +18,13 @@ function Component(props) {
Found 1 error:
Error: This value cannot be modified
Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX
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);
| ^ This value cannot be modified
| ^ value cannot be modified
5 | return x;
6 | }
7 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-computed-store-to-frozen-value.expect.md
+2 -2
View File
@@ -19,13 +19,13 @@ function Component(props) {
Found 1 error:
Error: This value cannot be modified
Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX
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;
| ^ This value cannot be modified
| ^ value cannot be modified
6 | return x;
7 | }
8 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-delete-computed-property-of-frozen-value.expect.md
+2 -2
View File
@@ -19,13 +19,13 @@ function Component(props) {
Found 1 error:
Error: This value cannot be modified
Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX
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];
| ^ This value cannot be modified
| ^ value cannot be modified
6 | return x;
7 | }
8 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-delete-property-of-frozen-value.expect.md
+2 -2
View File
@@ -19,13 +19,13 @@ function Component(props) {
Found 1 error:
Error: This value cannot be modified
Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX
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;
| ^ This value cannot be modified
| ^ value cannot be modified
6 | return x;
7 | }
8 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-destructure-assignment-to-global.expect.md
+2 -2
View File
@@ -16,12 +16,12 @@ function useFoo(props) {
Found 1 error:
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)
Variable `x` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.invalid-destructure-assignment-to-global.ts:2:3
1 | function useFoo(props) {
> 2 | [x] = props;
| ^ Cannot reassign variable
| ^ `x` cannot be reassigned
3 | return {x};
4 | }
5 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-destructure-to-local-global-variables.expect.md
+2 -2
View File
@@ -18,13 +18,13 @@ function Component(props) {
Found 1 error:
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)
Variable `b` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.invalid-destructure-to-local-global-variables.ts:3:6
1 | function Component(props) {
2 | let a;
> 3 | [a, b] = props.value;
| ^ Cannot reassign variable
| ^ `b` cannot be reassigned
4 |
5 | return [a, b];
6 | }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-function-expression-mutates-immutable-value.expect.md
+1 -1
View File
@@ -21,7 +21,7 @@ function Component(props) {
Found 1 error:
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
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 => {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-global-reassignment-indirect.expect.md
+2 -2
View File
@@ -38,13 +38,13 @@ export const FIXTURE_ENTRYPOINT = {
Found 1 error:
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)
Variable `someGlobal` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.invalid-global-reassignment-indirect.ts:9:4
7 |
8 | const setGlobal = () => {
> 9 | someGlobal = true;
| ^^^^^^^^^^ Cannot reassign variable
| ^^^^^^^^^^ `someGlobal` cannot be reassigned
10 | };
11 | const indirectSetGlobal = () => {
12 | setGlobal();
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-hoisting-setstate.expect.md
+3 -3
View File
@@ -41,13 +41,13 @@ export const FIXTURE_ENTRYPOINT = {
Found 1 error:
Error: Cannot access variable 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
`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), []);
| ^^^^^^^^ Variable accessed before it is declared
| ^^^^^^^^ `setState` accessed before it is declared
20 |
21 | const [state, setState] = useState(0);
22 | return <Stringify state={state} />;
@@ -56,7 +56,7 @@ error.invalid-hoisting-setstate.ts:21:16
19 | useEffect(() => setState(2), []);
20 |
> 21 | const [state, setState] = useState(0);
| ^^^^^^^^ The variable is declared here
| ^^^^^^^^ `setState` is declared here
22 | return <Stringify state={state} />;
23 | }
24 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-hook-function-argument-mutates-local-variable.expect.md
+3 -3
View File
@@ -20,7 +20,7 @@ function useFoo() {
Found 1 error:
Error: Cannot modify local variables after render completes
This argument is a function which may reassign or mutate local variables after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead
This argument is a function which may reassign or mutate `cache` after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.
error.invalid-hook-function-argument-mutates-local-variable.ts:5:10
3 | function useFoo() {
@@ -30,7 +30,7 @@ error.invalid-hook-function-argument-mutates-local-variable.ts:5:10
> 6 | cache.set('key', 'value');
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 7 | });
| ^^^^ This function may (indirectly) reassign or modify local variables after render
| ^^^^ This function may (indirectly) reassign or modify `cache` after render
8 | }
9 |
@@ -38,7 +38,7 @@ error.invalid-hook-function-argument-mutates-local-variable.ts:6:4
4 | const cache = new Map();
5 | useHook(() => {
> 6 | cache.set('key', 'value');
| ^^^^^ This modifies a local variable
| ^^^^^ This modifies `cache`
7 | });
8 | }
9 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-jsx-captures-context-variable.expect.md
+1 -1
View File
@@ -53,7 +53,7 @@ export const FIXTURE_ENTRYPOINT = {
Found 1 error:
Error: This value cannot be modified
Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX
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 | />
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-after-aliased-freeze.expect.md
+2 -2
View File
@@ -28,13 +28,13 @@ function Component(props) {
Found 1 error:
Error: This value cannot be modified
Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX
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);
| ^ This value cannot be modified
| ^ value cannot be modified
14 |
15 | return <Component x={x} y={y} />;
16 | }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-after-freeze.expect.md
+2 -2
View File
@@ -22,13 +22,13 @@ function Component(props) {
Found 1 error:
Error: This value cannot be modified
Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX
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);
| ^ This value cannot be modified
| ^ value cannot be modified
8 |
9 | return <div>{_}</div>;
10 | }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-context-in-callback.expect.md
+1 -1
View File
@@ -27,7 +27,7 @@ function Component(props) {
Found 1 error:
Error: This value cannot be modified
Modifying a value returned from 'useContext()' is not allowed.
Modifying a value returned from 'useContext()' is not allowed..
error.invalid-mutate-context-in-callback.ts:12:4
10 | // independently
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-context.expect.md
+2 -2
View File
@@ -17,13 +17,13 @@ function Component(props) {
Found 1 error:
Error: This value cannot be modified
Modifying a value returned from 'useContext()' is not allowed.
Modifying a value returned from 'useContext()' is not allowed..
error.invalid-mutate-context.ts:3:2
1 | function Component(props) {
2 | const context = useContext(FooContext);
> 3 | context.value = props.value;
| ^^^^^^^ This value cannot be modified
| ^^^^^^^ value cannot be modified
4 | return context.value;
5 | }
6 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-props-in-effect-fixpoint.expect.md
+1 -1
View File
@@ -28,7 +28,7 @@ function Component(props) {
Found 1 error:
Error: This value cannot be modified
Modifying 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.invalid-mutate-props-in-effect-fixpoint.ts:10:4
8 | let y = x;
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-props-via-for-of-iterator.expect.md
+2 -2
View File
@@ -20,13 +20,13 @@ function Component(props) {
Found 1 error:
Error: This value cannot be modified
Modifying 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.invalid-mutate-props-via-for-of-iterator.ts:4:4
2 | const items = [];
3 | for (const x of props.items) {
> 4 | x.modified = true;
| ^ This value cannot be modified
| ^ value cannot be modified
5 | items.push(x);
6 | }
7 | return items;
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutation-in-closure.expect.md
+1 -1
View File
@@ -19,7 +19,7 @@ function useInvalidMutation(options) {
Found 1 error:
Error: This value cannot be modified
Modifying 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.invalid-mutation-in-closure.ts:4:4
2 | function test() {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutation-of-possible-props-phi-indirect.expect.md
+1 -1
View File
@@ -22,7 +22,7 @@ function Component(props) {
Found 1 error:
Error: This value cannot be modified
Modifying 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.invalid-mutation-of-possible-props-phi-indirect.ts:4:4
2 | let x = cond ? someGlobal : props.foo;
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-nested-function-reassign-local-variable-in-effect.expect.md
+3 -3
View File
@@ -47,15 +47,15 @@ function Component() {
```
Found 1 error:
Error: Cannot reassign a variable after render completes
Error: Cannot reassign variable after render completes
Reassigning variable `local` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead
Reassigning `local` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.
error.invalid-nested-function-reassign-local-variable-in-effect.ts:7:6
5 | // Create the reassignment function inside another function, then return it
6 | const reassignLocal = newValue => {
> 7 | local = newValue;
| ^^^^^ Cannot reassign variable after render completes
| ^^^^^ Cannot reassign `local` after render completes
8 | };
9 | return reassignLocal;
10 | };
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-non-imported-reanimated-shared-value-writes.expect.md
+1 -1
View File
@@ -27,7 +27,7 @@ function SomeComponent() {
Found 1 error:
Error: This value cannot be modified
Modifying a value returned from a hook is not allowed. Consider moving the modification into the hook where the value is constructed
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 (
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-mutable-function-as-prop.expect.md
+3 -3
View File
@@ -20,13 +20,13 @@ function Component() {
Found 1 error:
Error: Cannot modify local variables after render completes
This argument is a function which may reassign or mutate local variables after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead
This argument is a function which may reassign or mutate `cache` after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.
error.invalid-pass-mutable-function-as-prop.ts:7:18
5 | cache.set('key', 'value');
6 | };
> 7 | return <Foo fn={fn} />;
| ^^ This function may (indirectly) reassign or modify local variables after render
| ^^ This function may (indirectly) reassign or modify `cache` after render
8 | }
9 |
@@ -34,7 +34,7 @@ error.invalid-pass-mutable-function-as-prop.ts:5:4
3 | const cache = new Map();
4 | const fn = () => {
> 5 | cache.set('key', 'value');
| ^^^^^ This modifies a local variable
| ^^^^^ This modifies `cache`
6 | };
7 | return <Foo fn={fn} />;
8 | }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-prop-mutation-indirect.expect.md
+1 -1
View File
@@ -21,7 +21,7 @@ function Component(props) {
Found 1 error:
Error: This value cannot be modified
Modifying 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.invalid-prop-mutation-indirect.ts:3:4
1 | function Component(props) {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-property-store-to-frozen-value.expect.md
+2 -2
View File
@@ -19,13 +19,13 @@ function Component(props) {
Found 1 error:
Error: This value cannot be modified
Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX
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;
| ^ This value cannot be modified
| ^ value cannot be modified
6 | return x;
7 | }
8 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-props-mutation-in-effect-indirect.expect.md
+1 -1
View File
@@ -21,7 +21,7 @@ function Component(props) {
Found 1 error:
Error: This value cannot be modified
Modifying 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.invalid-props-mutation-in-effect-indirect.ts:3:4
1 | function Component(props) {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-in-hook-return-value.expect.md
+3 -3
View File
@@ -16,15 +16,15 @@ function useFoo() {
```
Found 1 error:
Error: Cannot reassign a variable after render completes
Error: Cannot reassign variable after render completes
Reassigning variable `x` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead
Reassigning `x` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.
error.invalid-reassign-local-in-hook-return-value.ts:4:4
2 | let x = 0;
3 | return value => {
> 4 | x = value;
| ^ Cannot reassign variable after render completes
| ^ Cannot reassign `x` after render completes
5 | };
6 | }
7 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-effect.expect.md
+3 -3
View File
@@ -48,15 +48,15 @@ function Component() {
```
Found 1 error:
Error: Cannot reassign a variable after render completes
Error: Cannot reassign variable after render completes
Reassigning variable `local` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead
Reassigning `local` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.
error.invalid-reassign-local-variable-in-effect.ts:7:4
5 |
6 | const reassignLocal = newValue => {
> 7 | local = newValue;
| ^^^^^ Cannot reassign variable after render completes
| ^^^^^ Cannot reassign `local` after render completes
8 | };
9 |
10 | const onMount = newValue => {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-hook-argument.expect.md
+3 -3
View File
@@ -49,15 +49,15 @@ function Component() {
```
Found 1 error:
Error: Cannot reassign a variable after render completes
Error: Cannot reassign variable after render completes
Reassigning variable `local` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead
Reassigning `local` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.
error.invalid-reassign-local-variable-in-hook-argument.ts:8:4
6 |
7 | const reassignLocal = newValue => {
> 8 | local = newValue;
| ^^^^^ Cannot reassign variable after render completes
| ^^^^^ Cannot reassign `local` after render completes
9 | };
10 |
11 | const callback = newValue => {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-jsx-callback.expect.md
+3 -3
View File
@@ -42,15 +42,15 @@ function Component() {
```
Found 1 error:
Error: Cannot reassign a variable after render completes
Error: Cannot reassign variable after render completes
Reassigning variable `local` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead
Reassigning `local` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.
error.invalid-reassign-local-variable-in-jsx-callback.ts:5:4
3 |
4 | const reassignLocal = newValue => {
> 5 | local = newValue;
| ^^^^^ Cannot reassign variable after render completes
| ^^^^^ Cannot reassign `local` after render completes
6 | };
7 |
8 | const onClick = newValue => {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-return-mutable-function-from-hook.expect.md
+3 -3
View File
@@ -22,7 +22,7 @@ function useFoo() {
Found 1 error:
Error: Cannot modify local variables after render completes
This argument is a function which may reassign or mutate local variables after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead
This argument is a function which may reassign or mutate `cache` after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.
error.invalid-return-mutable-function-from-hook.ts:7:9
5 | useHook(); // for inference to kick in
@@ -32,7 +32,7 @@ error.invalid-return-mutable-function-from-hook.ts:7:9
> 8 | cache.set('key', 'value');
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 9 | };
| ^^^^ This function may (indirectly) reassign or modify local variables after render
| ^^^^ This function may (indirectly) reassign or modify `cache` after render
10 | }
11 |
@@ -40,7 +40,7 @@ error.invalid-return-mutable-function-from-hook.ts:8:4
6 | const cache = new Map();
7 | return () => {
> 8 | cache.set('key', 'value');
| ^^^^^ This modifies a local variable
| ^^^^^ This modifies `cache`
9 | };
10 | }
11 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-uncalled-function-capturing-mutable-values-memoizes-with-captures-values.expect.md
+3 -3
View File
@@ -50,7 +50,7 @@ hook useMemoMap<TInput: interface {}, TOutput>(
Found 1 error:
Error: Cannot modify local variables after render completes
This argument is a function which may reassign or mutate local variables after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead
This argument is a function which may reassign or mutate `cache` after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.
undefined:21:9
19 | map: TInput => TOutput
@@ -88,7 +88,7 @@ undefined:21:9
> 36 | };
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 37 | }, [map]);
| ^^^^^^^^^^^^ This function may (indirectly) reassign or modify local variables after render
| ^^^^^^^^^^^^ This function may (indirectly) reassign or modify `cache` after render
38 | }
39 |
@@ -96,7 +96,7 @@ undefined:33:8
31 | if (output == null) {
32 | output = map(input);
> 33 | cache.set(input, output);
| ^^^^^ This modifies a local variable
| ^^^^^ This modifies `cache`
34 | }
35 | return output;
36 | };
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useMemo-async-callback.expect.md
+2 -2
View File
@@ -16,9 +16,9 @@ function component(a, b) {
```
Found 1 error:
Error: useMemo callbacks may not be async or generator functions
Error: useMemo() callbacks may not be async or generator functions
useMemo() callbacks are called once and must synchronously return a value
useMemo() callbacks are called once and must synchronously return a value.
error.invalid-useMemo-async-callback.ts:2:18
1 | function component(a, b) {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useMemo-callback-args.expect.md
+1 -1
View File
@@ -21,7 +21,7 @@ useMemo() callbacks are called by React to cache calculations across re-renders.
error.invalid-useMemo-callback-args.ts:2:18
1 | function component(a, b) {
> 2 | let x = useMemo(c => a, []);
| ^
| ^ Callbacks with parameters are not supported
3 | return x;
4 | }
5 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.modify-state-2.expect.md
+2 -2
View File
@@ -20,13 +20,13 @@ function Foo() {
Found 1 error:
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
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;
| ^^^ This value cannot be modified
| ^^^ value cannot be modified
7 | return state;
8 | }
9 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.modify-state.expect.md
+2 -2
View File
@@ -19,13 +19,13 @@ function Foo() {
Found 1 error:
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
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;
| ^^^^^ This value cannot be modified
| ^^^^^ value cannot be modified
6 | return state;
7 | }
8 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.modify-useReducer-state.expect.md
+2 -2
View File
@@ -19,13 +19,13 @@ function Foo() {
Found 1 error:
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
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;
| ^^^^^ This value cannot be modified
| ^^^^^ value cannot be modified
6 | return state;
7 | }
8 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutable-range-shared-inner-outer-function.expect.md
+3 -3
View File
@@ -33,15 +33,15 @@ export const FIXTURE_ENTRYPOINT = {
```
Found 1 error:
Error: Cannot reassign a variable after render completes
Error: Cannot reassign variable after render completes
Reassigning variable `a` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead
Reassigning `a` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.
error.mutable-range-shared-inner-outer-function.ts:8:6
6 | const f = () => {
7 | if (cond) {
> 8 | a = {};
| ^ Cannot reassign variable after render completes
| ^ Cannot reassign `a` after render completes
9 | b = [];
10 | } else {
11 | a = {};
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-function-property.expect.md
+2 -2
View File
@@ -18,13 +18,13 @@ export function ViewModeSelector(props) {
Found 1 error:
Error: This value cannot be modified
This modifies a variable that React considers immutable
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 value cannot be modified
| ^^^^^^^^^^ value cannot be modified
4 |
5 | return <Dropdown checkableIndicator={{children: renderIcon}} />;
6 | }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-hook-argument.expect.md
+4 -4
View File
@@ -16,24 +16,24 @@ function useHook(a, b) {
Found 2 errors:
Error: This value cannot be modified
Modifying 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:2:2
1 | function useHook(a, b) {
> 2 | b.test = 1;
| ^ This value cannot be modified
| ^ value cannot be modified
3 | a.test = 2;
4 | }
5 |
Error: This value cannot be modified
Modifying 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;
| ^ This value cannot be modified
| ^ value cannot be modified
4 | }
5 |
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-property-from-global.expect.md
+2 -2
View File
@@ -18,13 +18,13 @@ function Foo() {
Found 1 error:
Error: This value cannot be modified
Modifying 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.mutate-property-from-global.ts:4:9
2 |
3 | function Foo() {
> 4 | delete wat.foo;
| ^^^ This value cannot be modified
| ^^^ value cannot be modified
5 | return wat;
6 | }
7 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-props.expect.md
+2 -2
View File
@@ -16,12 +16,12 @@ function Foo(props) {
Found 1 error:
Error: This value cannot be modified
Modifying 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-props.ts:2:2
1 | function Foo(props) {
> 2 | props.test = 1;
| ^^^^^ This value cannot be modified
| ^^^^^ value cannot be modified
3 | return null;
4 | }
5 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.not-useEffect-external-mutate.expect.md
+4 -4
View File
@@ -20,25 +20,25 @@ function Component(props) {
Found 2 errors:
Error: This value cannot be modified
Modifying 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:5:4
3 | function Component(props) {
4 | foo(() => {
> 5 | x.a = 10;
| ^ This value cannot be modified
| ^ value cannot be modified
6 | x.a = 20;
7 | });
8 | }
Error: This value cannot be modified
Modifying 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;
| ^ This value cannot be modified
| ^ value cannot be modified
7 | });
8 | }
9 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassign-global-fn-arg.expect.md
+2 -2
View File
@@ -27,13 +27,13 @@ export const FIXTURE_ENTRYPOINT = {
Found 1 error:
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)
Variable `b` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.reassign-global-fn-arg.ts:5:4
3 | export default function MyApp() {
4 | const fn = () => {
> 5 | b = 2;
| ^ Cannot reassign variable
| ^ `b` cannot be reassigned
6 | };
7 | return foo(fn);
8 | }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassignment-to-global-indirect.expect.md
+4 -4
View File
@@ -20,25 +20,25 @@ function Component() {
Found 2 errors:
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)
Variable `someUnknownGlobal` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.reassignment-to-global-indirect.ts:4:4
2 | const foo = () => {
3 | // Cannot assign to globals
> 4 | someUnknownGlobal = true;
| ^^^^^^^^^^^^^^^^^ Cannot reassign variable
| ^^^^^^^^^^^^^^^^^ `someUnknownGlobal` cannot be reassigned
5 | moduleLocal = true;
6 | };
7 | foo();
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)
Variable `moduleLocal` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.reassignment-to-global-indirect.ts:5:4
3 | // Cannot assign to globals
4 | someUnknownGlobal = true;
> 5 | moduleLocal = true;
| ^^^^^^^^^^^ Cannot reassign variable
| ^^^^^^^^^^^ `moduleLocal` cannot be reassigned
6 | };
7 | foo();
8 | }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassignment-to-global.expect.md
+4 -4
View File
@@ -17,25 +17,25 @@ function Component() {
Found 2 errors:
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)
Variable `someUnknownGlobal` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.reassignment-to-global.ts:3:2
1 | function Component() {
2 | // Cannot assign to globals
> 3 | someUnknownGlobal = true;
| ^^^^^^^^^^^^^^^^^ Cannot reassign variable
| ^^^^^^^^^^^^^^^^^ `someUnknownGlobal` cannot be reassigned
4 | moduleLocal = true;
5 | }
6 |
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)
Variable `moduleLocal` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.reassignment-to-global.ts:4:2
2 | // Cannot assign to globals
3 | someUnknownGlobal = true;
> 4 | moduleLocal = true;
| ^^^^^^^^^^^ Cannot reassign variable
| ^^^^^^^^^^^ `moduleLocal` cannot be reassigned
5 | }
6 |
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.store-property-in-global.expect.md
+2 -2
View File
@@ -18,13 +18,13 @@ function Foo() {
Found 1 error:
Error: This value cannot be modified
Modifying 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.store-property-in-global.ts:4:2
2 |
3 | function Foo() {
> 4 | wat.test = 1;
| ^^^ This value cannot be modified
| ^^^ value cannot be modified
5 | return wat;
6 | }
7 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-function-expression-references-later-variable-declaration.expect.md
+3 -3
View File
@@ -18,15 +18,15 @@ function Component() {
```
Found 1 error:
Error: Cannot reassign a variable after render completes
Error: Cannot reassign variable after render completes
Reassigning variable `onClick` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead
Reassigning `onClick` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.
error.todo-function-expression-references-later-variable-declaration.ts:3:4
1 | function Component() {
2 | let callback = () => {
> 3 | onClick = () => {};
| ^^^^^^^ Cannot reassign variable after render completes
| ^^^^^^^ Cannot reassign `onClick` after render completes
4 | };
5 | let onClick;
6 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.update-global-should-bailout.expect.md
+2 -2
View File
@@ -22,13 +22,13 @@ export const FIXTURE_ENTRYPOINT = {
Found 1 error:
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)
Variable `renderCount` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.update-global-should-bailout.ts:3:2
1 | let renderCount = 0;
2 | function useFoo() {
> 3 | renderCount += 1;
| ^^^^^^^^^^^^^^^^ Cannot reassign variable
| ^^^^^^^^^^^^^^^^ `renderCount` cannot be reassigned
4 | return renderCount;
5 | }
6 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-optional-chain.expect.md
+1 -1
View File
@@ -48,7 +48,7 @@ export const FIXTURE_ENTRYPOINT = {
## Logs
```
{"kind":"CompileError","fnLoc":{"start":{"line":5,"column":0,"index":139},"end":{"line":12,"column":1,"index":384},"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":345},"end":{"line":10,"column":5,"index":348},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"},"message":"This value cannot be modified"}]}}}
{"kind":"CompileError","fnLoc":{"start":{"line":5,"column":0,"index":139},"end":{"line":12,"column":1,"index":384},"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":345},"end":{"line":10,"column":5,"index":348},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"},"message":"value cannot be modified"}]}}}
{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":9,"column":2,"index":304},"end":{"line":9,"column":39,"index":341},"filename":"mutate-after-useeffect-optional-chain.ts"},"decorations":[{"start":{"line":9,"column":24,"index":326},"end":{"line":9,"column":27,"index":329},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"}]}
{"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":139},"end":{"line":12,"column":1,"index":384},"filename":"mutate-after-useeffect-optional-chain.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-ref-access.expect.md
+1 -1
View File
@@ -47,7 +47,7 @@ export const FIXTURE_ENTRYPOINT = {
## Logs
```
{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":148},"end":{"line":11,"column":1,"index":311},"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":269},"end":{"line":9,"column":16,"index":283},"filename":"mutate-after-useeffect-ref-access.ts"},"message":"This value cannot be modified"}]}}}
{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":148},"end":{"line":11,"column":1,"index":311},"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":269},"end":{"line":9,"column":16,"index":283},"filename":"mutate-after-useeffect-ref-access.ts"},"message":"value cannot be modified"}]}}}
{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":8,"column":2,"index":227},"end":{"line":8,"column":40,"index":265},"filename":"mutate-after-useeffect-ref-access.ts"},"decorations":[{"start":{"line":8,"column":24,"index":249},"end":{"line":8,"column":30,"index":255},"filename":"mutate-after-useeffect-ref-access.ts","identifierName":"arrRef"}]}
{"kind":"CompileSuccess","fnLoc":{"start":{"line":6,"column":0,"index":148},"end":{"line":11,"column":1,"index":311},"filename":"mutate-after-useeffect-ref-access.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect.expect.md
+1 -1
View File
@@ -47,7 +47,7 @@ export const FIXTURE_ENTRYPOINT = {
## Logs
```
{"kind":"CompileError","fnLoc":{"start":{"line":4,"column":0,"index":101},"end":{"line":11,"column":1,"index":222},"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":194},"end":{"line":9,"column":5,"index":197},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},"message":"This value cannot be modified"}]}}}
{"kind":"CompileError","fnLoc":{"start":{"line":4,"column":0,"index":101},"end":{"line":11,"column":1,"index":222},"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":194},"end":{"line":9,"column":5,"index":197},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},"message":"value cannot be modified"}]}}}
{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":6,"column":2,"index":149},"end":{"line":8,"column":4,"index":190},"filename":"mutate-after-useeffect.ts"},"decorations":[{"start":{"line":7,"column":4,"index":171},"end":{"line":7,"column":7,"index":174},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},{"start":{"line":7,"column":4,"index":171},"end":{"line":7,"column":7,"index":174},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},{"start":{"line":7,"column":13,"index":180},"end":{"line":7,"column":16,"index":183},"filename":"mutate-after-useeffect.ts","identifierName":"foo"}]}
{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":101},"end":{"line":11,"column":1,"index":222},"filename":"mutate-after-useeffect.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/retry-no-emit.expect.md
+1 -1
View File
@@ -52,7 +52,7 @@ export const FIXTURE_ENTRYPOINT = {
## Logs
```
{"kind":"CompileError","fnLoc":{"start":{"line":5,"column":0,"index":163},"end":{"line":13,"column":1,"index":357},"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":11,"column":2,"index":320},"end":{"line":11,"column":6,"index":324},"filename":"retry-no-emit.ts","identifierName":"arr2"},"message":"This value cannot be modified"}]}}}
{"kind":"CompileError","fnLoc":{"start":{"line":5,"column":0,"index":163},"end":{"line":13,"column":1,"index":357},"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":11,"column":2,"index":320},"end":{"line":11,"column":6,"index":324},"filename":"retry-no-emit.ts","identifierName":"arr2"},"message":"value cannot be modified"}]}}}
{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":7,"column":2,"index":216},"end":{"line":7,"column":36,"index":250},"filename":"retry-no-emit.ts"},"decorations":[{"start":{"line":7,"column":31,"index":245},"end":{"line":7,"column":34,"index":248},"filename":"retry-no-emit.ts","identifierName":"arr"}]}
{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":10,"column":2,"index":274},"end":{"line":10,"column":44,"index":316},"filename":"retry-no-emit.ts"},"decorations":[{"start":{"line":10,"column":25,"index":297},"end":{"line":10,"column":29,"index":301},"filename":"retry-no-emit.ts","identifierName":"arr2"},{"start":{"line":10,"column":25,"index":297},"end":{"line":10,"column":29,"index":301},"filename":"retry-no-emit.ts","identifierName":"arr2"},{"start":{"line":10,"column":35,"index":307},"end":{"line":10,"column":42,"index":314},"filename":"retry-no-emit.ts","identifierName":"propVal"}]}
{"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":163},"end":{"line":13,"column":1,"index":357},"filename":"retry-no-emit.ts"},"fnName":"Foo","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-reassign-local-variable-in-jsx-callback.expect.md
+3 -3
View File
@@ -43,15 +43,15 @@ function Component() {
```
Found 1 error:
Error: Cannot reassign a variable after render completes
Error: Cannot reassign variable after render completes
Reassigning variable `local` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead
Reassigning `local` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.
error.invalid-reassign-local-variable-in-jsx-callback.ts:6:4
4 |
5 | const reassignLocal = newValue => {
> 6 | local = newValue;
| ^^^^^ Cannot reassign variable after render completes
| ^^^^^ Cannot reassign `local` after render completes
7 | };
8 |
9 | const onClick = newValue => {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-referencing-frozen-hoisted-storecontext-const.expect.md
+3 -3
View File
@@ -34,13 +34,13 @@ function Component({content, refetch}) {
Found 1 error:
Error: Cannot access variable 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
`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);
| ^^^^ Variable accessed before it is declared
| ^^^^ `data` accessed before it is declared
12 | }, [refetch]);
13 |
14 | // The context variable gets frozen here since it's passed to a hook
@@ -49,7 +49,7 @@ 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;
| ^^^^^^^^^^^ The variable is declared here
| ^^^^^^^^^^^ `data` is declared here
20 |
21 | return <Foo data={data} onSubmit={onSubmit} />;
22 | }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.mutate-frozen-value.expect.md
+2 -2
View File
@@ -19,13 +19,13 @@ function Component({a, b}) {
Found 1 error:
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
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;
| ^ This value cannot be modified
| ^ value cannot be modified
6 | return <div>error</div>;
7 | }
8 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.mutate-hook-argument.expect.md
+4 -4
View File
@@ -17,25 +17,25 @@ function useHook(a, b) {
Found 2 errors:
Error: This value cannot be modified
Modifying 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 | // @enableNewMutationAliasingModel
2 | function useHook(a, b) {
> 3 | b.test = 1;
| ^ This value cannot be modified
| ^ value cannot be modified
4 | a.test = 2;
5 | }
6 |
Error: This value cannot be modified
Modifying 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;
| ^ This value cannot be modified
| ^ value cannot be modified
5 | }
6 |
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.not-useEffect-external-mutate.expect.md
+4 -4
View File
@@ -21,25 +21,25 @@ function Component(props) {
Found 2 errors:
Error: This value cannot be modified
Modifying 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 | function Component(props) {
5 | foo(() => {
> 6 | x.a = 10;
| ^ This value cannot be modified
| ^ value cannot be modified
7 | x.a = 20;
8 | });
9 | }
Error: This value cannot be modified
Modifying 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;
| ^ This value cannot be modified
| ^ value cannot be modified
8 | });
9 | }
10 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.reassignment-to-global-indirect.expect.md
+4 -4
View File
@@ -21,25 +21,25 @@ function Component() {
Found 2 errors:
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)
Variable `someUnknownGlobal` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.reassignment-to-global-indirect.ts:5:4
3 | const foo = () => {
4 | // Cannot assign to globals
> 5 | someUnknownGlobal = true;
| ^^^^^^^^^^^^^^^^^ Cannot reassign variable
| ^^^^^^^^^^^^^^^^^ `someUnknownGlobal` cannot be reassigned
6 | moduleLocal = true;
7 | };
8 | foo();
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)
Variable `moduleLocal` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.reassignment-to-global-indirect.ts:6:4
4 | // Cannot assign to globals
5 | someUnknownGlobal = true;
> 6 | moduleLocal = true;
| ^^^^^^^^^^^ Cannot reassign variable
| ^^^^^^^^^^^ `moduleLocal` cannot be reassigned
7 | };
8 | foo();
9 | }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.reassignment-to-global.expect.md
+4 -4
View File
@@ -18,25 +18,25 @@ function Component() {
Found 2 errors:
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)
Variable `someUnknownGlobal` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.reassignment-to-global.ts:4:2
2 | function Component() {
3 | // Cannot assign to globals
> 4 | someUnknownGlobal = true;
| ^^^^^^^^^^^^^^^^^ Cannot reassign variable
| ^^^^^^^^^^^^^^^^^ `someUnknownGlobal` cannot be reassigned
5 | moduleLocal = true;
6 | }
7 |
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)
Variable `moduleLocal` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)
error.reassignment-to-global.ts:5:2
3 | // Cannot assign to globals
4 | someUnknownGlobal = true;
> 5 | moduleLocal = true;
| ^^^^^^^^^^^ Cannot reassign variable
| ^^^^^^^^^^^ `moduleLocal` cannot be reassigned
6 | }
7 |
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-optional-chain.expect.md
+1 -1
View File
@@ -48,7 +48,7 @@ export const FIXTURE_ENTRYPOINT = {
## Logs
```
{"kind":"CompileError","fnLoc":{"start":{"line":5,"column":0,"index":171},"end":{"line":12,"column":1,"index":416},"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":377},"end":{"line":10,"column":5,"index":380},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"},"message":"This value cannot be modified"}]}}}
{"kind":"CompileError","fnLoc":{"start":{"line":5,"column":0,"index":171},"end":{"line":12,"column":1,"index":416},"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":377},"end":{"line":10,"column":5,"index":380},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"},"message":"value cannot be modified"}]}}}
{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":9,"column":2,"index":336},"end":{"line":9,"column":39,"index":373},"filename":"mutate-after-useeffect-optional-chain.ts"},"decorations":[{"start":{"line":9,"column":24,"index":358},"end":{"line":9,"column":27,"index":361},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"}]}
{"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":171},"end":{"line":12,"column":1,"index":416},"filename":"mutate-after-useeffect-optional-chain.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-ref-access.expect.md
+1 -1
View File
@@ -47,7 +47,7 @@ export const FIXTURE_ENTRYPOINT = {
## Logs
```
{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":180},"end":{"line":11,"column":1,"index":343},"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":301},"end":{"line":9,"column":16,"index":315},"filename":"mutate-after-useeffect-ref-access.ts"},"message":"This value cannot be modified"}]}}}
{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":180},"end":{"line":11,"column":1,"index":343},"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":301},"end":{"line":9,"column":16,"index":315},"filename":"mutate-after-useeffect-ref-access.ts"},"message":"value cannot be modified"}]}}}
{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":8,"column":2,"index":259},"end":{"line":8,"column":40,"index":297},"filename":"mutate-after-useeffect-ref-access.ts"},"decorations":[{"start":{"line":8,"column":24,"index":281},"end":{"line":8,"column":30,"index":287},"filename":"mutate-after-useeffect-ref-access.ts","identifierName":"arrRef"}]}
{"kind":"CompileSuccess","fnLoc":{"start":{"line":6,"column":0,"index":180},"end":{"line":11,"column":1,"index":343},"filename":"mutate-after-useeffect-ref-access.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect.expect.md
+1 -1
View File
@@ -47,7 +47,7 @@ export const FIXTURE_ENTRYPOINT = {
## Logs
```
{"kind":"CompileError","fnLoc":{"start":{"line":4,"column":0,"index":133},"end":{"line":11,"column":1,"index":254},"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":226},"end":{"line":9,"column":5,"index":229},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},"message":"This value cannot be modified"}]}}}
{"kind":"CompileError","fnLoc":{"start":{"line":4,"column":0,"index":133},"end":{"line":11,"column":1,"index":254},"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":226},"end":{"line":9,"column":5,"index":229},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},"message":"value cannot be modified"}]}}}
{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":6,"column":2,"index":181},"end":{"line":8,"column":4,"index":222},"filename":"mutate-after-useeffect.ts"},"decorations":[{"start":{"line":7,"column":4,"index":203},"end":{"line":7,"column":7,"index":206},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},{"start":{"line":7,"column":4,"index":203},"end":{"line":7,"column":7,"index":206},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},{"start":{"line":7,"column":13,"index":212},"end":{"line":7,"column":16,"index":215},"filename":"mutate-after-useeffect.ts","identifierName":"foo"}]}
{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":133},"end":{"line":11,"column":1,"index":254},"filename":"mutate-after-useeffect.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/retry-no-emit.expect.md
+1 -1
View File
@@ -52,7 +52,7 @@ export const FIXTURE_ENTRYPOINT = {
## Logs
```
{"kind":"CompileError","fnLoc":{"start":{"line":5,"column":0,"index":195},"end":{"line":13,"column":1,"index":389},"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":11,"column":2,"index":352},"end":{"line":11,"column":6,"index":356},"filename":"retry-no-emit.ts","identifierName":"arr2"},"message":"This value cannot be modified"}]}}}
{"kind":"CompileError","fnLoc":{"start":{"line":5,"column":0,"index":195},"end":{"line":13,"column":1,"index":389},"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":11,"column":2,"index":352},"end":{"line":11,"column":6,"index":356},"filename":"retry-no-emit.ts","identifierName":"arr2"},"message":"value cannot be modified"}]}}}
{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":7,"column":2,"index":248},"end":{"line":7,"column":36,"index":282},"filename":"retry-no-emit.ts"},"decorations":[{"start":{"line":7,"column":31,"index":277},"end":{"line":7,"column":34,"index":280},"filename":"retry-no-emit.ts","identifierName":"arr"}]}
{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":10,"column":2,"index":306},"end":{"line":10,"column":44,"index":348},"filename":"retry-no-emit.ts"},"decorations":[{"start":{"line":10,"column":25,"index":329},"end":{"line":10,"column":29,"index":333},"filename":"retry-no-emit.ts","identifierName":"arr2"},{"start":{"line":10,"column":25,"index":329},"end":{"line":10,"column":29,"index":333},"filename":"retry-no-emit.ts","identifierName":"arr2"},{"start":{"line":10,"column":35,"index":339},"end":{"line":10,"column":42,"index":346},"filename":"retry-no-emit.ts","identifierName":"propVal"}]}
{"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":195},"end":{"line":13,"column":1,"index":389},"filename":"retry-no-emit.ts"},"fnName":"Foo","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}