diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.invalid-reassign-local-variable-in-async-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.invalid-reassign-local-variable-in-async-callback.expect.md new file mode 100644 index 0000000000..aa07cce436 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.invalid-reassign-local-variable-in-async-callback.expect.md @@ -0,0 +1,58 @@ + +## Input + +```javascript +function Component() { + let value = null; + const reassign = async () => { + await foo().then((result) => { + // Reassigning a local variable in an async function is *always* mutating + // after render, so this should error regardless of where this ends up + // getting called + value = result; + }); + }; + + const onClick = async () => { + await reassign(); + }; + return
Click
; +} + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +function Component() { + const $ = _c(2); + let value; + if ($[0] === Symbol.for("react.memo_cache_sentinel")) { + value = null; + $[0] = value; + } else { + value = $[0]; + } + let t0; + if ($[1] === Symbol.for("react.memo_cache_sentinel")) { + const reassign = async () => { + await foo().then((result) => { + value = result; + }); + }; + + const onClick = async () => { + await reassign(); + }; + + t0 =
Click
; + $[1] = t0; + } else { + t0 = $[1]; + } + return t0; +} + +``` + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.invalid-reassign-local-variable-in-async-callback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.invalid-reassign-local-variable-in-async-callback.js new file mode 100644 index 0000000000..1ba759e3b8 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.invalid-reassign-local-variable-in-async-callback.js @@ -0,0 +1,16 @@ +function Component() { + let value = null; + const reassign = async () => { + await foo().then((result) => { + // Reassigning a local variable in an async function is *always* mutating + // after render, so this should error regardless of where this ends up + // getting called + value = result; + }); + }; + + const onClick = async () => { + await reassign(); + }; + return
Click
; +} diff --git a/compiler/packages/snap/src/SproutTodoFilter.ts b/compiler/packages/snap/src/SproutTodoFilter.ts index c4bc6776da..8d28ba239a 100644 --- a/compiler/packages/snap/src/SproutTodoFilter.ts +++ b/compiler/packages/snap/src/SproutTodoFilter.ts @@ -487,6 +487,7 @@ const skipFilter = new Set([ "todo.invalid-reassign-local-variable-in-jsx-callback", "todo.invalid-reassign-local-variable-in-hook-argument", "todo.invalid-reassign-local-variable-in-effect", + "todo.invalid-reassign-local-variable-in-async-callback", // bugs "bug-invalid-hoisting-functionexpr",