diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts index 13f87528b2185..c3eadb89f50c3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts @@ -9,6 +9,7 @@ import {Effect, ValueKind, ValueReason} from './HIR'; import { BUILTIN_SHAPES, BuiltInArrayId, + BuiltInAutodepsId, BuiltInFireFunctionId, BuiltInFireId, BuiltInMapId, @@ -780,6 +781,7 @@ const REACT_APIS: Array<[string, BuiltInType]> = [ BuiltInUseEffectEventId, ), ], + ['AUTODEPS', addObject(DEFAULT_SHAPES, BuiltInAutodepsId, [])], ]; TYPED_GLOBALS.push( diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts index 4b67dc647f72c..baaf40d67e7bb 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts @@ -384,6 +384,7 @@ export const BuiltInFireId = 'BuiltInFire'; export const BuiltInFireFunctionId = 'BuiltInFireFunction'; export const BuiltInUseEffectEventId = 'BuiltInUseEffectEvent'; export const BuiltinEffectEventId = 'BuiltInEffectEventFunction'; +export const BuiltInAutodepsId = 'BuiltInAutoDepsId'; // See getReanimatedModuleType() in Globals.ts — this is part of supporting Reanimated's ref-like types export const ReanimatedSharedValueId = 'ReanimatedSharedValueId'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferEffectDependencies.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferEffectDependencies.ts index 4d4531e1cbe0c..83b4a9a67eb6a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferEffectDependencies.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferEffectDependencies.ts @@ -57,6 +57,8 @@ import { } from '../HIR/visitors'; import {empty} from '../Utils/Stack'; import {getOrInsertWith} from '../Utils/utils'; +import {deadCodeElimination} from '../Optimization'; +import {BuiltInAutodepsId} from '../HIR/ObjectShape'; /** * Infers reactive dependencies captured by useEffect lambdas and adds them as @@ -135,7 +137,6 @@ export function inferEffectDependencies(fn: HIRFunction): void { } } else if (value.kind === 'LoadGlobal') { loadGlobals.add(lvalue.identifier.id); - /* * TODO: Handle properties on default exports, like * import React from 'react'; @@ -169,8 +170,17 @@ export function inferEffectDependencies(fn: HIRFunction): void { ) { const callee = value.kind === 'CallExpression' ? value.callee : value.property; + + const autodepsArgIndex = value.args.findIndex( + arg => + arg.kind === 'Identifier' && + arg.identifier.type.kind === 'Object' && + arg.identifier.type.shapeId === BuiltInAutodepsId, + ); if ( - value.args.length === autodepFnLoads.get(callee.identifier.id) && + value.args.length > 1 && + autodepsArgIndex > 0 && + autodepFnLoads.has(callee.identifier.id) && value.args[0].kind === 'Identifier' ) { // We have a useEffect call with no deps array, so we need to infer the deps @@ -260,7 +270,10 @@ export function inferEffectDependencies(fn: HIRFunction): void { effects: null, }, }); - value.args.push({...depsPlace, effect: Effect.Freeze}); + value.args[autodepsArgIndex] = { + ...depsPlace, + effect: Effect.Freeze, + }; fn.env.inferredEffectLocations.add(callee.loc); } else if (loadGlobals.has(value.args[0].identifier.id)) { // Global functions have no reactive dependencies, so we can insert an empty array @@ -275,7 +288,10 @@ export function inferEffectDependencies(fn: HIRFunction): void { effects: null, }, }); - value.args.push({...depsPlace, effect: Effect.Freeze}); + value.args[autodepsArgIndex] = { + ...depsPlace, + effect: Effect.Freeze, + }; fn.env.inferredEffectLocations.add(callee.loc); } } else if ( @@ -323,6 +339,7 @@ export function inferEffectDependencies(fn: HIRFunction): void { // Renumber instructions and fix scope ranges markInstructionIds(fn.body); fixScopeAndIdentifierRanges(fn.body); + deadCodeElimination(fn); fn.env.hasInferredEffect = true; } @@ -408,6 +425,7 @@ function rewriteSplices( rewriteBlocks.push(currBlock); let cursor = 0; + for (const rewrite of splices) { while (originalInstrs[cursor].id < rewrite.location) { CompilerError.invariant( @@ -429,7 +447,7 @@ function rewriteSplices( if (rewrite.kind === 'instr') { currBlock.instructions.push(rewrite.value); - } else { + } else if (rewrite.kind === 'block') { const {entry, blocks} = rewrite.value; const entryBlock = blocks.get(entry)!; // splice in all instructions from the entry block diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-granular-access.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-granular-access.expect.md index 701f54b66323b..b8cf1bc40aa8a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-granular-access.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-granular-access.expect.md @@ -3,14 +3,14 @@ ```javascript // @inferEffectDependencies @panicThreshold:"none" -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; function Component({foo}) { const arr = []; // Taking either arr[0].value or arr as a dependency is reasonable // as long as developers know what to expect. - useEffect(() => print(arr[0].value)); + useEffect(() => print(arr[0].value), AUTODEPS); arr.push({value: foo}); return arr; } @@ -21,7 +21,7 @@ function Component({foo}) { ```javascript // @inferEffectDependencies @panicThreshold:"none" -import { useEffect } from "react"; +import { useEffect, AUTODEPS } from "react"; import { print } from "shared-runtime"; function Component(t0) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-granular-access.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-granular-access.js index f1b3de4f7f82f..9ec840ab623ed 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-granular-access.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-granular-access.js @@ -1,12 +1,12 @@ // @inferEffectDependencies @panicThreshold:"none" -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; function Component({foo}) { const arr = []; // Taking either arr[0].value or arr as a dependency is reasonable // as long as developers know what to expect. - useEffect(() => print(arr[0].value)); + useEffect(() => print(arr[0].value), AUTODEPS); arr.push({value: foo}); return arr; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-optional-chain.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-optional-chain.expect.md index b9aafe41df26e..d24f07227dfa2 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-optional-chain.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-optional-chain.expect.md @@ -3,14 +3,14 @@ ```javascript // @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; function Component({foo}) { const arr = []; // Taking either arr[0].value or arr as a dependency is reasonable // as long as developers know what to expect. - useEffect(() => print(arr[0]?.value)); + useEffect(() => print(arr[0]?.value), AUTODEPS); arr.push({value: foo}); return arr; } @@ -26,7 +26,7 @@ export const FIXTURE_ENTRYPOINT = { ```javascript // @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly -import { useEffect } from "react"; +import { useEffect, AUTODEPS } from "react"; import { print } from "shared-runtime"; function Component(t0) { @@ -48,9 +48,9 @@ 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":{"reason":"Updating a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the mutation before calling useEffect()","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":10,"column":2,"index":345},"end":{"line":10,"column":5,"index":348},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"}}} -{"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} +{"kind":"CompileError","fnLoc":{"start":{"line":5,"column":0,"index":149},"end":{"line":12,"column":1,"index":404},"filename":"mutate-after-useeffect-optional-chain.ts"},"detail":{"reason":"Updating a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the mutation before calling useEffect()","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":10,"column":2,"index":365},"end":{"line":10,"column":5,"index":368},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"}}} +{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":9,"column":2,"index":314},"end":{"line":9,"column":49,"index":361},"filename":"mutate-after-useeffect-optional-chain.ts"},"decorations":[{"start":{"line":9,"column":24,"index":336},"end":{"line":9,"column":27,"index":339},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"}]} +{"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":149},"end":{"line":12,"column":1,"index":404},"filename":"mutate-after-useeffect-optional-chain.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0} ``` ### Eval output diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-optional-chain.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-optional-chain.js index c435b72d1a9ef..c78251bf2d3b3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-optional-chain.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-optional-chain.js @@ -1,12 +1,12 @@ // @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; function Component({foo}) { const arr = []; // Taking either arr[0].value or arr as a dependency is reasonable // as long as developers know what to expect. - useEffect(() => print(arr[0]?.value)); + useEffect(() => print(arr[0]?.value), AUTODEPS); arr.push({value: foo}); return arr; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-ref-access.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-ref-access.expect.md index 0d159211a9082..bd6a7267b4d15 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-ref-access.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-ref-access.expect.md @@ -4,12 +4,12 @@ ```javascript // @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly -import {useEffect, useRef} from 'react'; +import {useEffect, useRef, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; function Component({arrRef}) { // Avoid taking arr.current as a dependency - useEffect(() => print(arrRef.current)); + useEffect(() => print(arrRef.current), AUTODEPS); arrRef.current.val = 2; return arrRef; } @@ -26,7 +26,7 @@ export const FIXTURE_ENTRYPOINT = { ```javascript // @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly -import { useEffect, useRef } from "react"; +import { useEffect, useRef, AUTODEPS } from "react"; import { print } from "shared-runtime"; function Component(t0) { @@ -47,9 +47,9 @@ 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":{"reason":"Mutating component props or hook arguments is not allowed. Consider using a local variable instead","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":9,"column":2,"index":269},"end":{"line":9,"column":16,"index":283},"filename":"mutate-after-useeffect-ref-access.ts"}}} -{"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} +{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":158},"end":{"line":11,"column":1,"index":331},"filename":"mutate-after-useeffect-ref-access.ts"},"detail":{"reason":"Mutating component props or hook arguments is not allowed. Consider using a local variable instead","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":9,"column":2,"index":289},"end":{"line":9,"column":16,"index":303},"filename":"mutate-after-useeffect-ref-access.ts"}}} +{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":8,"column":2,"index":237},"end":{"line":8,"column":50,"index":285},"filename":"mutate-after-useeffect-ref-access.ts"},"decorations":[{"start":{"line":8,"column":24,"index":259},"end":{"line":8,"column":30,"index":265},"filename":"mutate-after-useeffect-ref-access.ts","identifierName":"arrRef"}]} +{"kind":"CompileSuccess","fnLoc":{"start":{"line":6,"column":0,"index":158},"end":{"line":11,"column":1,"index":331},"filename":"mutate-after-useeffect-ref-access.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0} ``` ### Eval output diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-ref-access.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-ref-access.js index bd3f6d1de54bd..d972d6d001c83 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-ref-access.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-ref-access.js @@ -1,11 +1,11 @@ // @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly -import {useEffect, useRef} from 'react'; +import {useEffect, useRef, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; function Component({arrRef}) { // Avoid taking arr.current as a dependency - useEffect(() => print(arrRef.current)); + useEffect(() => print(arrRef.current), AUTODEPS); arrRef.current.val = 2; return arrRef; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect.expect.md index d48d98a1e67f7..8168c39cb95a4 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect.expect.md @@ -3,13 +3,13 @@ ```javascript // @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; function Component({foo}) { const arr = []; useEffect(() => { arr.push(foo); - }); + }, AUTODEPS); arr.push(2); return arr; } @@ -25,7 +25,7 @@ export const FIXTURE_ENTRYPOINT = { ```javascript // @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly -import { useEffect } from "react"; +import { useEffect, AUTODEPS } from "react"; function Component(t0) { const { foo } = t0; @@ -47,9 +47,9 @@ 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":{"reason":"Updating a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the mutation before calling useEffect()","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":9,"column":2,"index":194},"end":{"line":9,"column":5,"index":197},"filename":"mutate-after-useeffect.ts","identifierName":"arr"}}} -{"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} +{"kind":"CompileError","fnLoc":{"start":{"line":4,"column":0,"index":111},"end":{"line":11,"column":1,"index":242},"filename":"mutate-after-useeffect.ts"},"detail":{"reason":"Updating a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the mutation before calling useEffect()","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":9,"column":2,"index":214},"end":{"line":9,"column":5,"index":217},"filename":"mutate-after-useeffect.ts","identifierName":"arr"}}} +{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":6,"column":2,"index":159},"end":{"line":8,"column":14,"index":210},"filename":"mutate-after-useeffect.ts"},"decorations":[{"start":{"line":7,"column":4,"index":181},"end":{"line":7,"column":7,"index":184},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},{"start":{"line":7,"column":4,"index":181},"end":{"line":7,"column":7,"index":184},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},{"start":{"line":7,"column":13,"index":190},"end":{"line":7,"column":16,"index":193},"filename":"mutate-after-useeffect.ts","identifierName":"foo"}]} +{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":111},"end":{"line":11,"column":1,"index":242},"filename":"mutate-after-useeffect.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0} ``` ### Eval output diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect.js index fbcbf004a308c..965f64fd7aebc 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect.js @@ -1,11 +1,11 @@ // @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; function Component({foo}) { const arr = []; useEffect(() => { arr.push(foo); - }); + }, AUTODEPS); arr.push(2); return arr; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/helper-nonreactive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/helper-nonreactive.expect.md index 8ae87923437df..ae2b018d36dd2 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/helper-nonreactive.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/helper-nonreactive.expect.md @@ -3,7 +3,7 @@ ```javascript // @inferEffectDependencies -import {useEffect, useRef} from 'react'; +import {useEffect, useRef, AUTODEPS} from 'react'; function useCustomRef() { const ref = useRef(); return ref; @@ -12,7 +12,7 @@ function NonReactiveWrapper() { const ref = useCustomRef(); useEffect(() => { print(ref); - }); + }, AUTODEPS); } ``` @@ -21,7 +21,7 @@ function NonReactiveWrapper() { ```javascript import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies -import { useEffect, useRef } from "react"; +import { useEffect, useRef, AUTODEPS } from "react"; function useCustomRef() { const ref = useRef(); return ref; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/helper-nonreactive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/helper-nonreactive.js index cdbc7b748ea49..18de64bc08b4f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/helper-nonreactive.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/helper-nonreactive.js @@ -1,5 +1,5 @@ // @inferEffectDependencies -import {useEffect, useRef} from 'react'; +import {useEffect, useRef, AUTODEPS} from 'react'; function useCustomRef() { const ref = useRef(); return ref; @@ -8,5 +8,5 @@ function NonReactiveWrapper() { const ref = useCustomRef(); useEffect(() => { print(ref); - }); + }, AUTODEPS); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/import-namespace-useEffect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/import-namespace-useEffect.expect.md index 3ae6766fc7e29..a221475b95bbd 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/import-namespace-useEffect.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/import-namespace-useEffect.expect.md @@ -8,8 +8,8 @@ import * as SharedRuntime from 'shared-runtime'; function NonReactiveDepInEffect() { const obj = makeObject_Primitives(); - React.useEffect(() => print(obj)); - SharedRuntime.useSpecialEffect(() => print(obj), [obj]); + React.useEffect(() => print(obj), React.AUTODEPS); + SharedRuntime.useSpecialEffect(() => print(obj), [obj], React.AUTODEPS); } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/import-namespace-useEffect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/import-namespace-useEffect.js index e440cfcc2302a..3ef0bf400e5b0 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/import-namespace-useEffect.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/import-namespace-useEffect.js @@ -4,6 +4,6 @@ import * as SharedRuntime from 'shared-runtime'; function NonReactiveDepInEffect() { const obj = makeObject_Primitives(); - React.useEffect(() => print(obj)); - SharedRuntime.useSpecialEffect(() => print(obj), [obj]); + React.useEffect(() => print(obj), React.AUTODEPS); + SharedRuntime.useSpecialEffect(() => print(obj), [obj], React.AUTODEPS); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-deps-custom-config.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-deps-custom-config.expect.md index b439d5dee07e2..03d9ba04e90ca 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-deps-custom-config.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-deps-custom-config.expect.md @@ -4,10 +4,11 @@ ```javascript // @inferEffectDependencies import {print, useSpecialEffect} from 'shared-runtime'; +import {AUTODEPS} from 'react'; function CustomConfig({propVal}) { // Insertion - useSpecialEffect(() => print(propVal), [propVal]); + useSpecialEffect(() => print(propVal), [propVal], AUTODEPS); // No insertion useSpecialEffect(() => print(propVal), [propVal], [propVal]); } @@ -19,6 +20,7 @@ function CustomConfig({propVal}) { ```javascript import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies import { print, useSpecialEffect } from "shared-runtime"; +import { AUTODEPS } from "react"; function CustomConfig(t0) { const $ = _c(7); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-deps-custom-config.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-deps-custom-config.js index 124e607a8ff48..efb8212398415 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-deps-custom-config.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-deps-custom-config.js @@ -1,9 +1,10 @@ // @inferEffectDependencies import {print, useSpecialEffect} from 'shared-runtime'; +import {AUTODEPS} from 'react'; function CustomConfig({propVal}) { // Insertion - useSpecialEffect(() => print(propVal), [propVal]); + useSpecialEffect(() => print(propVal), [propVal], AUTODEPS); // No insertion useSpecialEffect(() => print(propVal), [propVal], [propVal]); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-effect-dependencies.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-effect-dependencies.expect.md index d0745f9bd37ba..e09c0ef8e8a42 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-effect-dependencies.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-effect-dependencies.expect.md @@ -3,7 +3,7 @@ ```javascript // @inferEffectDependencies -import {useEffect, useRef} from 'react'; +import {useEffect, useRef, AUTODEPS} from 'react'; import useEffectWrapper from 'useEffectWrapper'; const moduleNonReactive = 0; @@ -24,7 +24,7 @@ function Component({foo, bar}) { console.log(ref.current); console.log(localNonPrimitiveReactive); console.log(localNonPrimitiveNonreactive); - }); + }, AUTODEPS); // Optional chains and property accesses // TODO: we may be able to save bytes by omitting property accesses if the @@ -32,11 +32,11 @@ function Component({foo, bar}) { useEffect(() => { console.log(bar?.baz); console.log(bar.qux); - }); + }, AUTODEPS); useEffectWrapper(() => { console.log(foo); - }); + }, AUTODEPS); } ``` @@ -45,7 +45,7 @@ function Component({foo, bar}) { ```javascript import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies -import { useEffect, useRef } from "react"; +import { useEffect, useRef, AUTODEPS } from "react"; import useEffectWrapper from "useEffectWrapper"; const moduleNonReactive = 0; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-effect-dependencies.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-effect-dependencies.js index 2bad5ee1cc920..bf02842d25ff7 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-effect-dependencies.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/infer-effect-dependencies.js @@ -1,5 +1,5 @@ // @inferEffectDependencies -import {useEffect, useRef} from 'react'; +import {useEffect, useRef, AUTODEPS} from 'react'; import useEffectWrapper from 'useEffectWrapper'; const moduleNonReactive = 0; @@ -20,7 +20,7 @@ function Component({foo, bar}) { console.log(ref.current); console.log(localNonPrimitiveReactive); console.log(localNonPrimitiveNonreactive); - }); + }, AUTODEPS); // Optional chains and property accesses // TODO: we may be able to save bytes by omitting property accesses if the @@ -28,9 +28,9 @@ function Component({foo, bar}) { useEffect(() => { console.log(bar?.baz); console.log(bar.qux); - }); + }, AUTODEPS); useEffectWrapper(() => { console.log(foo); - }); + }, AUTODEPS); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/no-emit-lint-repro.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/no-emit-lint-repro.expect.md index b5bbd032badfa..7c8142f436d0b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/no-emit-lint-repro.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/no-emit-lint-repro.expect.md @@ -5,10 +5,11 @@ // @inferEffectDependencies @noEmit import {print} from 'shared-runtime'; import useEffectWrapper from 'useEffectWrapper'; +import {AUTODEPS} from 'react'; function ReactiveVariable({propVal}) { const arr = [propVal]; - useEffectWrapper(() => print(arr)); + useEffectWrapper(() => print(arr), AUTODEPS); } ``` @@ -19,10 +20,11 @@ function ReactiveVariable({propVal}) { // @inferEffectDependencies @noEmit import { print } from "shared-runtime"; import useEffectWrapper from "useEffectWrapper"; +import { AUTODEPS } from "react"; function ReactiveVariable({ propVal }) { const arr = [propVal]; - useEffectWrapper(() => print(arr)); + useEffectWrapper(() => print(arr), AUTODEPS); } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/no-emit-lint-repro.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/no-emit-lint-repro.js index 939b604530d89..0df8291afdc64 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/no-emit-lint-repro.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/no-emit-lint-repro.js @@ -1,8 +1,9 @@ // @inferEffectDependencies @noEmit import {print} from 'shared-runtime'; import useEffectWrapper from 'useEffectWrapper'; +import {AUTODEPS} from 'react'; function ReactiveVariable({propVal}) { const arr = [propVal]; - useEffectWrapper(() => print(arr)); + useEffectWrapper(() => print(arr), AUTODEPS); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/retry-no-emit.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/retry-no-emit.expect.md index 3e559339d0632..12f7f5fcfab70 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/retry-no-emit.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/retry-no-emit.expect.md @@ -5,13 +5,14 @@ // @inferEffectDependencies @noEmit @panicThreshold:"none" @loggerTestOnly import {print} from 'shared-runtime'; import useEffectWrapper from 'useEffectWrapper'; +import {AUTODEPS} from 'react'; function Foo({propVal}) { const arr = [propVal]; - useEffectWrapper(() => print(arr)); + useEffectWrapper(() => print(arr), AUTODEPS); const arr2 = []; - useEffectWrapper(() => arr2.push(propVal)); + useEffectWrapper(() => arr2.push(propVal), AUTODEPS); arr2.push(2); return {arr, arr2}; } @@ -30,13 +31,14 @@ export const FIXTURE_ENTRYPOINT = { // @inferEffectDependencies @noEmit @panicThreshold:"none" @loggerTestOnly import { print } from "shared-runtime"; import useEffectWrapper from "useEffectWrapper"; +import { AUTODEPS } from "react"; function Foo({ propVal }) { const arr = [propVal]; - useEffectWrapper(() => print(arr)); + useEffectWrapper(() => print(arr), AUTODEPS); const arr2 = []; - useEffectWrapper(() => arr2.push(propVal)); + useEffectWrapper(() => arr2.push(propVal), AUTODEPS); arr2.push(2); return { arr, arr2 }; } @@ -52,10 +54,10 @@ 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":{"reason":"Updating a value previously passed as an argument to a hook is not allowed. Consider moving the mutation before calling the hook","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":11,"column":2,"index":320},"end":{"line":11,"column":6,"index":324},"filename":"retry-no-emit.ts","identifierName":"arr2"}}} -{"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} +{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":195},"end":{"line":14,"column":1,"index":409},"filename":"retry-no-emit.ts"},"detail":{"reason":"Updating a value previously passed as an argument to a hook is not allowed. Consider moving the mutation before calling the hook","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":12,"column":2,"index":372},"end":{"line":12,"column":6,"index":376},"filename":"retry-no-emit.ts","identifierName":"arr2"}}} +{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":8,"column":2,"index":248},"end":{"line":8,"column":46,"index":292},"filename":"retry-no-emit.ts"},"decorations":[{"start":{"line":8,"column":31,"index":277},"end":{"line":8,"column":34,"index":280},"filename":"retry-no-emit.ts","identifierName":"arr"}]} +{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":11,"column":2,"index":316},"end":{"line":11,"column":54,"index":368},"filename":"retry-no-emit.ts"},"decorations":[{"start":{"line":11,"column":25,"index":339},"end":{"line":11,"column":29,"index":343},"filename":"retry-no-emit.ts","identifierName":"arr2"},{"start":{"line":11,"column":25,"index":339},"end":{"line":11,"column":29,"index":343},"filename":"retry-no-emit.ts","identifierName":"arr2"},{"start":{"line":11,"column":35,"index":349},"end":{"line":11,"column":42,"index":356},"filename":"retry-no-emit.ts","identifierName":"propVal"}]} +{"kind":"CompileSuccess","fnLoc":{"start":{"line":6,"column":0,"index":195},"end":{"line":14,"column":1,"index":409},"filename":"retry-no-emit.ts"},"fnName":"Foo","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0} ``` ### Eval output diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/retry-no-emit.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/retry-no-emit.js index d1dda06a044a2..692653b417481 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/retry-no-emit.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/retry-no-emit.js @@ -1,13 +1,14 @@ // @inferEffectDependencies @noEmit @panicThreshold:"none" @loggerTestOnly import {print} from 'shared-runtime'; import useEffectWrapper from 'useEffectWrapper'; +import {AUTODEPS} from 'react'; function Foo({propVal}) { const arr = [propVal]; - useEffectWrapper(() => print(arr)); + useEffectWrapper(() => print(arr), AUTODEPS); const arr2 = []; - useEffectWrapper(() => arr2.push(propVal)); + useEffectWrapper(() => arr2.push(propVal), AUTODEPS); arr2.push(2); return {arr, arr2}; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/retry-opt-in--no-emit.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/retry-opt-in--no-emit.expect.md index 6e4ddeeb2b59e..a2d5610accfaa 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/retry-opt-in--no-emit.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/retry-opt-in--no-emit.expect.md @@ -4,15 +4,16 @@ ```javascript // @compilationMode:"all" @inferEffectDependencies @panicThreshold:"none" @noEmit import {print} from 'shared-runtime'; +import {AUTODEPS} from 'react'; import useEffectWrapper from 'useEffectWrapper'; function Foo({propVal}) { 'use memo'; const arr = [propVal]; - useEffectWrapper(() => print(arr)); + useEffectWrapper(() => print(arr), AUTODEPS); const arr2 = []; - useEffectWrapper(() => arr2.push(propVal)); + useEffectWrapper(() => arr2.push(propVal), AUTODEPS); arr2.push(2); return {arr, arr2}; @@ -31,15 +32,16 @@ export const FIXTURE_ENTRYPOINT = { ```javascript // @compilationMode:"all" @inferEffectDependencies @panicThreshold:"none" @noEmit import { print } from "shared-runtime"; +import { AUTODEPS } from "react"; import useEffectWrapper from "useEffectWrapper"; function Foo({ propVal }) { "use memo"; const arr = [propVal]; - useEffectWrapper(() => print(arr)); + useEffectWrapper(() => print(arr), AUTODEPS); const arr2 = []; - useEffectWrapper(() => arr2.push(propVal)); + useEffectWrapper(() => arr2.push(propVal), AUTODEPS); arr2.push(2); return { arr, arr2 }; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/retry-opt-in--no-emit.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/retry-opt-in--no-emit.js index 2650cbe5d7f38..e4ec1a545fe0b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/retry-opt-in--no-emit.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/retry-opt-in--no-emit.js @@ -1,14 +1,15 @@ // @compilationMode:"all" @inferEffectDependencies @panicThreshold:"none" @noEmit import {print} from 'shared-runtime'; +import {AUTODEPS} from 'react'; import useEffectWrapper from 'useEffectWrapper'; function Foo({propVal}) { 'use memo'; const arr = [propVal]; - useEffectWrapper(() => print(arr)); + useEffectWrapper(() => print(arr), AUTODEPS); const arr2 = []; - useEffectWrapper(() => arr2.push(propVal)); + useEffectWrapper(() => arr2.push(propVal), AUTODEPS); arr2.push(2); return {arr, arr2}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-dep.expect.md index 1cfbe71e78843..2730f8941b51a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-dep.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-dep.expect.md @@ -3,7 +3,7 @@ ```javascript // @inferEffectDependencies -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; import {makeObject_Primitives, print} from 'shared-runtime'; /** @@ -25,7 +25,7 @@ import {makeObject_Primitives, print} from 'shared-runtime'; */ function NonReactiveDepInEffect() { const obj = makeObject_Primitives(); - useEffect(() => print(obj)); + useEffect(() => print(obj), AUTODEPS); } ``` @@ -34,7 +34,7 @@ function NonReactiveDepInEffect() { ```javascript import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies -import { useEffect } from "react"; +import { useEffect, AUTODEPS } from "react"; import { makeObject_Primitives, print } from "shared-runtime"; /** diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-dep.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-dep.js index 85d9699750293..f6e44034c51f9 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-dep.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-dep.js @@ -1,5 +1,5 @@ // @inferEffectDependencies -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; import {makeObject_Primitives, print} from 'shared-runtime'; /** @@ -21,5 +21,5 @@ import {makeObject_Primitives, print} from 'shared-runtime'; */ function NonReactiveDepInEffect() { const obj = makeObject_Primitives(); - useEffect(() => print(obj)); + useEffect(() => print(obj), AUTODEPS); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-effect-event.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-effect-event.expect.md index 56c5f6f6f8807..c95f9625bbb3f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-effect-event.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-effect-event.expect.md @@ -3,7 +3,7 @@ ```javascript // @inferEffectDependencies -import {useEffect, useEffectEvent} from 'react'; +import {useEffect, useEffectEvent, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; /** @@ -11,7 +11,7 @@ import {print} from 'shared-runtime'; */ function NonReactiveEffectEvent() { const fn = useEffectEvent(() => print('hello world')); - useEffect(() => fn()); + useEffect(() => fn(), AUTODEPS); } ``` @@ -20,7 +20,7 @@ function NonReactiveEffectEvent() { ```javascript import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies -import { useEffect, useEffectEvent } from "react"; +import { useEffect, useEffectEvent, AUTODEPS } from "react"; import { print } from "shared-runtime"; /** diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-effect-event.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-effect-event.js index 02706c6b23735..fc78581e6d52f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-effect-event.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-effect-event.js @@ -1,5 +1,5 @@ // @inferEffectDependencies -import {useEffect, useEffectEvent} from 'react'; +import {useEffect, useEffectEvent, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; /** @@ -7,5 +7,5 @@ import {print} from 'shared-runtime'; */ function NonReactiveEffectEvent() { const fn = useEffectEvent(() => print('hello world')); - useEffect(() => fn()); + useEffect(() => fn(), AUTODEPS); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref-helper.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref-helper.expect.md index bc5c3e4dd466f..ec7ac5e0e34d8 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref-helper.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref-helper.expect.md @@ -3,7 +3,7 @@ ```javascript // @inferEffectDependencies -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; /** @@ -19,7 +19,7 @@ function RefsInEffects() { useEffect(() => { print(ref.current); print(wrapped.foo.current); - }); + }, AUTODEPS); } function useRefHelper() { @@ -36,7 +36,7 @@ function useDeeperRefHelper() { ```javascript import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies -import { useEffect } from "react"; +import { useEffect, AUTODEPS } from "react"; import { print } from "shared-runtime"; /** diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref-helper.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref-helper.js index 9a213fad5f447..92a905061fe00 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref-helper.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref-helper.js @@ -1,5 +1,5 @@ // @inferEffectDependencies -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; /** @@ -15,7 +15,7 @@ function RefsInEffects() { useEffect(() => { print(ref.current); print(wrapped.foo.current); - }); + }, AUTODEPS); } function useRefHelper() { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref.expect.md index ebe1a5f780387..3c5835e755509 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref.expect.md @@ -3,7 +3,7 @@ ```javascript // @inferEffectDependencies -import {useEffect, useRef} from 'react'; +import {useEffect, useRef, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; /** @@ -14,7 +14,7 @@ import {print} from 'shared-runtime'; */ function NonReactiveRefInEffect() { const ref = useRef('initial value'); - useEffect(() => print(ref.current)); + useEffect(() => print(ref.current), AUTODEPS); } ``` @@ -23,7 +23,7 @@ function NonReactiveRefInEffect() { ```javascript import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies -import { useEffect, useRef } from "react"; +import { useEffect, useRef, AUTODEPS } from "react"; import { print } from "shared-runtime"; /** diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref.js index 8a8ab2f636be7..38b83b9b8f81c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-ref.js @@ -1,5 +1,5 @@ // @inferEffectDependencies -import {useEffect, useRef} from 'react'; +import {useEffect, useRef, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; /** @@ -10,5 +10,5 @@ import {print} from 'shared-runtime'; */ function NonReactiveRefInEffect() { const ref = useRef('initial value'); - useEffect(() => print(ref.current)); + useEffect(() => print(ref.current), AUTODEPS); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-setState.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-setState.expect.md index 12935c3b950a0..e0a1a95b339fc 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-setState.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-setState.expect.md @@ -3,7 +3,7 @@ ```javascript // @inferEffectDependencies -import {useEffect, useState} from 'react'; +import {useEffect, useState, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; /** @@ -14,7 +14,7 @@ import {print} from 'shared-runtime'; */ function NonReactiveSetStateInEffect() { const [_, setState] = useState('initial value'); - useEffect(() => print(setState)); + useEffect(() => print(setState), AUTODEPS); } ``` @@ -23,7 +23,7 @@ function NonReactiveSetStateInEffect() { ```javascript import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies -import { useEffect, useState } from "react"; +import { useEffect, useState, AUTODEPS } from "react"; import { print } from "shared-runtime"; /** diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-setState.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-setState.js index 88d4852aca40b..0f8abceca0ecd 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-setState.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/nonreactive-setState.js @@ -1,5 +1,5 @@ // @inferEffectDependencies -import {useEffect, useState} from 'react'; +import {useEffect, useState, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; /** @@ -10,5 +10,5 @@ import {print} from 'shared-runtime'; */ function NonReactiveSetStateInEffect() { const [_, setState] = useState('initial value'); - useEffect(() => print(setState)); + useEffect(() => print(setState), AUTODEPS); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/outlined-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/outlined-function.expect.md index e941ac1462bbe..a0b0594afa1b0 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/outlined-function.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/outlined-function.expect.md @@ -3,7 +3,7 @@ ```javascript // @inferEffectDependencies -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; /** * This compiled output is technically incorrect but this is currently the same @@ -14,7 +14,7 @@ import {print} from 'shared-runtime'; * before OutlineFunctions */ function OutlinedFunctionInEffect() { - useEffect(() => print('hello world!')); + useEffect(() => print('hello world!'), AUTODEPS); } ``` @@ -23,7 +23,7 @@ function OutlinedFunctionInEffect() { ```javascript // @inferEffectDependencies -import { useEffect } from "react"; +import { useEffect, AUTODEPS } from "react"; import { print } from "shared-runtime"; /** * This compiled output is technically incorrect but this is currently the same diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/outlined-function.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/outlined-function.js index 2ee2c94e3c249..5ec2f7d8f9ede 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/outlined-function.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/outlined-function.js @@ -1,5 +1,5 @@ // @inferEffectDependencies -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; /** * This compiled output is technically incorrect but this is currently the same @@ -10,5 +10,5 @@ import {print} from 'shared-runtime'; * before OutlineFunctions */ function OutlinedFunctionInEffect() { - useEffect(() => print('hello world!')); + useEffect(() => print('hello world!'), AUTODEPS); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/pruned-nonreactive-obj.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/pruned-nonreactive-obj.expect.md index fbb88fb32801d..c6c0087a774f5 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/pruned-nonreactive-obj.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/pruned-nonreactive-obj.expect.md @@ -4,7 +4,7 @@ ```javascript // @inferEffectDependencies import {useIdentity, mutate, makeObject} from 'shared-runtime'; -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; /** * When a semantically non-reactive value has a pruned scope (i.e. the object @@ -48,7 +48,7 @@ function PrunedNonReactive() { useIdentity(null); mutate(obj); - useEffect(() => print(obj.value)); + useEffect(() => print(obj.value), AUTODEPS); } ``` @@ -58,7 +58,7 @@ function PrunedNonReactive() { ```javascript import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies import { useIdentity, mutate, makeObject } from "shared-runtime"; -import { useEffect } from "react"; +import { useEffect, AUTODEPS } from "react"; /** * When a semantically non-reactive value has a pruned scope (i.e. the object diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/pruned-nonreactive-obj.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/pruned-nonreactive-obj.js index 692b97b5144b3..f210f2779a18d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/pruned-nonreactive-obj.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/pruned-nonreactive-obj.js @@ -1,6 +1,6 @@ // @inferEffectDependencies import {useIdentity, mutate, makeObject} from 'shared-runtime'; -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; /** * When a semantically non-reactive value has a pruned scope (i.e. the object @@ -44,5 +44,5 @@ function PrunedNonReactive() { useIdentity(null); mutate(obj); - useEffect(() => print(obj.value)); + useEffect(() => print(obj.value), AUTODEPS); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr-merge.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr-merge.expect.md index 82eb54a908829..983c474bdeae4 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr-merge.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr-merge.expect.md @@ -3,12 +3,12 @@ ```javascript // @inferEffectDependencies -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; function ReactiveMemberExprMerge({propVal}) { const obj = {a: {b: propVal}}; - useEffect(() => print(obj.a, obj.a.b)); + useEffect(() => print(obj.a, obj.a.b), AUTODEPS); } ``` @@ -17,7 +17,7 @@ function ReactiveMemberExprMerge({propVal}) { ```javascript import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies -import { useEffect } from "react"; +import { useEffect, AUTODEPS } from "react"; import { print } from "shared-runtime"; function ReactiveMemberExprMerge(t0) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr-merge.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr-merge.js index 071f5abbf545c..41c18d937a2e3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr-merge.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr-merge.js @@ -1,8 +1,8 @@ // @inferEffectDependencies -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; function ReactiveMemberExprMerge({propVal}) { const obj = {a: {b: propVal}}; - useEffect(() => print(obj.a, obj.a.b)); + useEffect(() => print(obj.a, obj.a.b), AUTODEPS); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr.expect.md index 74c4b9eb1ee20..50bceb09aef14 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr.expect.md @@ -3,12 +3,12 @@ ```javascript // @inferEffectDependencies -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; function ReactiveMemberExpr({propVal}) { const obj = {a: {b: propVal}}; - useEffect(() => print(obj.a.b)); + useEffect(() => print(obj.a.b), AUTODEPS); } ``` @@ -17,7 +17,7 @@ function ReactiveMemberExpr({propVal}) { ```javascript import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies -import { useEffect } from "react"; +import { useEffect, AUTODEPS } from "react"; import { print } from "shared-runtime"; function ReactiveMemberExpr(t0) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr.js index 0eabc54657339..ca6e7d4f0f01d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-memberexpr.js @@ -1,8 +1,8 @@ // @inferEffectDependencies -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; function ReactiveMemberExpr({propVal}) { const obj = {a: {b: propVal}}; - useEffect(() => print(obj.a.b)); + useEffect(() => print(obj.a.b), AUTODEPS); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain-complex.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain-complex.expect.md index a840ab81a5eee..a886842c8eb03 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain-complex.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain-complex.expect.md @@ -3,15 +3,16 @@ ```javascript // @inferEffectDependencies -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; import {print, shallowCopy} from 'shared-runtime'; function ReactiveMemberExpr({cond, propVal}) { const obj = {a: cond ? {b: propVal} : null, c: null}; const other = shallowCopy({a: {b: {c: {d: {e: {f: propVal + 1}}}}}}); const primitive = shallowCopy(propVal); - useEffect(() => - print(obj.a?.b, other?.a?.b?.c?.d?.e.f, primitive.a?.b.c?.d?.e.f) + useEffect( + () => print(obj.a?.b, other?.a?.b?.c?.d?.e.f, primitive.a?.b.c?.d?.e.f), + AUTODEPS ); } @@ -26,7 +27,7 @@ export const FIXTURE_ENTRYPOINT = { ```javascript import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies -import { useEffect } from "react"; +import { useEffect, AUTODEPS } from "react"; import { print, shallowCopy } from "shared-runtime"; function ReactiveMemberExpr(t0) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain-complex.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain-complex.js index 93e10250cf389..42dc585cbe9a7 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain-complex.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain-complex.js @@ -1,13 +1,14 @@ // @inferEffectDependencies -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; import {print, shallowCopy} from 'shared-runtime'; function ReactiveMemberExpr({cond, propVal}) { const obj = {a: cond ? {b: propVal} : null, c: null}; const other = shallowCopy({a: {b: {c: {d: {e: {f: propVal + 1}}}}}}); const primitive = shallowCopy(propVal); - useEffect(() => - print(obj.a?.b, other?.a?.b?.c?.d?.e.f, primitive.a?.b.c?.d?.e.f) + useEffect( + () => print(obj.a?.b, other?.a?.b?.c?.d?.e.f, primitive.a?.b.c?.d?.e.f), + AUTODEPS ); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain.expect.md index ffd81732c6e96..7dfad84f79597 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain.expect.md @@ -3,13 +3,13 @@ ```javascript // @inferEffectDependencies -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; function ReactiveMemberExpr({cond, propVal}) { const obj = {a: cond ? {b: propVal} : null, c: null}; - useEffect(() => print(obj.a?.b)); - useEffect(() => print(obj.c?.d)); + useEffect(() => print(obj.a?.b), AUTODEPS); + useEffect(() => print(obj.c?.d), AUTODEPS); } export const FIXTURE_ENTRYPOINT = { @@ -23,7 +23,7 @@ export const FIXTURE_ENTRYPOINT = { ```javascript import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies -import { useEffect } from "react"; +import { useEffect, AUTODEPS } from "react"; import { print } from "shared-runtime"; function ReactiveMemberExpr(t0) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain.js index d81f9029a4e3c..882f9026613cc 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-optional-chain.js @@ -1,11 +1,11 @@ // @inferEffectDependencies -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; function ReactiveMemberExpr({cond, propVal}) { const obj = {a: cond ? {b: propVal} : null, c: null}; - useEffect(() => print(obj.a?.b)); - useEffect(() => print(obj.c?.d)); + useEffect(() => print(obj.a?.b), AUTODEPS); + useEffect(() => print(obj.c?.d), AUTODEPS); } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref-ternary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref-ternary.expect.md index def392cd8427b..97fab06c1f37e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref-ternary.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref-ternary.expect.md @@ -3,7 +3,7 @@ ```javascript // @inferEffectDependencies -import {useRef, useEffect} from 'react'; +import {useRef, useEffect, AUTODEPS} from 'react'; import {print, mutate} from 'shared-runtime'; function Component({cond}) { @@ -14,7 +14,7 @@ function Component({cond}) { useEffect(() => { mutate(derived.current); print(derived.current); - }); + }, AUTODEPS); return arr; } @@ -24,7 +24,7 @@ function Component({cond}) { ```javascript import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies -import { useRef, useEffect } from "react"; +import { useRef, useEffect, AUTODEPS } from "react"; import { print, mutate } from "shared-runtime"; function Component(t0) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref-ternary.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref-ternary.js index 93e5968a591ab..32a9037a9f7e4 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref-ternary.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref-ternary.js @@ -1,5 +1,5 @@ // @inferEffectDependencies -import {useRef, useEffect} from 'react'; +import {useRef, useEffect, AUTODEPS} from 'react'; import {print, mutate} from 'shared-runtime'; function Component({cond}) { @@ -10,6 +10,6 @@ function Component({cond}) { useEffect(() => { mutate(derived.current); print(derived.current); - }); + }, AUTODEPS); return arr; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref.expect.md index 300408d5d2ec4..7e5371dba3555 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref.expect.md @@ -3,7 +3,7 @@ ```javascript // @inferEffectDependencies -import {useEffect, useRef} from 'react'; +import {useEffect, useRef, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; /* @@ -18,7 +18,7 @@ function ReactiveRefInEffect(props) { } else { ref = ref2; } - useEffect(() => print(ref)); + useEffect(() => print(ref), AUTODEPS); } ``` @@ -27,7 +27,7 @@ function ReactiveRefInEffect(props) { ```javascript import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies -import { useEffect, useRef } from "react"; +import { useEffect, useRef, AUTODEPS } from "react"; import { print } from "shared-runtime"; /* diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref.js index 2a51eae6f3183..ee98a93c70bfc 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-ref.js @@ -1,5 +1,5 @@ // @inferEffectDependencies -import {useEffect, useRef} from 'react'; +import {useEffect, useRef, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; /* @@ -14,5 +14,5 @@ function ReactiveRefInEffect(props) { } else { ref = ref2; } - useEffect(() => print(ref)); + useEffect(() => print(ref), AUTODEPS); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-setState.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-setState.expect.md index 2329aaed21ad9..db79dda301038 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-setState.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-setState.expect.md @@ -3,7 +3,7 @@ ```javascript // @inferEffectDependencies -import {useEffect, useState} from 'react'; +import {useEffect, useState, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; /* @@ -18,7 +18,7 @@ function ReactiveRefInEffect(props) { } else { setState = setState2; } - useEffect(() => print(setState)); + useEffect(() => print(setState), AUTODEPS); } ``` @@ -27,7 +27,7 @@ function ReactiveRefInEffect(props) { ```javascript import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies -import { useEffect, useState } from "react"; +import { useEffect, useState, AUTODEPS } from "react"; import { print } from "shared-runtime"; /* diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-setState.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-setState.js index 46a83d8ad42dd..f69efd650cd0d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-setState.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-setState.js @@ -1,5 +1,5 @@ // @inferEffectDependencies -import {useEffect, useState} from 'react'; +import {useEffect, useState, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; /* @@ -14,5 +14,5 @@ function ReactiveRefInEffect(props) { } else { setState = setState2; } - useEffect(() => print(setState)); + useEffect(() => print(setState), AUTODEPS); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-variable.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-variable.expect.md index 6443b90e4affa..8646a926aa729 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-variable.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-variable.expect.md @@ -3,12 +3,12 @@ ```javascript // @inferEffectDependencies -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; function ReactiveVariable({propVal}) { const arr = [propVal]; - useEffect(() => print(arr)); + useEffect(() => print(arr), AUTODEPS); } ``` @@ -17,7 +17,7 @@ function ReactiveVariable({propVal}) { ```javascript import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies -import { useEffect } from "react"; +import { useEffect, AUTODEPS } from "react"; import { print } from "shared-runtime"; function ReactiveVariable(t0) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-variable.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-variable.js index ae3ee2c8e2f64..510ff6e1242c1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-variable.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/reactive-variable.js @@ -1,8 +1,8 @@ // @inferEffectDependencies -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; function ReactiveVariable({propVal}) { const arr = [propVal]; - useEffect(() => print(arr)); + useEffect(() => print(arr), AUTODEPS); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-optional-chain.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-optional-chain.expect.md index 8dec2e3ebe94b..49ae90b406607 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-optional-chain.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-optional-chain.expect.md @@ -3,14 +3,14 @@ ```javascript // @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; function Component({foo}) { const arr = []; // Taking either arr[0].value or arr as a dependency is reasonable // as long as developers know what to expect. - useEffect(() => print(arr[0]?.value)); + useEffect(() => print(arr[0]?.value), AUTODEPS); arr.push({value: foo}); return arr; } @@ -26,7 +26,7 @@ export const FIXTURE_ENTRYPOINT = { ```javascript // @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel -import { useEffect } from "react"; +import { useEffect, AUTODEPS } from "react"; import { print } from "shared-runtime"; function Component(t0) { @@ -48,9 +48,9 @@ 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":{"reason":"Updating a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the mutation before calling useEffect()","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":10,"column":2,"index":377},"end":{"line":10,"column":5,"index":380},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"}}} -{"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} +{"kind":"CompileError","fnLoc":{"start":{"line":5,"column":0,"index":181},"end":{"line":12,"column":1,"index":436},"filename":"mutate-after-useeffect-optional-chain.ts"},"detail":{"reason":"Updating a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the mutation before calling useEffect()","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":10,"column":2,"index":397},"end":{"line":10,"column":5,"index":400},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"}}} +{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":9,"column":2,"index":346},"end":{"line":9,"column":49,"index":393},"filename":"mutate-after-useeffect-optional-chain.ts"},"decorations":[{"start":{"line":9,"column":24,"index":368},"end":{"line":9,"column":27,"index":371},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"}]} +{"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":181},"end":{"line":12,"column":1,"index":436},"filename":"mutate-after-useeffect-optional-chain.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0} ``` ### Eval output diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-optional-chain.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-optional-chain.js index dd8d6669885d2..ee59d8fe4ea90 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-optional-chain.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-optional-chain.js @@ -1,12 +1,12 @@ // @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; function Component({foo}) { const arr = []; // Taking either arr[0].value or arr as a dependency is reasonable // as long as developers know what to expect. - useEffect(() => print(arr[0]?.value)); + useEffect(() => print(arr[0]?.value), AUTODEPS); arr.push({value: foo}); return arr; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-ref-access.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-ref-access.expect.md index 167c23c3476b5..4efd02f833c88 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-ref-access.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-ref-access.expect.md @@ -4,12 +4,12 @@ ```javascript // @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel -import {useEffect, useRef} from 'react'; +import {useEffect, useRef, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; function Component({arrRef}) { // Avoid taking arr.current as a dependency - useEffect(() => print(arrRef.current)); + useEffect(() => print(arrRef.current), AUTODEPS); arrRef.current.val = 2; return arrRef; } @@ -26,7 +26,7 @@ export const FIXTURE_ENTRYPOINT = { ```javascript // @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel -import { useEffect, useRef } from "react"; +import { useEffect, useRef, AUTODEPS } from "react"; import { print } from "shared-runtime"; function Component(t0) { @@ -47,9 +47,9 @@ 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":{"reason":"Mutating component props or hook arguments is not allowed. Consider using a local variable instead","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":9,"column":2,"index":301},"end":{"line":9,"column":16,"index":315},"filename":"mutate-after-useeffect-ref-access.ts"}}} -{"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} +{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":190},"end":{"line":11,"column":1,"index":363},"filename":"mutate-after-useeffect-ref-access.ts"},"detail":{"reason":"Mutating component props or hook arguments is not allowed. Consider using a local variable instead","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":9,"column":2,"index":321},"end":{"line":9,"column":16,"index":335},"filename":"mutate-after-useeffect-ref-access.ts"}}} +{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":8,"column":2,"index":269},"end":{"line":8,"column":50,"index":317},"filename":"mutate-after-useeffect-ref-access.ts"},"decorations":[{"start":{"line":8,"column":24,"index":291},"end":{"line":8,"column":30,"index":297},"filename":"mutate-after-useeffect-ref-access.ts","identifierName":"arrRef"}]} +{"kind":"CompileSuccess","fnLoc":{"start":{"line":6,"column":0,"index":190},"end":{"line":11,"column":1,"index":363},"filename":"mutate-after-useeffect-ref-access.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0} ``` ### Eval output diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-ref-access.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-ref-access.js index f91bd14deb14c..9d0f7e194d0e1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-ref-access.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-ref-access.js @@ -1,11 +1,11 @@ // @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel -import {useEffect, useRef} from 'react'; +import {useEffect, useRef, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; function Component({arrRef}) { // Avoid taking arr.current as a dependency - useEffect(() => print(arrRef.current)); + useEffect(() => print(arrRef.current), AUTODEPS); arrRef.current.val = 2; return arrRef; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect.expect.md index 47a0124baa856..fe635c3c51009 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect.expect.md @@ -3,13 +3,13 @@ ```javascript // @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; function Component({foo}) { const arr = []; useEffect(() => { arr.push(foo); - }); + }, AUTODEPS); arr.push(2); return arr; } @@ -25,7 +25,7 @@ export const FIXTURE_ENTRYPOINT = { ```javascript // @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel -import { useEffect } from "react"; +import { useEffect, AUTODEPS } from "react"; function Component(t0) { const { foo } = t0; @@ -47,9 +47,9 @@ 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":{"reason":"Updating a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the mutation before calling useEffect()","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":9,"column":2,"index":226},"end":{"line":9,"column":5,"index":229},"filename":"mutate-after-useeffect.ts","identifierName":"arr"}}} -{"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} +{"kind":"CompileError","fnLoc":{"start":{"line":4,"column":0,"index":143},"end":{"line":11,"column":1,"index":274},"filename":"mutate-after-useeffect.ts"},"detail":{"reason":"Updating a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the mutation before calling useEffect()","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":9,"column":2,"index":246},"end":{"line":9,"column":5,"index":249},"filename":"mutate-after-useeffect.ts","identifierName":"arr"}}} +{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":6,"column":2,"index":191},"end":{"line":8,"column":14,"index":242},"filename":"mutate-after-useeffect.ts"},"decorations":[{"start":{"line":7,"column":4,"index":213},"end":{"line":7,"column":7,"index":216},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},{"start":{"line":7,"column":4,"index":213},"end":{"line":7,"column":7,"index":216},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},{"start":{"line":7,"column":13,"index":222},"end":{"line":7,"column":16,"index":225},"filename":"mutate-after-useeffect.ts","identifierName":"foo"}]} +{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":143},"end":{"line":11,"column":1,"index":274},"filename":"mutate-after-useeffect.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0} ``` ### Eval output diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect.js index 6f237c89b4d4f..21298604043a4 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect.js @@ -1,11 +1,11 @@ // @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel -import {useEffect} from 'react'; +import {useEffect, AUTODEPS} from 'react'; function Component({foo}) { const arr = []; useEffect(() => { arr.push(foo); - }); + }, AUTODEPS); arr.push(2); return arr; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/reactive-setState.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/reactive-setState.expect.md index de7fc2903ebd2..9f9786e4be830 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/reactive-setState.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/reactive-setState.expect.md @@ -3,7 +3,7 @@ ```javascript // @inferEffectDependencies @enableNewMutationAliasingModel -import {useEffect, useState} from 'react'; +import {useEffect, useState, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; /* @@ -18,7 +18,7 @@ function ReactiveRefInEffect(props) { } else { setState = setState2; } - useEffect(() => print(setState)); + useEffect(() => print(setState), AUTODEPS); } ``` @@ -27,7 +27,7 @@ function ReactiveRefInEffect(props) { ```javascript import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies @enableNewMutationAliasingModel -import { useEffect, useState } from "react"; +import { useEffect, useState, AUTODEPS } from "react"; import { print } from "shared-runtime"; /* diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/reactive-setState.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/reactive-setState.js index 158881eb0204d..d351998032437 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/reactive-setState.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/reactive-setState.js @@ -1,5 +1,5 @@ // @inferEffectDependencies @enableNewMutationAliasingModel -import {useEffect, useState} from 'react'; +import {useEffect, useState, AUTODEPS} from 'react'; import {print} from 'shared-runtime'; /* @@ -14,5 +14,5 @@ function ReactiveRefInEffect(props) { } else { setState = setState2; } - useEffect(() => print(setState)); + useEffect(() => print(setState), AUTODEPS); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/retry-no-emit.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/retry-no-emit.expect.md index 2e678796cd0fb..b828b79ac2e0c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/retry-no-emit.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/retry-no-emit.expect.md @@ -5,13 +5,14 @@ // @inferEffectDependencies @noEmit @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel import {print} from 'shared-runtime'; import useEffectWrapper from 'useEffectWrapper'; +import {AUTODEPS} from 'react'; function Foo({propVal}) { const arr = [propVal]; - useEffectWrapper(() => print(arr)); + useEffectWrapper(() => print(arr), AUTODEPS); const arr2 = []; - useEffectWrapper(() => arr2.push(propVal)); + useEffectWrapper(() => arr2.push(propVal), AUTODEPS); arr2.push(2); return {arr, arr2}; } @@ -30,13 +31,14 @@ export const FIXTURE_ENTRYPOINT = { // @inferEffectDependencies @noEmit @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel import { print } from "shared-runtime"; import useEffectWrapper from "useEffectWrapper"; +import { AUTODEPS } from "react"; function Foo({ propVal }) { const arr = [propVal]; - useEffectWrapper(() => print(arr)); + useEffectWrapper(() => print(arr), AUTODEPS); const arr2 = []; - useEffectWrapper(() => arr2.push(propVal)); + useEffectWrapper(() => arr2.push(propVal), AUTODEPS); arr2.push(2); return { arr, arr2 }; } @@ -52,10 +54,10 @@ 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":{"reason":"Updating a value previously passed as an argument to a hook is not allowed. Consider moving the mutation before calling the hook","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":11,"column":2,"index":352},"end":{"line":11,"column":6,"index":356},"filename":"retry-no-emit.ts","identifierName":"arr2"}}} -{"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} +{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":227},"end":{"line":14,"column":1,"index":441},"filename":"retry-no-emit.ts"},"detail":{"reason":"Updating a value previously passed as an argument to a hook is not allowed. Consider moving the mutation before calling the hook","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":12,"column":2,"index":404},"end":{"line":12,"column":6,"index":408},"filename":"retry-no-emit.ts","identifierName":"arr2"}}} +{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":8,"column":2,"index":280},"end":{"line":8,"column":46,"index":324},"filename":"retry-no-emit.ts"},"decorations":[{"start":{"line":8,"column":31,"index":309},"end":{"line":8,"column":34,"index":312},"filename":"retry-no-emit.ts","identifierName":"arr"}]} +{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":11,"column":2,"index":348},"end":{"line":11,"column":54,"index":400},"filename":"retry-no-emit.ts"},"decorations":[{"start":{"line":11,"column":25,"index":371},"end":{"line":11,"column":29,"index":375},"filename":"retry-no-emit.ts","identifierName":"arr2"},{"start":{"line":11,"column":25,"index":371},"end":{"line":11,"column":29,"index":375},"filename":"retry-no-emit.ts","identifierName":"arr2"},{"start":{"line":11,"column":35,"index":381},"end":{"line":11,"column":42,"index":388},"filename":"retry-no-emit.ts","identifierName":"propVal"}]} +{"kind":"CompileSuccess","fnLoc":{"start":{"line":6,"column":0,"index":227},"end":{"line":14,"column":1,"index":441},"filename":"retry-no-emit.ts"},"fnName":"Foo","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0} ``` ### Eval output diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/retry-no-emit.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/retry-no-emit.js index c15f400d3114d..2815a9a28d12e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/retry-no-emit.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/retry-no-emit.js @@ -1,13 +1,14 @@ // @inferEffectDependencies @noEmit @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel import {print} from 'shared-runtime'; import useEffectWrapper from 'useEffectWrapper'; +import {AUTODEPS} from 'react'; function Foo({propVal}) { const arr = [propVal]; - useEffectWrapper(() => print(arr)); + useEffectWrapper(() => print(arr), AUTODEPS); const arr2 = []; - useEffectWrapper(() => arr2.push(propVal)); + useEffectWrapper(() => arr2.push(propVal), AUTODEPS); arr2.push(2); return {arr, arr2}; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/infer-deps-on-retry.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/infer-deps-on-retry.expect.md index 36ed7a3d3689b..29201225afb2c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/infer-deps-on-retry.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/infer-deps-on-retry.expect.md @@ -3,7 +3,7 @@ ```javascript // @inferEffectDependencies @panicThreshold:"none" -import {useRef} from 'react'; +import {useRef, AUTODEPS} from 'react'; import {useSpecialEffect} from 'shared-runtime'; /** @@ -14,9 +14,13 @@ import {useSpecialEffect} from 'shared-runtime'; function useFoo({cond}) { const ref = useRef(); const derived = cond ? ref.current : makeObject(); - useSpecialEffect(() => { - log(derived); - }, [derived]); + useSpecialEffect( + () => { + log(derived); + }, + [derived], + AUTODEPS + ); return ref; } @@ -26,7 +30,7 @@ function useFoo({cond}) { ```javascript // @inferEffectDependencies @panicThreshold:"none" -import { useRef } from "react"; +import { useRef, AUTODEPS } from "react"; import { useSpecialEffect } from "shared-runtime"; /** diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/infer-deps-on-retry.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/infer-deps-on-retry.js index 4f6b908b5397a..75d8186501804 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/infer-deps-on-retry.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/infer-deps-on-retry.js @@ -1,5 +1,5 @@ // @inferEffectDependencies @panicThreshold:"none" -import {useRef} from 'react'; +import {useRef, AUTODEPS} from 'react'; import {useSpecialEffect} from 'shared-runtime'; /** @@ -10,8 +10,12 @@ import {useSpecialEffect} from 'shared-runtime'; function useFoo({cond}) { const ref = useRef(); const derived = cond ? ref.current : makeObject(); - useSpecialEffect(() => { - log(derived); - }, [derived]); + useSpecialEffect( + () => { + log(derived); + }, + [derived], + AUTODEPS + ); return ref; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/fire-and-autodeps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/fire-and-autodeps.expect.md deleted file mode 100644 index 46e813bf9d6cb..0000000000000 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/fire-and-autodeps.expect.md +++ /dev/null @@ -1,59 +0,0 @@ - -## Input - -```javascript -// @enableFire @inferEffectDependencies -import {fire, useEffect} from 'react'; - -function Component(props) { - const foo = arg => { - console.log(arg, props.bar); - }; - useEffect(() => { - fire(foo(props)); - }); - - return null; -} - -``` - -## Code - -```javascript -import { c as _c, useFire } from "react/compiler-runtime"; // @enableFire @inferEffectDependencies -import { fire, useEffect } from "react"; - -function Component(props) { - const $ = _c(5); - let t0; - if ($[0] !== props.bar) { - t0 = (arg) => { - console.log(arg, props.bar); - }; - $[0] = props.bar; - $[1] = t0; - } else { - t0 = $[1]; - } - const foo = t0; - const t1 = useFire(foo); - let t2; - if ($[2] !== props || $[3] !== t1) { - t2 = () => { - t1(props); - }; - $[2] = props; - $[3] = t1; - $[4] = t2; - } else { - t2 = $[4]; - } - useEffect(t2, [props]); - return null; -} - -``` - -### Eval output -(kind: exception) Fixture not implemented \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/fire-and-autodeps.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/fire-and-autodeps.js deleted file mode 100644 index e2a0068a19067..0000000000000 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/fire-and-autodeps.js +++ /dev/null @@ -1,13 +0,0 @@ -// @enableFire @inferEffectDependencies -import {fire, useEffect} from 'react'; - -function Component(props) { - const foo = arg => { - console.log(arg, props.bar); - }; - useEffect(() => { - fire(foo(props)); - }); - - return null; -}