[compiler] Prevent overriding a derivationEntry on effect mutation and instead update typeOfValue and fix infinite loops

Summary:
With this we are now comparing a snapshot of the derivationCache with the new changes every time we are done recording the derivations happening in the HIR.

We have to do this after recording everything since we still do some mutations on the cache when recording mutations.



Test Plan:
Test the following in playground:
```
// @validateNoDerivedComputationsInEffects_exp

function Component({ value }) {
  const [checked, setChecked] = useState('');

  useEffect(() => {
    setChecked(value === '' ? [] : value.split(','));
  }, [value]);

  return (
    <div>{checked}</div>
  )
}
```

This no longer causes an infinite loop.

Added a test case in the next PR in the stack

.github/ISSUE_TEMPLATE/compiler_bug_report.yml

@@ -11,7 +11,7 @@ body:
     options:
       - label: React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
       - label: babel-plugin-react-compiler (build issue installing or using the Babel plugin)
-      - label: eslint-plugin-react-hooks (build issue installing or using the eslint plugin)
+      - label: eslint-plugin-react-compiler (build issue installing or using the eslint plugin)
       - label: react-compiler-healthcheck (build issue installing or using the healthcheck script)
 - type: input
   attributes:

.github/workflows/runtime_commit_artifacts.yml

@@ -162,13 +162,10 @@ jobs:
           mv build/facebook-react-native/react-is/cjs/ $BASE_FOLDER/RKJSModules/vendor/react/react-is/
           mv build/facebook-react-native/react-test-renderer/cjs/ $BASE_FOLDER/RKJSModules/vendor/react/react-test-renderer/
 
-          # Delete the OSS renderers, these are sync'd to RN separately.
+          # Delete OSS renderer. OSS renderer is synced through internal script.
           RENDERER_FOLDER=$BASE_FOLDER/react-native-github/Libraries/Renderer/implementations/
           rm $RENDERER_FOLDER/ReactFabric-{dev,prod,profiling}.js
-          
-          # Delete the legacy renderer shim, this is not sync'd and will get deleted in the future.
-          SHIM_FOLDER=$BASE_FOLDER/react-native-github/Libraries/Renderer/shims/
-          rm $SHIM_FOLDER/ReactNative.js
+          rm $RENDERER_FOLDER/ReactNativeRenderer-{dev,prod,profiling}.js
 
           # Copy eslint-plugin-react-hooks
           # NOTE: This is different from www, here we include the full package

compiler/apps/playground/package.json

@@ -27,7 +27,7 @@
     "@babel/types": "7.26.3",
     "@heroicons/react": "^1.0.6",
     "@monaco-editor/react": "^4.8.0-rc.2",
-    "@playwright/test": "^1.56.1",
+    "@playwright/test": "^1.51.1",
     "@use-gesture/react": "^10.2.22",
     "hermes-eslint": "^0.25.0",
     "hermes-parser": "^0.25.0",

compiler/apps/playground/yarn.lock

@@ -798,12 +798,12 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
-"@playwright/test@^1.56.1":
-  version "1.56.1"
-  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.56.1.tgz#6e3bf3d0c90c5cf94bf64bdb56fd15a805c8bd3f"
-  integrity sha512-vSMYtL/zOcFpvJCW71Q/OEGQb7KYBPAdKh35WNSkaZA75JlAO8ED8UN6GUNTm3drWomcbcqRPFqQbLae8yBTdg==
+"@playwright/test@^1.51.1":
+  version "1.51.1"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.51.1.tgz#75357d513221a7be0baad75f01e966baf9c41a2e"
+  integrity sha512-nM+kEaTSAoVlXmMPH10017vn3FSiFqr/bh4fKg9vmAdMfd9SDqRZNvPSiAHADc/itWak+qPvMPZQOPwCBW7k7Q==
   dependencies:
-    playwright "1.56.1"
+    playwright "1.51.1"
 
 "@rtsao/scc@^1.1.0":
   version "1.1.0"
@@ -854,11 +854,23 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.9.tgz#02d013de7058cea16d36168ef2fc653464cfbad4"
   integrity sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==
 
+"@types/react-dom@19.1.9":
+  version "19.1.9"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.1.9.tgz#5ab695fce1e804184767932365ae6569c11b4b4b"
+  integrity sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==
+
 "@types/react-dom@19.2":
   version "19.2.2"
   resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.2.tgz#a4cc874797b7ddc9cb180ef0d5dc23f596fc2332"
   integrity sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==
 
+"@types/react@19.1.12":
+  version "19.1.12"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.1.12.tgz#7bfaa76aabbb0b4fe0493c21a3a7a93d33e8937b"
+  integrity sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==
+  dependencies:
+    csstype "^3.0.2"
+
 "@types/react@19.2":
   version "19.2.2"
   resolved "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz#ba123a75d4c2a51158697160a4ea2ff70aa6bf36"
@@ -3453,17 +3465,17 @@ pirates@^4.0.1:
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
   integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
 
-playwright-core@1.56.1:
-  version "1.56.1"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.56.1.tgz#24a66481e5cd33a045632230aa2c4f0cb6b1db3d"
-  integrity sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==
+playwright-core@1.51.1:
+  version "1.51.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.51.1.tgz#d57f0393e02416f32a47cf82b27533656a8acce1"
+  integrity sha512-/crRMj8+j/Nq5s8QcvegseuyeZPxpQCZb6HNk3Sos3BlZyAknRjoyJPFWkpNn8v0+P3WiwqFF8P+zQo4eqiNuw==
 
-playwright@1.56.1:
-  version "1.56.1"
-  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.56.1.tgz#62e3b99ddebed0d475e5936a152c88e68be55fbf"
-  integrity sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==
+playwright@1.51.1:
+  version "1.51.1"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.51.1.tgz#ae1467ee318083968ad28d6990db59f47a55390f"
+  integrity sha512-kkx+MB2KQRkyxjYPc3a0wLZZoDczmppyGJIvQ43l+aZihkaVvmu/21kiyaHeHjiFxjxNNFnUncKmcGIyOojsaw==
   dependencies:
-    playwright-core "1.56.1"
+    playwright-core "1.51.1"
   optionalDependencies:
     fsevents "2.3.2"
 

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

@@ -105,7 +105,6 @@ import {inferMutationAliasingRanges} from '../Inference/InferMutationAliasingRan
 import {validateNoDerivedComputationsInEffects} from '../Validation/ValidateNoDerivedComputationsInEffects';
 import {validateNoDerivedComputationsInEffects_exp} from '../Validation/ValidateNoDerivedComputationsInEffects_exp';
 import {nameAnonymousFunctions} from '../Transform/NameAnonymousFunctions';
-import {validateSourceLocations} from '../Validation/ValidateSourceLocations';
 
 export type CompilerPipelineValue =
   | {kind: 'ast'; name: string; value: CodegenFunction}
@@ -273,12 +272,14 @@ function runWithEnvironment(
       validateNoSetStateInRender(hir).unwrap();
     }
 
-    if (env.config.validateNoDerivedComputationsInEffects_exp) {
-      env.logErrors(validateNoDerivedComputationsInEffects_exp(hir));
-    } else if (env.config.validateNoDerivedComputationsInEffects) {
+    if (env.config.validateNoDerivedComputationsInEffects) {
       validateNoDerivedComputationsInEffects(hir);
     }
 
+    if (env.config.validateNoDerivedComputationsInEffects_exp) {
+      validateNoDerivedComputationsInEffects_exp(hir);
+    }
+
     if (env.config.validateNoSetStateInEffects) {
       env.logErrors(validateNoSetStateInEffects(hir, env));
     }
@@ -558,10 +559,6 @@ function runWithEnvironment(
     log({kind: 'ast', name: 'Codegen (outlined)', value: outlined.fn});
   }
 
-  if (env.config.validateSourceLocations) {
-    validateSourceLocations(func, ast).unwrap();
-  }
-
   /**
    * This flag should be only set for unit / fixture tests to check
    * that Forget correctly handles unexpected errors (e.g. exceptions

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

@@ -364,13 +364,6 @@ export const EnvironmentConfigSchema = z.object({
   validateNoCapitalizedCalls: z.nullable(z.array(z.string())).default(null),
   validateBlocklistedImports: z.nullable(z.array(z.string())).default(null),
 
-  /**
-   * Validates that AST nodes generated during codegen have proper source locations.
-   * This is useful for debugging issues with source maps and Istanbul coverage.
-   * When enabled, the compiler will error if important source locations are missing in the generated AST.
-   */
-  validateSourceLocations: z.boolean().default(false),
-
   /**
    * Validate against impure functions called during render
    */

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

@@ -954,7 +954,6 @@ function applyEffect(
         case ValueKind.Primitive: {
           break;
         }
-        case ValueKind.MaybeFrozen:
         case ValueKind.Frozen: {
           sourceType = 'frozen';
           break;

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

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {Result} from '../Utils/Result';
 import {CompilerDiagnostic, CompilerError, Effect} from '..';
 import {ErrorCategory} from '../CompilerError';
 import {
@@ -21,6 +20,7 @@ import {
   isUseStateType,
   BasicBlock,
   isUseRefType,
+  GeneratedSource,
   SourceLocation,
 } from '../HIR';
 import {eachInstructionLValue, eachInstructionOperand} from '../HIR/visitors';
@@ -33,7 +33,6 @@ type DerivationMetadata = {
   typeOfValue: TypeOfValue;
   place: Place;
   sourcesIds: Set<IdentifierId>;
-  isStateSource: boolean;
 };
 
 type ValidationContext = {
@@ -41,8 +40,8 @@ type ValidationContext = {
   readonly errors: CompilerError;
   readonly derivationCache: DerivationCache;
   readonly effects: Set<HIRFunction>;
-  readonly setStateLoads: Map<IdentifierId, IdentifierId | null>;
-  readonly setStateUsages: Map<IdentifierId, Set<SourceLocation>>;
+  readonly setStateCache: Map<string | undefined | null, Array<Place>>;
+  readonly effectSetStateCache: Map<string | undefined | null, Array<Place>>;
 };
 
 class DerivationCache {
@@ -57,7 +56,6 @@ class DerivationCache {
         place: value.place,
         sourcesIds: new Set(value.sourcesIds),
         typeOfValue: value.typeOfValue,
-        isStateSource: value.isStateSource,
       });
     }
   }
@@ -97,28 +95,41 @@ class DerivationCache {
     derivedVar: Place,
     sourcesIds: Set<IdentifierId>,
     typeOfValue: TypeOfValue,
-    isStateSource: boolean,
   ): void {
-    let finalIsSource = isStateSource;
-    if (!finalIsSource) {
-      for (const sourceId of sourcesIds) {
-        const sourceMetadata = this.cache.get(sourceId);
+    let newValue: DerivationMetadata = {
+      place: derivedVar,
+      sourcesIds: new Set(),
+      typeOfValue: typeOfValue ?? 'ignored',
+    };
+
+    if (sourcesIds !== undefined) {
+      for (const id of sourcesIds) {
+        const sourcePlace = this.cache.get(id)?.place;
+
+        if (sourcePlace === undefined) {
+          continue;
+        }
+
+        /*
+         * If the identifier of the source is a promoted identifier, then
+         *  we should set the target as the source.
+         */
         if (
-          sourceMetadata?.isStateSource &&
-          sourceMetadata.place.identifier.name?.kind !== 'named'
+          sourcePlace.identifier.name === null ||
+          sourcePlace.identifier.name?.kind === 'promoted'
         ) {
-          finalIsSource = true;
-          break;
+          newValue.sourcesIds.add(derivedVar.identifier.id);
+        } else {
+          newValue.sourcesIds.add(sourcePlace.identifier.id);
         }
       }
     }
 
-    this.cache.set(derivedVar.identifier.id, {
-      place: derivedVar,
-      sourcesIds: sourcesIds,
-      typeOfValue: typeOfValue ?? 'ignored',
-      isStateSource: finalIsSource,
-    });
+    if (newValue.sourcesIds.size === 0) {
+      newValue.sourcesIds.add(derivedVar.identifier.id);
+    }
+
+    this.cache.set(derivedVar.identifier.id, newValue);
   }
 
   private isDerivationEqual(
@@ -140,14 +151,6 @@ class DerivationCache {
   }
 }
 
-function isNamedIdentifier(place: Place): place is Place & {
-  identifier: {name: NonNullable<Place['identifier']['name']>};
-} {
-  return (
-    place.identifier.name !== null && place.identifier.name.kind === 'named'
-  );
-}
-
 /**
  * Validates that useEffect is not used for derived computations which could/should
  * be performed in render.
@@ -173,22 +176,25 @@ function isNamedIdentifier(place: Place): place is Place & {
  */
 export function validateNoDerivedComputationsInEffects_exp(
   fn: HIRFunction,
-): Result<void, CompilerError> {
+): void {
   const functions: Map<IdentifierId, FunctionExpression> = new Map();
   const derivationCache = new DerivationCache();
   const errors = new CompilerError();
   const effects: Set<HIRFunction> = new Set();
 
-  const setStateLoads: Map<IdentifierId, IdentifierId> = new Map();
-  const setStateUsages: Map<IdentifierId, Set<SourceLocation>> = new Map();
+  const setStateCache: Map<string | undefined | null, Array<Place>> = new Map();
+  const effectSetStateCache: Map<
+    string | undefined | null,
+    Array<Place>
+  > = new Map();
 
   const context: ValidationContext = {
     functions,
     errors,
     derivationCache,
     effects,
-    setStateLoads,
-    setStateUsages,
+    setStateCache,
+    effectSetStateCache,
   };
 
   if (fn.fnType === 'Hook') {
@@ -196,9 +202,8 @@ export function validateNoDerivedComputationsInEffects_exp(
       if (param.kind === 'Identifier') {
         context.derivationCache.cache.set(param.identifier.id, {
           place: param,
-          sourcesIds: new Set(),
+          sourcesIds: new Set([param.identifier.id]),
           typeOfValue: 'fromProps',
-          isStateSource: true,
         });
       }
     }
@@ -207,9 +212,8 @@ export function validateNoDerivedComputationsInEffects_exp(
     if (props != null && props.kind === 'Identifier') {
       context.derivationCache.cache.set(props.identifier.id, {
         place: props,
-        sourcesIds: new Set(),
+        sourcesIds: new Set([props.identifier.id]),
         typeOfValue: 'fromProps',
-        isStateSource: true,
       });
     }
   }
@@ -233,7 +237,9 @@ export function validateNoDerivedComputationsInEffects_exp(
     validateEffect(effect, context);
   }
 
-  return errors.asResult();
+  if (errors.hasAnyErrors()) {
+    throw errors;
+  }
 }
 
 function recordPhiDerivations(
@@ -261,7 +267,6 @@ function recordPhiDerivations(
         phi.place,
         sourcesIds,
         typeOfValue,
-        false,
       );
     }
   }
@@ -277,69 +282,17 @@ function joinValue(
   return 'fromPropsAndState';
 }
 
-function getRootSetState(
-  key: IdentifierId,
-  loads: Map<IdentifierId, IdentifierId | null>,
-  visited: Set<IdentifierId> = new Set(),
-): IdentifierId | null {
-  if (visited.has(key)) {
-    return null;
-  }
-  visited.add(key);
-
-  const parentId = loads.get(key);
-
-  if (parentId === undefined) {
-    return null;
-  }
-
-  if (parentId === null) {
-    return key;
-  }
-
-  return getRootSetState(parentId, loads, visited);
-}
-
-function maybeRecordSetState(
-  instr: Instruction,
-  loads: Map<IdentifierId, IdentifierId | null>,
-  usages: Map<IdentifierId, Set<SourceLocation>>,
-): void {
-  for (const operand of eachInstructionLValue(instr)) {
-    if (
-      instr.value.kind === 'LoadLocal' &&
-      loads.has(instr.value.place.identifier.id)
-    ) {
-      loads.set(operand.identifier.id, instr.value.place.identifier.id);
-    } else {
-      if (isSetStateType(operand.identifier)) {
-        // this is a root setState
-        loads.set(operand.identifier.id, null);
-      }
-    }
-
-    const rootSetState = getRootSetState(operand.identifier.id, loads);
-    if (rootSetState !== null && usages.get(rootSetState) === undefined) {
-      usages.set(rootSetState, new Set([operand.loc]));
-    }
-  }
-}
-
 function recordInstructionDerivations(
   instr: Instruction,
   context: ValidationContext,
   isFirstPass: boolean,
 ): void {
-  maybeRecordSetState(instr, context.setStateLoads, context.setStateUsages);
-
   let typeOfValue: TypeOfValue = 'ignored';
-  let isSource: boolean = false;
   const sources: Set<IdentifierId> = new Set();
   const {lvalue, value} = instr;
   if (value.kind === 'FunctionExpression') {
     context.functions.set(lvalue.identifier.id, value);
     for (const [, block] of value.loweredFunc.func.body.blocks) {
-      recordPhiDerivations(block, context);
       for (const instr of block.instructions) {
         recordInstructionDerivations(instr, context, isFirstPass);
       }
@@ -358,25 +311,24 @@ function recordInstructionDerivations(
         context.effects.add(effectFunction.loweredFunc.func);
       }
     } else if (isUseStateType(lvalue.identifier) && value.args.length > 0) {
-      typeOfValue = 'fromState';
-      context.derivationCache.addDerivationEntry(
-        lvalue,
-        new Set(),
-        typeOfValue,
-        true,
-      );
-      return;
+      const stateValueSource = value.args[0];
+      if (stateValueSource.kind === 'Identifier') {
+        sources.add(stateValueSource.identifier.id);
+      }
+      typeOfValue = joinValue(typeOfValue, 'fromState');
     }
   }
 
   for (const operand of eachInstructionOperand(instr)) {
-    if (context.setStateLoads.has(operand.identifier.id)) {
-      const rootSetStateId = getRootSetState(
-        operand.identifier.id,
-        context.setStateLoads,
-      );
-      if (rootSetStateId !== null) {
-        context.setStateUsages.get(rootSetStateId)?.add(operand.loc);
+    if (
+      isSetStateType(operand.identifier) &&
+      operand.loc !== GeneratedSource &&
+      isFirstPass
+    ) {
+      if (context.setStateCache.has(operand.loc.identifierName)) {
+        context.setStateCache.get(operand.loc.identifierName)!.push(operand);
+      } else {
+        context.setStateCache.set(operand.loc.identifierName, [operand]);
       }
     }
 
@@ -389,7 +341,9 @@ function recordInstructionDerivations(
     }
 
     typeOfValue = joinValue(typeOfValue, operandMetadata.typeOfValue);
-    sources.add(operand.identifier.id);
+    for (const id of operandMetadata.sourcesIds) {
+      sources.add(id);
+    }
   }
 
   if (typeOfValue === 'ignored') {
@@ -397,12 +351,7 @@ function recordInstructionDerivations(
   }
 
   for (const lvalue of eachInstructionLValue(instr)) {
-    context.derivationCache.addDerivationEntry(
-      lvalue,
-      sources,
-      typeOfValue,
-      isSource,
-    );
+    context.derivationCache.addDerivationEntry(lvalue, sources, typeOfValue);
   }
 
   for (const operand of eachInstructionOperand(instr)) {
@@ -429,7 +378,6 @@ function recordInstructionDerivations(
               operand,
               sources,
               typeOfValue,
-              false,
             );
           }
         }
@@ -463,137 +411,6 @@ function recordInstructionDerivations(
   }
 }
 
-type TreeNode = {
-  name: string;
-  typeOfValue: TypeOfValue;
-  isSource: boolean;
-  children: Array<TreeNode>;
-};
-
-function buildTreeNode(
-  sourceId: IdentifierId,
-  context: ValidationContext,
-  visited: Set<string> = new Set(),
-): Array<TreeNode> {
-  const sourceMetadata = context.derivationCache.cache.get(sourceId);
-  if (!sourceMetadata) {
-    return [];
-  }
-
-  if (sourceMetadata.isStateSource && isNamedIdentifier(sourceMetadata.place)) {
-    return [
-      {
-        name: sourceMetadata.place.identifier.name.value,
-        typeOfValue: sourceMetadata.typeOfValue,
-        isSource: sourceMetadata.isStateSource,
-        children: [],
-      },
-    ];
-  }
-
-  const children: Array<TreeNode> = [];
-
-  const namedSiblings: Set<string> = new Set();
-  for (const childId of sourceMetadata.sourcesIds) {
-    const childNodes = buildTreeNode(
-      childId,
-      context,
-      new Set([
-        ...visited,
-        ...(isNamedIdentifier(sourceMetadata.place)
-          ? [sourceMetadata.place.identifier.name.value]
-          : []),
-      ]),
-    );
-    if (childNodes) {
-      for (const childNode of childNodes) {
-        if (!namedSiblings.has(childNode.name)) {
-          children.push(childNode);
-          namedSiblings.add(childNode.name);
-        }
-      }
-    }
-  }
-
-  if (
-    isNamedIdentifier(sourceMetadata.place) &&
-    !visited.has(sourceMetadata.place.identifier.name.value)
-  ) {
-    return [
-      {
-        name: sourceMetadata.place.identifier.name.value,
-        typeOfValue: sourceMetadata.typeOfValue,
-        isSource: sourceMetadata.isStateSource,
-        children: children,
-      },
-    ];
-  }
-
-  return children;
-}
-
-function renderTree(
-  node: TreeNode,
-  indent: string = '',
-  isLast: boolean = true,
-  propsSet: Set<string>,
-  stateSet: Set<string>,
-): string {
-  const prefix = indent + (isLast ? '└── ' : '├── ');
-  const childIndent = indent + (isLast ? '    ' : '│   ');
-
-  let result = `${prefix}${node.name}`;
-
-  if (node.isSource) {
-    let typeLabel: string;
-    if (node.typeOfValue === 'fromProps') {
-      propsSet.add(node.name);
-      typeLabel = 'Prop';
-    } else if (node.typeOfValue === 'fromState') {
-      stateSet.add(node.name);
-      typeLabel = 'State';
-    } else {
-      propsSet.add(node.name);
-      stateSet.add(node.name);
-      typeLabel = 'Prop and State';
-    }
-    result += ` (${typeLabel})`;
-  }
-
-  if (node.children.length > 0) {
-    result += '\n';
-    node.children.forEach((child, index) => {
-      const isLastChild = index === node.children.length - 1;
-      result += renderTree(child, childIndent, isLastChild, propsSet, stateSet);
-      if (index < node.children.length - 1) {
-        result += '\n';
-      }
-    });
-  }
-
-  return result;
-}
-
-function getFnLocalDeps(
-  fn: FunctionExpression | undefined,
-): Set<IdentifierId> | undefined {
-  if (!fn) {
-    return undefined;
-  }
-
-  const deps: Set<IdentifierId> = new Set();
-
-  for (const [, block] of fn.loweredFunc.func.body.blocks) {
-    for (const instr of block.instructions) {
-      if (instr.value.kind === 'LoadLocal') {
-        deps.add(instr.value.place.identifier.id);
-      }
-    }
-  }
-
-  return deps;
-}
-
 function validateEffect(
   effectFunction: HIRFunction,
   context: ValidationContext,
@@ -602,33 +419,13 @@ function validateEffect(
 
   const effectDerivedSetStateCalls: Array<{
     value: CallExpression;
-    id: IdentifierId;
+    loc: SourceLocation;
     sourceIds: Set<IdentifierId>;
     typeOfValue: TypeOfValue;
   }> = [];
 
-  const effectSetStateUsages: Map<
-    IdentifierId,
-    Set<SourceLocation>
-  > = new Map();
-
-  let cleanUpFunctionDeps: Set<IdentifierId> | undefined;
-
   const globals: Set<IdentifierId> = new Set();
   for (const block of effectFunction.body.blocks.values()) {
-    /*
-     * if the block is in an effect and is of type return then its an effect's cleanup function
-     * if the cleanup function depends on a value from which effect-set state is derived then
-     * we can't validate
-     */
-    if (
-      block.terminal.kind === 'return' &&
-      block.terminal.returnVariant === 'Explicit'
-    ) {
-      cleanUpFunctionDeps = getFnLocalDeps(
-        context.functions.get(block.terminal.value.identifier.id),
-      );
-    }
     for (const pred of block.preds) {
       if (!seenBlocks.has(pred)) {
         // skip if block has a back edge
@@ -642,16 +439,19 @@ function validateEffect(
         return;
       }
 
-      maybeRecordSetState(instr, context.setStateLoads, effectSetStateUsages);
-
       for (const operand of eachInstructionOperand(instr)) {
-        if (context.setStateLoads.has(operand.identifier.id)) {
-          const rootSetStateId = getRootSetState(
-            operand.identifier.id,
-            context.setStateLoads,
-          );
-          if (rootSetStateId !== null) {
-            effectSetStateUsages.get(rootSetStateId)?.add(operand.loc);
+        if (
+          isSetStateType(operand.identifier) &&
+          operand.loc !== GeneratedSource
+        ) {
+          if (context.effectSetStateCache.has(operand.loc.identifierName)) {
+            context.effectSetStateCache
+              .get(operand.loc.identifierName)!
+              .push(operand);
+          } else {
+            context.effectSetStateCache.set(operand.loc.identifierName, [
+              operand,
+            ]);
           }
         }
       }
@@ -669,7 +469,7 @@ function validateEffect(
         if (argMetadata !== undefined) {
           effectDerivedSetStateCalls.push({
             value: instr.value,
-            id: instr.value.callee.identifier.id,
+            loc: instr.value.callee.loc,
             sourceIds: argMetadata.sourcesIds,
             typeOfValue: argMetadata.typeOfValue,
           });
@@ -703,74 +503,37 @@ function validateEffect(
   }
 
   for (const derivedSetStateCall of effectDerivedSetStateCalls) {
-    const rootSetStateCall = getRootSetState(
-      derivedSetStateCall.id,
-      context.setStateLoads,
-    );
-
     if (
-      rootSetStateCall !== null &&
-      effectSetStateUsages.has(rootSetStateCall) &&
-      context.setStateUsages.has(rootSetStateCall) &&
-      effectSetStateUsages.get(rootSetStateCall)!.size ===
-        context.setStateUsages.get(rootSetStateCall)!.size - 1
+      derivedSetStateCall.loc !== GeneratedSource &&
+      context.effectSetStateCache.has(derivedSetStateCall.loc.identifierName) &&
+      context.setStateCache.has(derivedSetStateCall.loc.identifierName) &&
+      context.effectSetStateCache.get(derivedSetStateCall.loc.identifierName)!
+        .length ===
+        context.setStateCache.get(derivedSetStateCall.loc.identifierName)!
+          .length -
+          1
     ) {
-      const propsSet = new Set<string>();
-      const stateSet = new Set<string>();
+      const derivedDepsStr = Array.from(derivedSetStateCall.sourceIds)
+        .map(sourceId => {
+          const sourceMetadata = context.derivationCache.cache.get(sourceId);
+          return sourceMetadata?.place.identifier.name?.value;
+        })
+        .filter(Boolean)
+        .join(', ');
 
-      const rootNodesMap = new Map<string, TreeNode>();
-      for (const id of derivedSetStateCall.sourceIds) {
-        const nodes = buildTreeNode(id, context);
-        for (const node of nodes) {
-          if (!rootNodesMap.has(node.name)) {
-            rootNodesMap.set(node.name, node);
-          }
-        }
+      let description;
+
+      if (derivedSetStateCall.typeOfValue === 'fromProps') {
+        description = `From props: [${derivedDepsStr}]`;
+      } else if (derivedSetStateCall.typeOfValue === 'fromState') {
+        description = `From local state: [${derivedDepsStr}]`;
+      } else {
+        description = `From props and local state: [${derivedDepsStr}]`;
       }
-      const rootNodes = Array.from(rootNodesMap.values());
-
-      const trees = rootNodes.map((node, index) =>
-        renderTree(
-          node,
-          '',
-          index === rootNodes.length - 1,
-          propsSet,
-          stateSet,
-        ),
-      );
-
-      for (const dep of derivedSetStateCall.sourceIds) {
-        if (cleanUpFunctionDeps !== undefined && cleanUpFunctionDeps.has(dep)) {
-          return;
-        }
-      }
-
-      const propsArr = Array.from(propsSet);
-      const stateArr = Array.from(stateSet);
-
-      let rootSources = '';
-      if (propsArr.length > 0) {
-        rootSources += `Props: [${propsArr.join(', ')}]`;
-      }
-      if (stateArr.length > 0) {
-        if (rootSources) rootSources += '\n';
-        rootSources += `State: [${stateArr.join(', ')}]`;
-      }
-
-      const description = `Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user
-
-This setState call is setting a derived value that depends on the following reactive sources:
-
-${rootSources}
-
-Data Flow Tree:
-${trees.join('\n')}
-
-See: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state`;
 
       context.errors.pushDiagnostic(
         CompilerDiagnostic.create({
-          description: description,
+          description: `Derived values (${description}) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user`,
           category: ErrorCategory.EffectDerivationsOfState,
           reason:
             'You might not need an effect. Derive values in render, not effects.',

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

@@ -1,206 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import {NodePath} from '@babel/traverse';
-import * as t from '@babel/types';
-import {CompilerDiagnostic, CompilerError, ErrorCategory} from '..';
-import {CodegenFunction} from '../ReactiveScopes';
-import {Result} from '../Utils/Result';
-
-/**
- * IMPORTANT: This validation is only intended for use in unit tests.
- * It is not intended for use in production.
- *
- * This validation is used to ensure that the generated AST has proper source locations
- * for "important" original nodes.
- *
- * There's one big gotcha with this validation: it only works if the "important" original nodes
- * are not optimized away by the compiler.
- *
- * When that scenario happens, we should just update the fixture to not include a node that has no
- * corresponding node in the generated AST due to being completely removed during compilation.
- */
-
-/**
- * Some common node types that are important for coverage tracking.
- * Based on istanbul-lib-instrument
- */
-const IMPORTANT_INSTRUMENTED_TYPES = new Set([
-  'ArrowFunctionExpression',
-  'AssignmentPattern',
-  'ObjectMethod',
-  'ExpressionStatement',
-  'BreakStatement',
-  'ContinueStatement',
-  'ReturnStatement',
-  'ThrowStatement',
-  'TryStatement',
-  'VariableDeclarator',
-  'IfStatement',
-  'ForStatement',
-  'ForInStatement',
-  'ForOfStatement',
-  'WhileStatement',
-  'DoWhileStatement',
-  'SwitchStatement',
-  'SwitchCase',
-  'WithStatement',
-  'FunctionDeclaration',
-  'FunctionExpression',
-  'LabeledStatement',
-  'ConditionalExpression',
-  'LogicalExpression',
-]);
-
-/**
- * Check if a node is a manual memoization call that the compiler optimizes away.
- * These include useMemo and useCallback calls, which are intentionally removed
- * by the DropManualMemoization pass.
- */
-function isManualMemoization(node: t.Node): boolean {
-  // Check if this is a useMemo/useCallback call expression
-  if (t.isCallExpression(node)) {
-    const callee = node.callee;
-    if (t.isIdentifier(callee)) {
-      return callee.name === 'useMemo' || callee.name === 'useCallback';
-    }
-    if (
-      t.isMemberExpression(callee) &&
-      t.isIdentifier(callee.property) &&
-      t.isIdentifier(callee.object)
-    ) {
-      return (
-        callee.object.name === 'React' &&
-        (callee.property.name === 'useMemo' ||
-          callee.property.name === 'useCallback')
-      );
-    }
-  }
-
-  return false;
-}
-
-/**
- * Create a location key for comparison. We compare by line/column/source,
- * not by object identity.
- */
-function locationKey(loc: t.SourceLocation): string {
-  return `${loc.start.line}:${loc.start.column}-${loc.end.line}:${loc.end.column}`;
-}
-
-/**
- * Validates that important source locations from the original code are preserved
- * in the generated AST. This ensures that Istanbul coverage instrumentation can
- * properly map back to the original source code.
- *
- * The validator:
- * 1. Collects locations from "important" nodes in the original AST (those that
- *    Istanbul instruments for coverage tracking)
- * 2. Exempts known compiler optimizations (useMemo/useCallback removal)
- * 3. Verifies that all important locations appear somewhere in the generated AST
- *
- * Missing locations can cause Istanbul to fail to track coverage for certain
- * code paths, leading to inaccurate coverage reports.
- */
-export function validateSourceLocations(
-  func: NodePath<
-    t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
-  >,
-  generatedAst: CodegenFunction,
-): Result<void, CompilerError> {
-  const errors = new CompilerError();
-
-  // Step 1: Collect important locations from the original source
-  const importantOriginalLocations = new Map<
-    string,
-    {loc: t.SourceLocation; nodeType: string}
-  >();
-
-  func.traverse({
-    enter(path) {
-      const node = path.node;
-
-      // Only track node types that Istanbul instruments
-      if (!IMPORTANT_INSTRUMENTED_TYPES.has(node.type)) {
-        return;
-      }
-
-      // Skip manual memoization that the compiler intentionally removes
-      if (isManualMemoization(node)) {
-        return;
-      }
-
-      // Collect the location if it exists
-      if (node.loc) {
-        const key = locationKey(node.loc);
-        importantOriginalLocations.set(key, {
-          loc: node.loc,
-          nodeType: node.type,
-        });
-      }
-    },
-  });
-
-  // Step 2: Collect all locations from the generated AST
-  const generatedLocations = new Set<string>();
-
-  function collectGeneratedLocations(node: t.Node): void {
-    if (node.loc) {
-      generatedLocations.add(locationKey(node.loc));
-    }
-
-    // Use Babel's VISITOR_KEYS to traverse only actual node properties
-    const keys = t.VISITOR_KEYS[node.type as keyof typeof t.VISITOR_KEYS];
-
-    if (!keys) {
-      return;
-    }
-
-    for (const key of keys) {
-      const value = (node as any)[key];
-
-      if (Array.isArray(value)) {
-        for (const item of value) {
-          if (t.isNode(item)) {
-            collectGeneratedLocations(item);
-          }
-        }
-      } else if (t.isNode(value)) {
-        collectGeneratedLocations(value);
-      }
-    }
-  }
-
-  // Collect from main function body
-  collectGeneratedLocations(generatedAst.body);
-
-  // Collect from outlined functions
-  for (const outlined of generatedAst.outlined) {
-    collectGeneratedLocations(outlined.fn.body);
-  }
-
-  // Step 3: Validate that all important locations are preserved
-  for (const [key, {loc, nodeType}] of importantOriginalLocations) {
-    if (!generatedLocations.has(key)) {
-      errors.pushDiagnostic(
-        CompilerDiagnostic.create({
-          category: ErrorCategory.Todo,
-          reason: 'Important source location missing in generated code',
-          description:
-            `Source location for ${nodeType} is missing in the generated output. This can cause coverage instrumentation ` +
-            `to fail to track this code properly, resulting in inaccurate coverage reports.`,
-        }).withDetails({
-          kind: 'error',
-          loc,
-          message: null,
-        }),
-      );
-    }
-  }
-
-  return errors.asResult();
-}

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

@@ -12,5 +12,4 @@ export {validateNoCapitalizedCalls} from './ValidateNoCapitalizedCalls';
 export {validateNoRefAccessInRender} from './ValidateNoRefAccessInRender';
 export {validateNoSetStateInRender} from './ValidateNoSetStateInRender';
 export {validatePreservedManualMemoization} from './ValidatePreservedManualMemoization';
-export {validateSourceLocations} from './ValidateSourceLocations';
 export {validateUseMemo} from './ValidateUseMemo';

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-conditionally-in-effect.expect.md

@@ -1,86 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-function Component({value, enabled}) {
-  const [localValue, setLocalValue] = useState('');
-
-  useEffect(() => {
-    if (enabled) {
-      setLocalValue(value);
-    } else {
-      setLocalValue('disabled');
-    }
-  }, [value, enabled]);
-
-  return <div>{localValue}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{value: 'test', enabled: true}],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import { useEffect, useState } from "react";
-
-function Component(t0) {
-  const $ = _c(6);
-  const { value, enabled } = t0;
-  const [localValue, setLocalValue] = useState("");
-  let t1;
-  let t2;
-  if ($[0] !== enabled || $[1] !== value) {
-    t1 = () => {
-      if (enabled) {
-        setLocalValue(value);
-      } else {
-        setLocalValue("disabled");
-      }
-    };
-
-    t2 = [value, enabled];
-    $[0] = enabled;
-    $[1] = value;
-    $[2] = t1;
-    $[3] = t2;
-  } else {
-    t1 = $[2];
-    t2 = $[3];
-  }
-  useEffect(t1, t2);
-  let t3;
-  if ($[4] !== localValue) {
-    t3 = <div>{localValue}</div>;
-    $[4] = localValue;
-    $[5] = t3;
-  } else {
-    t3 = $[5];
-  }
-  return t3;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{ value: "test", enabled: true }],
-};
-
-```
-
-## Logs
-
-```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [value]\n\nData Flow Tree:\n└── value (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":9,"column":6,"index":244},"end":{"line":9,"column":19,"index":257},"filename":"derived-state-conditionally-in-effect.ts","identifierName":"setLocalValue"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":16,"column":1,"index":378},"filename":"derived-state-conditionally-in-effect.ts"},"fnName":"Component","memoSlots":6,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
-      
-### Eval output
-(kind: ok) <div>test</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-default-props.expect.md

@@ -1,78 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-export default function Component({input = 'empty'}) {
-  const [currInput, setCurrInput] = useState(input);
-  const localConst = 'local const';
-
-  useEffect(() => {
-    setCurrInput(input + localConst);
-  }, [input, localConst]);
-
-  return <div>{currInput}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{input: 'test'}],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import { useEffect, useState } from "react";
-
-export default function Component(t0) {
-  const $ = _c(5);
-  const { input: t1 } = t0;
-  const input = t1 === undefined ? "empty" : t1;
-  const [currInput, setCurrInput] = useState(input);
-  let t2;
-  let t3;
-  if ($[0] !== input) {
-    t2 = () => {
-      setCurrInput(input + "local const");
-    };
-    t3 = [input, "local const"];
-    $[0] = input;
-    $[1] = t2;
-    $[2] = t3;
-  } else {
-    t2 = $[1];
-    t3 = $[2];
-  }
-  useEffect(t2, t3);
-  let t4;
-  if ($[3] !== currInput) {
-    t4 = <div>{currInput}</div>;
-    $[3] = currInput;
-    $[4] = t4;
-  } else {
-    t4 = $[4];
-  }
-  return t4;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{ input: "test" }],
-};
-
-```
-
-## Logs
-
-```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [input]\n\nData Flow Tree:\n└── input (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":9,"column":4,"index":276},"end":{"line":9,"column":16,"index":288},"filename":"derived-state-from-default-props.ts","identifierName":"setCurrInput"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":122},"end":{"line":13,"column":1,"index":372},"filename":"derived-state-from-default-props.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
-      
-### Eval output
-(kind: ok) <div>testlocal const</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-local-state-in-effect.expect.md

@@ -1,77 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-
-import {useEffect, useState} from 'react';
-
-function Component({shouldChange}) {
-  const [count, setCount] = useState(0);
-
-  useEffect(() => {
-    if (shouldChange) {
-      setCount(count + 1);
-    }
-  }, [count]);
-
-  return <div>{count}</div>;
-}
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-
-import { useEffect, useState } from "react";
-
-function Component(t0) {
-  const $ = _c(7);
-  const { shouldChange } = t0;
-  const [count, setCount] = useState(0);
-  let t1;
-  if ($[0] !== count || $[1] !== shouldChange) {
-    t1 = () => {
-      if (shouldChange) {
-        setCount(count + 1);
-      }
-    };
-    $[0] = count;
-    $[1] = shouldChange;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  let t2;
-  if ($[3] !== count) {
-    t2 = [count];
-    $[3] = count;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  useEffect(t1, t2);
-  let t3;
-  if ($[5] !== count) {
-    t3 = <div>{count}</div>;
-    $[5] = count;
-    $[6] = t3;
-  } else {
-    t3 = $[6];
-  }
-  return t3;
-}
-
-```
-
-## Logs
-
-```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nState: [count]\n\nData Flow Tree:\n└── count (State)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":10,"column":6,"index":237},"end":{"line":10,"column":14,"index":245},"filename":"derived-state-from-local-state-in-effect.ts","identifierName":"setCount"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":108},"end":{"line":15,"column":1,"index":310},"filename":"derived-state-from-local-state-in-effect.ts"},"fnName":"Component","memoSlots":7,"memoBlocks":3,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
-      
-### Eval output
-(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-local-state-and-component-scope.expect.md

@@ -1,115 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-function Component({firstName}) {
-  const [lastName, setLastName] = useState('Doe');
-  const [fullName, setFullName] = useState('John');
-
-  const middleName = 'D.';
-
-  useEffect(() => {
-    setFullName(firstName + ' ' + middleName + ' ' + lastName);
-  }, [firstName, middleName, lastName]);
-
-  return (
-    <div>
-      <input value={lastName} onChange={e => setLastName(e.target.value)} />
-      <div>{fullName}</div>
-    </div>
-  );
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{firstName: 'John'}],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import { useEffect, useState } from "react";
-
-function Component(t0) {
-  const $ = _c(12);
-  const { firstName } = t0;
-  const [lastName, setLastName] = useState("Doe");
-  const [fullName, setFullName] = useState("John");
-  let t1;
-  let t2;
-  if ($[0] !== firstName || $[1] !== lastName) {
-    t1 = () => {
-      setFullName(firstName + " " + "D." + " " + lastName);
-    };
-    t2 = [firstName, "D.", lastName];
-    $[0] = firstName;
-    $[1] = lastName;
-    $[2] = t1;
-    $[3] = t2;
-  } else {
-    t1 = $[2];
-    t2 = $[3];
-  }
-  useEffect(t1, t2);
-  let t3;
-  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = (e) => setLastName(e.target.value);
-    $[4] = t3;
-  } else {
-    t3 = $[4];
-  }
-  let t4;
-  if ($[5] !== lastName) {
-    t4 = <input value={lastName} onChange={t3} />;
-    $[5] = lastName;
-    $[6] = t4;
-  } else {
-    t4 = $[6];
-  }
-  let t5;
-  if ($[7] !== fullName) {
-    t5 = <div>{fullName}</div>;
-    $[7] = fullName;
-    $[8] = t5;
-  } else {
-    t5 = $[8];
-  }
-  let t6;
-  if ($[9] !== t4 || $[10] !== t5) {
-    t6 = (
-      <div>
-        {t4}
-        {t5}
-      </div>
-    );
-    $[9] = t4;
-    $[10] = t5;
-    $[11] = t6;
-  } else {
-    t6 = $[11];
-  }
-  return t6;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{ firstName: "John" }],
-};
-
-```
-
-## Logs
-
-```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [firstName]\nState: [lastName]\n\nData Flow Tree:\n├── firstName (Prop)\n└── lastName (State)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":11,"column":4,"index":297},"end":{"line":11,"column":15,"index":308},"filename":"derived-state-from-prop-local-state-and-component-scope.ts","identifierName":"setFullName"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":20,"column":1,"index":542},"filename":"derived-state-from-prop-local-state-and-component-scope.ts"},"fnName":"Component","memoSlots":12,"memoBlocks":5,"memoValues":6,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
-      
-### Eval output
-(kind: ok) <div><input value="Doe"><div>John D. Doe</div></div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 function Component({initialName}) {
@@ -29,7 +29,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp
 import { useEffect, useState } from "react";
 
 function Component(t0) {
@@ -79,12 +79,6 @@ export const FIXTURE_ENTRYPOINT = {
 };
 
 ```
-
-## Logs
-
-```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":16,"column":1,"index":359},"filename":"derived-state-from-prop-setter-call-outside-effect-no-error.ts"},"fnName":"Component","memoSlots":6,"memoBlocks":3,"memoValues":4,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
       
 ### Eval output
 (kind: ok) <div><input value="John"></div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 function Component({initialName}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-ternary.expect.md

@@ -1,57 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp
-
-function Component({value}) {
-  const [checked, setChecked] = useState('');
-
-  useEffect(() => {
-    setChecked(value === '' ? [] : value.split(','));
-  }, [value]);
-
-  return <div>{checked}</div>;
-}
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp
-
-function Component(t0) {
-  const $ = _c(5);
-  const { value } = t0;
-  const [checked, setChecked] = useState("");
-  let t1;
-  let t2;
-  if ($[0] !== value) {
-    t1 = () => {
-      setChecked(value === "" ? [] : value.split(","));
-    };
-    t2 = [value];
-    $[0] = value;
-    $[1] = t1;
-    $[2] = t2;
-  } else {
-    t1 = $[1];
-    t2 = $[2];
-  }
-  useEffect(t1, t2);
-  let t3;
-  if ($[3] !== checked) {
-    t3 = <div>{checked}</div>;
-    $[3] = checked;
-    $[4] = t3;
-  } else {
-    t3 = $[4];
-  }
-  return t3;
-}
-
-```
-      
-### Eval output
-(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-ternary.js

@@ -1,11 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp
-
-function Component({value}) {
-  const [checked, setChecked] = useState('');
-
-  useEffect(() => {
-    setChecked(value === '' ? [] : value.split(','));
-  }, [value]);
-
-  return <div>{checked}</div>;
-}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 function MockComponent({onSet}) {
@@ -28,7 +28,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp
 import { useEffect, useState } from "react";
 
 function MockComponent(t0) {
@@ -80,13 +80,6 @@ export const FIXTURE_ENTRYPOINT = {
 };
 
 ```
-
-## Logs
-
-```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":6,"column":1,"index":211},"filename":"derived-state-from-prop-setter-used-outside-effect-no-error.ts"},"fnName":"MockComponent","memoSlots":2,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":8,"column":0,"index":213},"end":{"line":15,"column":1,"index":402},"filename":"derived-state-from-prop-setter-used-outside-effect-no-error.ts"},"fnName":"Component","memoSlots":4,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
       
 ### Eval output
 (kind: ok) <div>Mock Component</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 function MockComponent({onSet}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-with-side-effect.expect.md

@@ -1,78 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-function Component({value}) {
-  const [localValue, setLocalValue] = useState('');
-
-  useEffect(() => {
-    setLocalValue(value);
-    document.title = `Value: ${value}`;
-  }, [value]);
-
-  return <div>{localValue}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{value: 'test'}],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import { useEffect, useState } from "react";
-
-function Component(t0) {
-  const $ = _c(5);
-  const { value } = t0;
-  const [localValue, setLocalValue] = useState("");
-  let t1;
-  let t2;
-  if ($[0] !== value) {
-    t1 = () => {
-      setLocalValue(value);
-      document.title = `Value: ${value}`;
-    };
-    t2 = [value];
-    $[0] = value;
-    $[1] = t1;
-    $[2] = t2;
-  } else {
-    t1 = $[1];
-    t2 = $[2];
-  }
-  useEffect(t1, t2);
-  let t3;
-  if ($[3] !== localValue) {
-    t3 = <div>{localValue}</div>;
-    $[3] = localValue;
-    $[4] = t3;
-  } else {
-    t3 = $[4];
-  }
-  return t3;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{ value: "test" }],
-};
-
-```
-
-## Logs
-
-```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [value]\n\nData Flow Tree:\n└── value (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":8,"column":4,"index":214},"end":{"line":8,"column":17,"index":227},"filename":"derived-state-from-prop-with-side-effect.ts","identifierName":"setLocalValue"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":13,"column":1,"index":327},"filename":"derived-state-from-prop-with-side-effect.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
-      
-### Eval output
-(kind: ok) <div>test</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState, useRef} from 'react';
 
 export default function Component({test}) {
@@ -27,7 +27,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp
 import { useEffect, useState, useRef } from "react";
 
 export default function Component(t0) {
@@ -68,12 +68,6 @@ export const FIXTURE_ENTRYPOINT = {
 };
 
 ```
-
-## Logs
-
-```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":130},"end":{"line":14,"column":1,"index":328},"filename":"derived-state-from-ref-and-state-no-error.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
       
 ### Eval output
 (kind: ok) nulltestString

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState, useRef} from 'react';
 
 export default function Component({test}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-local-function-call.expect.md

@@ -1,93 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-function Component({propValue}) {
-  const [value, setValue] = useState(null);
-
-  function localFunction() {
-    console.log('local function');
-  }
-
-  useEffect(() => {
-    setValue(propValue);
-    localFunction();
-  }, [propValue]);
-
-  return <div>{value}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{propValue: 'test'}],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import { useEffect, useState } from "react";
-
-function Component(t0) {
-  const $ = _c(6);
-  const { propValue } = t0;
-  const [value, setValue] = useState(null);
-  let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = function localFunction() {
-      console.log("local function");
-    };
-    $[0] = t1;
-  } else {
-    t1 = $[0];
-  }
-  const localFunction = t1;
-  let t2;
-  let t3;
-  if ($[1] !== propValue) {
-    t2 = () => {
-      setValue(propValue);
-      localFunction();
-    };
-    t3 = [propValue];
-    $[1] = propValue;
-    $[2] = t2;
-    $[3] = t3;
-  } else {
-    t2 = $[2];
-    t3 = $[3];
-  }
-  useEffect(t2, t3);
-  let t4;
-  if ($[4] !== value) {
-    t4 = <div>{value}</div>;
-    $[4] = value;
-    $[5] = t4;
-  } else {
-    t4 = $[5];
-  }
-  return t4;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{ propValue: "test" }],
-};
-
-```
-
-## Logs
-
-```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [propValue]\n\nData Flow Tree:\n└── propValue (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":12,"column":4,"index":279},"end":{"line":12,"column":12,"index":287},"filename":"effect-contains-local-function-call.ts","identifierName":"setValue"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":17,"column":1,"index":371},"filename":"effect-contains-local-function-call.ts"},"fnName":"Component","memoSlots":6,"memoBlocks":3,"memoValues":4,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
-      
-### Eval output
-(kind: ok) <div>test</div>
-logs: ['local function']

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 function Component({propValue, onChange}) {
@@ -25,7 +25,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp
 import { useEffect, useState } from "react";
 
 function Component(t0) {
@@ -70,13 +70,6 @@ export const FIXTURE_ENTRYPOINT = {
 };
 
 ```
-
-## Logs
-
-```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":12,"column":1,"index":306},"filename":"effect-contains-prop-function-call-no-error.ts"},"fnName":"Component","memoSlots":7,"memoBlocks":3,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":16,"column":41,"index":402},"end":{"line":16,"column":49,"index":410},"filename":"effect-contains-prop-function-call-no-error.ts"},"fnName":null,"memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
       
 ### Eval output
 (kind: ok) <div>test</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 function Component({propValue, onChange}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-cleanup-function-depending-on-derived-computation-value.expect.md

@@ -1,76 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-
-import {useEffect, useState} from 'react';
-
-function Component(file: File) {
-  const [imageUrl, setImageUrl] = useState(null);
-
-  /*
-   * Cleaning up the variable or a source of the variable used to setState
-   * inside the effect communicates that we always need to clean up something
-   * which is a valid use case for useEffect. In which case we want to
-   * avoid an throwing
-   */
-  useEffect(() => {
-    const imageUrlPrepared = URL.createObjectURL(file);
-    setImageUrl(imageUrlPrepared);
-    return () => URL.revokeObjectURL(imageUrlPrepared);
-  }, [file]);
-
-  return <Image src={imageUrl} xstyle={styles.imageSizeLimits} />;
-}
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-
-import { useEffect, useState } from "react";
-
-function Component(file) {
-  const $ = _c(5);
-  const [imageUrl, setImageUrl] = useState(null);
-  let t0;
-  let t1;
-  if ($[0] !== file) {
-    t0 = () => {
-      const imageUrlPrepared = URL.createObjectURL(file);
-      setImageUrl(imageUrlPrepared);
-      return () => URL.revokeObjectURL(imageUrlPrepared);
-    };
-    t1 = [file];
-    $[0] = file;
-    $[1] = t0;
-    $[2] = t1;
-  } else {
-    t0 = $[1];
-    t1 = $[2];
-  }
-  useEffect(t0, t1);
-  let t2;
-  if ($[3] !== imageUrl) {
-    t2 = <Image src={imageUrl} xstyle={styles.imageSizeLimits} />;
-    $[3] = imageUrl;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  return t2;
-}
-
-```
-
-## Logs
-
-```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":108},"end":{"line":21,"column":1,"index":700},"filename":"effect-with-cleanup-function-depending-on-derived-computation-value.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
-      
-### Eval output
-(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-cleanup-function-depending-on-derived-computation-value.js

@@ -1,21 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-
-import {useEffect, useState} from 'react';
-
-function Component(file: File) {
-  const [imageUrl, setImageUrl] = useState(null);
-
-  /*
-   * Cleaning up the variable or a source of the variable used to setState
-   * inside the effect communicates that we always need to clean up something
-   * which is a valid use case for useEffect. In which case we want to
-   * avoid an throwing
-   */
-  useEffect(() => {
-    const imageUrlPrepared = URL.createObjectURL(file);
-    setImageUrl(imageUrlPrepared);
-    return () => URL.revokeObjectURL(imageUrlPrepared);
-  }, [file]);
-
-  return <Image src={imageUrl} xstyle={styles.imageSizeLimits} />;
-}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 function Component({propValue}) {
@@ -25,7 +25,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp
 import { useEffect, useState } from "react";
 
 function Component(t0) {
@@ -65,12 +65,6 @@ export const FIXTURE_ENTRYPOINT = {
 };
 
 ```
-
-## Logs
-
-```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":12,"column":1,"index":298},"filename":"effect-with-global-function-call-no-error.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
       
 ### Eval output
 (kind: exception) globalCall is not defined

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 function Component({propValue}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-conditionally-in-effect.expect.md

@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp
+import {useEffect, useState} from 'react';
+
+function Component({value, enabled}) {
+  const [localValue, setLocalValue] = useState('');
+
+  useEffect(() => {
+    if (enabled) {
+      setLocalValue(value);
+    } else {
+      setLocalValue('disabled');
+    }
+  }, [value, enabled]);
+
+  return <div>{localValue}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'test', enabled: true}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: You might not need an effect. Derive values in render, not effects.
+
+Derived values (From props: [value]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user.
+
+error.derived-state-conditionally-in-effect.ts:9:6
+   7 |   useEffect(() => {
+   8 |     if (enabled) {
+>  9 |       setLocalValue(value);
+     |       ^^^^^^^^^^^^^ This should be computed during render, not in an effect
+  10 |     } else {
+  11 |       setLocalValue('disabled');
+  12 |     }
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-conditionally-in-effect.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 function Component({value, enabled}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-default-props.expect.md

@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp
+import {useEffect, useState} from 'react';
+
+export default function Component({input = 'empty'}) {
+  const [currInput, setCurrInput] = useState(input);
+  const localConst = 'local const';
+
+  useEffect(() => {
+    setCurrInput(input + localConst);
+  }, [input, localConst]);
+
+  return <div>{currInput}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{input: 'test'}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: You might not need an effect. Derive values in render, not effects.
+
+Derived values (From props: [input]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user.
+
+error.derived-state-from-default-props.ts:9:4
+   7 |
+   8 |   useEffect(() => {
+>  9 |     setCurrInput(input + localConst);
+     |     ^^^^^^^^^^^^ This should be computed during render, not in an effect
+  10 |   }, [input, localConst]);
+  11 |
+  12 |   return <div>{currInput}</div>;
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-default-props.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 export default function Component({input = 'empty'}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-local-state-in-effect.expect.md

@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp
+
+import {useEffect, useState} from 'react';
+
+function Component({shouldChange}) {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    if (shouldChange) {
+      setCount(count + 1);
+    }
+  }, [count]);
+
+  return <div>{count}</div>;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: You might not need an effect. Derive values in render, not effects.
+
+Derived values (From local state: [count]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user.
+
+error.derived-state-from-local-state-in-effect.ts:10:6
+   8 |   useEffect(() => {
+   9 |     if (shouldChange) {
+> 10 |       setCount(count + 1);
+     |       ^^^^^^^^ This should be computed during render, not in an effect
+  11 |     }
+  12 |   }, [count]);
+  13 |
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-local-state-in-effect.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 
 import {useEffect, useState} from 'react';
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-local-state-and-component-scope.expect.md

@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp
+import {useEffect, useState} from 'react';
+
+function Component({firstName}) {
+  const [lastName, setLastName] = useState('Doe');
+  const [fullName, setFullName] = useState('John');
+
+  const middleName = 'D.';
+
+  useEffect(() => {
+    setFullName(firstName + ' ' + middleName + ' ' + lastName);
+  }, [firstName, middleName, lastName]);
+
+  return (
+    <div>
+      <input value={lastName} onChange={e => setLastName(e.target.value)} />
+      <div>{fullName}</div>
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{firstName: 'John'}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: You might not need an effect. Derive values in render, not effects.
+
+Derived values (From props and local state: [firstName, lastName]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user.
+
+error.derived-state-from-prop-local-state-and-component-scope.ts:11:4
+   9 |
+  10 |   useEffect(() => {
+> 11 |     setFullName(firstName + ' ' + middleName + ' ' + lastName);
+     |     ^^^^^^^^^^^ This should be computed during render, not in an effect
+  12 |   }, [firstName, middleName, lastName]);
+  13 |
+  14 |   return (
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-local-state-and-component-scope.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 function Component({firstName}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-with-side-effect.expect.md

@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp
+import {useEffect, useState} from 'react';
+
+function Component({value}) {
+  const [localValue, setLocalValue] = useState('');
+
+  useEffect(() => {
+    setLocalValue(value);
+    document.title = `Value: ${value}`;
+  }, [value]);
+
+  return <div>{localValue}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'test'}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: You might not need an effect. Derive values in render, not effects.
+
+Derived values (From props: [value]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user.
+
+error.derived-state-from-prop-with-side-effect.ts:8:4
+   6 |
+   7 |   useEffect(() => {
+>  8 |     setLocalValue(value);
+     |     ^^^^^^^^^^^^^ This should be computed during render, not in an effect
+   9 |     document.title = `Value: ${value}`;
+  10 |   }, [value]);
+  11 |
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-with-side-effect.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 function Component({value}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.effect-contains-local-function-call.expect.md

@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp
+import {useEffect, useState} from 'react';
+
+function Component({propValue}) {
+  const [value, setValue] = useState(null);
+
+  function localFunction() {
+    console.log('local function');
+  }
+
+  useEffect(() => {
+    setValue(propValue);
+    localFunction();
+  }, [propValue]);
+
+  return <div>{value}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propValue: 'test'}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: You might not need an effect. Derive values in render, not effects.
+
+Derived values (From props: [propValue]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user.
+
+error.effect-contains-local-function-call.ts:12:4
+  10 |
+  11 |   useEffect(() => {
+> 12 |     setValue(propValue);
+     |     ^^^^^^^^ This should be computed during render, not in an effect
+  13 |     localFunction();
+  14 |   }, [propValue]);
+  15 |
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.effect-contains-local-function-call.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 function Component({propValue}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-computation-in-effect.expect.md

@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [firstName, setFirstName] = useState('Taylor');
+  const lastName = 'Swift';
+
+  // 🔴 Avoid: redundant state and unnecessary Effect
+  const [fullName, setFullName] = useState('');
+  useEffect(() => {
+    setFullName(firstName + ' ' + lastName);
+  }, [firstName, lastName]);
+
+  return <div>{fullName}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: You might not need an effect. Derive values in render, not effects.
+
+Derived values (From local state: [firstName]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user.
+
+error.invalid-derived-computation-in-effect.ts:11:4
+   9 |   const [fullName, setFullName] = useState('');
+  10 |   useEffect(() => {
+> 11 |     setFullName(firstName + ' ' + lastName);
+     |     ^^^^^^^^^^^ This should be computed during render, not in an effect
+  12 |   }, [firstName, lastName]);
+  13 |
+  14 |   return <div>{fullName}</div>;
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-computation-in-effect.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 function Component() {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-computed-props.expect.md

@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp
+import {useEffect, useState} from 'react';
+
+export default function Component(props) {
+  const [displayValue, setDisplayValue] = useState('');
+
+  useEffect(() => {
+    const computed = props.prefix + props.value + props.suffix;
+    setDisplayValue(computed);
+  }, [props.prefix, props.value, props.suffix]);
+
+  return <div>{displayValue}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{prefix: '[', value: 'test', suffix: ']'}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: You might not need an effect. Derive values in render, not effects.
+
+Derived values (From props: [props]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user.
+
+error.invalid-derived-state-from-computed-props.ts:9:4
+   7 |   useEffect(() => {
+   8 |     const computed = props.prefix + props.value + props.suffix;
+>  9 |     setDisplayValue(computed);
+     |     ^^^^^^^^^^^^^^^ This should be computed during render, not in an effect
+  10 |   }, [props.prefix, props.value, props.suffix]);
+  11 |
+  12 |   return <div>{displayValue}</div>;
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-computed-props.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 export default function Component(props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-destructured-props.expect.md

@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp
+import {useEffect, useState} from 'react';
+
+export default function Component({props}) {
+  const [fullName, setFullName] = useState(
+    props.firstName + ' ' + props.lastName
+  );
+
+  useEffect(() => {
+    setFullName(props.firstName + ' ' + props.lastName);
+  }, [props.firstName, props.lastName]);
+
+  return <div>{fullName}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{props: {firstName: 'John', lastName: 'Doe'}}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: You might not need an effect. Derive values in render, not effects.
+
+Derived values (From props: [props]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user.
+
+error.invalid-derived-state-from-destructured-props.ts:10:4
+   8 |
+   9 |   useEffect(() => {
+> 10 |     setFullName(props.firstName + ' ' + props.lastName);
+     |     ^^^^^^^^^^^ This should be computed during render, not in an effect
+  11 |   }, [props.firstName, props.lastName]);
+  12 |
+  13 |   return <div>{fullName}</div>;
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-destructured-props.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 export default function Component({props}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-computation-in-effect.expect.md

@@ -1,80 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-function Component() {
-  const [firstName, setFirstName] = useState('Taylor');
-  const lastName = 'Swift';
-
-  // 🔴 Avoid: redundant state and unnecessary Effect
-  const [fullName, setFullName] = useState('');
-  useEffect(() => {
-    setFullName(firstName + ' ' + lastName);
-  }, [firstName, lastName]);
-
-  return <div>{fullName}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import { useEffect, useState } from "react";
-
-function Component() {
-  const $ = _c(5);
-  const [firstName] = useState("Taylor");
-
-  const [fullName, setFullName] = useState("");
-  let t0;
-  let t1;
-  if ($[0] !== firstName) {
-    t0 = () => {
-      setFullName(firstName + " " + "Swift");
-    };
-    t1 = [firstName, "Swift"];
-    $[0] = firstName;
-    $[1] = t0;
-    $[2] = t1;
-  } else {
-    t0 = $[1];
-    t1 = $[2];
-  }
-  useEffect(t0, t1);
-  let t2;
-  if ($[3] !== fullName) {
-    t2 = <div>{fullName}</div>;
-    $[3] = fullName;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  return t2;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [],
-};
-
-```
-
-## Logs
-
-```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nState: [firstName]\n\nData Flow Tree:\n└── firstName (State)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":11,"column":4,"index":341},"end":{"line":11,"column":15,"index":352},"filename":"invalid-derived-computation-in-effect.ts","identifierName":"setFullName"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":15,"column":1,"index":445},"filename":"invalid-derived-computation-in-effect.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
-      
-### Eval output
-(kind: ok) <div>Taylor Swift</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-state-from-computed-props.expect.md

@@ -1,79 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-export default function Component(props) {
-  const [displayValue, setDisplayValue] = useState('');
-
-  useEffect(() => {
-    const computed = props.prefix + props.value + props.suffix;
-    setDisplayValue(computed);
-  }, [props.prefix, props.value, props.suffix]);
-
-  return <div>{displayValue}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{prefix: '[', value: 'test', suffix: ']'}],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import { useEffect, useState } from "react";
-
-export default function Component(props) {
-  const $ = _c(7);
-  const [displayValue, setDisplayValue] = useState("");
-  let t0;
-  let t1;
-  if ($[0] !== props.prefix || $[1] !== props.suffix || $[2] !== props.value) {
-    t0 = () => {
-      const computed = props.prefix + props.value + props.suffix;
-      setDisplayValue(computed);
-    };
-    t1 = [props.prefix, props.value, props.suffix];
-    $[0] = props.prefix;
-    $[1] = props.suffix;
-    $[2] = props.value;
-    $[3] = t0;
-    $[4] = t1;
-  } else {
-    t0 = $[3];
-    t1 = $[4];
-  }
-  useEffect(t0, t1);
-  let t2;
-  if ($[5] !== displayValue) {
-    t2 = <div>{displayValue}</div>;
-    $[5] = displayValue;
-    $[6] = t2;
-  } else {
-    t2 = $[6];
-  }
-  return t2;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{ prefix: "[", value: "test", suffix: "]" }],
-};
-
-```
-
-## Logs
-
-```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [props]\n\nData Flow Tree:\n└── computed\n    └── props (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":9,"column":4,"index":295},"end":{"line":9,"column":19,"index":310},"filename":"invalid-derived-state-from-computed-props.ts","identifierName":"setDisplayValue"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":122},"end":{"line":13,"column":1,"index":409},"filename":"invalid-derived-state-from-computed-props.ts"},"fnName":"Component","memoSlots":7,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
-      
-### Eval output
-(kind: ok) <div>[test]</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-state-from-destructured-props.expect.md

@@ -1,81 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-export default function Component({props}) {
-  const [fullName, setFullName] = useState(
-    props.firstName + ' ' + props.lastName
-  );
-
-  useEffect(() => {
-    setFullName(props.firstName + ' ' + props.lastName);
-  }, [props.firstName, props.lastName]);
-
-  return <div>{fullName}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{props: {firstName: 'John', lastName: 'Doe'}}],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import { useEffect, useState } from "react";
-
-export default function Component(t0) {
-  const $ = _c(6);
-  const { props } = t0;
-  const [fullName, setFullName] = useState(
-    props.firstName + " " + props.lastName,
-  );
-  let t1;
-  let t2;
-  if ($[0] !== props.firstName || $[1] !== props.lastName) {
-    t1 = () => {
-      setFullName(props.firstName + " " + props.lastName);
-    };
-    t2 = [props.firstName, props.lastName];
-    $[0] = props.firstName;
-    $[1] = props.lastName;
-    $[2] = t1;
-    $[3] = t2;
-  } else {
-    t1 = $[2];
-    t2 = $[3];
-  }
-  useEffect(t1, t2);
-  let t3;
-  if ($[4] !== fullName) {
-    t3 = <div>{fullName}</div>;
-    $[4] = fullName;
-    $[5] = t3;
-  } else {
-    t3 = $[5];
-  }
-  return t3;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{ props: { firstName: "John", lastName: "Doe" } }],
-};
-
-```
-
-## Logs
-
-```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [props]\n\nData Flow Tree:\n└── props (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":10,"column":4,"index":269},"end":{"line":10,"column":15,"index":280},"filename":"invalid-derived-state-from-destructured-props.ts","identifierName":"setFullName"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":122},"end":{"line":14,"column":1,"index":397},"filename":"invalid-derived-state-from-destructured-props.ts"},"fnName":"Component","memoSlots":6,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
-      
-### Eval output
-(kind: ok) <div>John Doe</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState, useRef} from 'react';
 
 export default function Component({test}) {
@@ -31,7 +31,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp
 import { useEffect, useState, useRef } from "react";
 
 export default function Component(t0) {
@@ -77,12 +77,6 @@ export const FIXTURE_ENTRYPOINT = {
 };
 
 ```
-
-## Logs
-
-```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":130},"end":{"line":18,"column":1,"index":386},"filename":"ref-conditional-in-effect-no-error.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
       
 ### Eval output
 (kind: ok) 8

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState, useRef} from 'react';
 
 export default function Component({test}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/usestate-derived-from-prop-no-show-in-data-flow-tree.expect.md

@@ -1,72 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-
-function Component({prop}) {
-  const [s, setS] = useState();
-  const [second, setSecond] = useState(prop);
-
-  /*
-   * `second` is a source of state. It will inherit the value of `prop` in
-   * the first render, but after that it will no longer be updated when
-   * `prop` changes. So we shouldn't consider `second` as being derived from
-   * `prop`
-   */
-  useEffect(() => {
-    setS(second);
-  }, [second]);
-
-  return <div>{s}</div>;
-}
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-
-function Component(t0) {
-  const $ = _c(5);
-  const { prop } = t0;
-  const [s, setS] = useState();
-  const [second] = useState(prop);
-  let t1;
-  let t2;
-  if ($[0] !== second) {
-    t1 = () => {
-      setS(second);
-    };
-    t2 = [second];
-    $[0] = second;
-    $[1] = t1;
-    $[2] = t2;
-  } else {
-    t1 = $[1];
-    t2 = $[2];
-  }
-  useEffect(t1, t2);
-  let t3;
-  if ($[3] !== s) {
-    t3 = <div>{s}</div>;
-    $[3] = s;
-    $[4] = t3;
-  } else {
-    t3 = $[4];
-  }
-  return t3;
-}
-
-```
-
-## Logs
-
-```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nState: [second]\n\nData Flow Tree:\n└── second (State)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":14,"column":4,"index":443},"end":{"line":14,"column":8,"index":447},"filename":"usestate-derived-from-prop-no-show-in-data-flow-tree.ts","identifierName":"setS"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":3,"column":0,"index":64},"end":{"line":18,"column":1,"index":500},"filename":"usestate-derived-from-prop-no-show-in-data-flow-tree.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
-      
-### Eval output
-(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/usestate-derived-from-prop-no-show-in-data-flow-tree.js

@@ -1,18 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-
-function Component({prop}) {
-  const [s, setS] = useState();
-  const [second, setSecond] = useState(prop);
-
-  /*
-   * `second` is a source of state. It will inherit the value of `prop` in
-   * the first render, but after that it will no longer be updated when
-   * `prop` changes. So we shouldn't consider `second` as being derived from
-   * `prop`
-   */
-  useEffect(() => {
-    setS(second);
-  }, [second]);
-
-  return <div>{s}</div>;
-}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-missing-source-locations.expect.md

@@ -1,224 +0,0 @@
-
-## Input
-
-```javascript
-// @validateSourceLocations
-import {useEffect, useCallback} from 'react';
-
-function Component({prop1, prop2}) {
-  const x = prop1 + prop2;
-  const y = x * 2;
-  const arr = [x, y];
-  const obj = {x, y};
-  const [a, b] = arr;
-  const {x: c, y: d} = obj;
-
-  useEffect(() => {
-    if (a > 10) {
-      console.log(a);
-    }
-  }, [a]);
-
-  const foo = useCallback(() => {
-    return a + b;
-  }, [a, b]);
-
-  function bar() {
-    return (c + d) * 2;
-  }
-
-  console.log('Hello, world!');
-
-  return [y, foo, bar];
-}
-
-```
-
-
-## Error
-
-```
-Found 13 errors:
-
-Todo: Important source location missing in generated code
-
-Source location for VariableDeclarator is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:5:8
-  3 |
-  4 | function Component({prop1, prop2}) {
-> 5 |   const x = prop1 + prop2;
-    |         ^^^^^^^^^^^^^^^^^
-  6 |   const y = x * 2;
-  7 |   const arr = [x, y];
-  8 |   const obj = {x, y};
-
-Todo: Important source location missing in generated code
-
-Source location for VariableDeclarator is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:6:8
-  4 | function Component({prop1, prop2}) {
-  5 |   const x = prop1 + prop2;
-> 6 |   const y = x * 2;
-    |         ^^^^^^^^^
-  7 |   const arr = [x, y];
-  8 |   const obj = {x, y};
-  9 |   const [a, b] = arr;
-
-Todo: Important source location missing in generated code
-
-Source location for VariableDeclarator is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:7:8
-   5 |   const x = prop1 + prop2;
-   6 |   const y = x * 2;
->  7 |   const arr = [x, y];
-     |         ^^^^^^^^^^^^
-   8 |   const obj = {x, y};
-   9 |   const [a, b] = arr;
-  10 |   const {x: c, y: d} = obj;
-
-Todo: Important source location missing in generated code
-
-Source location for VariableDeclarator is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:8:8
-   6 |   const y = x * 2;
-   7 |   const arr = [x, y];
->  8 |   const obj = {x, y};
-     |         ^^^^^^^^^^^^
-   9 |   const [a, b] = arr;
-  10 |   const {x: c, y: d} = obj;
-  11 |
-
-Todo: Important source location missing in generated code
-
-Source location for VariableDeclarator is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:9:8
-   7 |   const arr = [x, y];
-   8 |   const obj = {x, y};
->  9 |   const [a, b] = arr;
-     |         ^^^^^^^^^^^^
-  10 |   const {x: c, y: d} = obj;
-  11 |
-  12 |   useEffect(() => {
-
-Todo: Important source location missing in generated code
-
-Source location for VariableDeclarator is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:10:8
-   8 |   const obj = {x, y};
-   9 |   const [a, b] = arr;
-> 10 |   const {x: c, y: d} = obj;
-     |         ^^^^^^^^^^^^^^^^^^
-  11 |
-  12 |   useEffect(() => {
-  13 |     if (a > 10) {
-
-Todo: Important source location missing in generated code
-
-Source location for ExpressionStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:12:2
-  10 |   const {x: c, y: d} = obj;
-  11 |
-> 12 |   useEffect(() => {
-     |   ^^^^^^^^^^^^^^^^^
-> 13 |     if (a > 10) {
-     | ^^^^^^^^^^^^^^^^^
-> 14 |       console.log(a);
-     | ^^^^^^^^^^^^^^^^^
-> 15 |     }
-     | ^^^^^^^^^^^^^^^^^
-> 16 |   }, [a]);
-     | ^^^^^^^^^^^
-  17 |
-  18 |   const foo = useCallback(() => {
-  19 |     return a + b;
-
-Todo: Important source location missing in generated code
-
-Source location for ExpressionStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:14:6
-  12 |   useEffect(() => {
-  13 |     if (a > 10) {
-> 14 |       console.log(a);
-     |       ^^^^^^^^^^^^^^^
-  15 |     }
-  16 |   }, [a]);
-  17 |
-
-Todo: Important source location missing in generated code
-
-Source location for VariableDeclarator is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:18:8
-  16 |   }, [a]);
-  17 |
-> 18 |   const foo = useCallback(() => {
-     |         ^^^^^^^^^^^^^^^^^^^^^^^^^
-> 19 |     return a + b;
-     | ^^^^^^^^^^^^^^^^^
-> 20 |   }, [a, b]);
-     | ^^^^^^^^^^^^^
-  21 |
-  22 |   function bar() {
-  23 |     return (c + d) * 2;
-
-Todo: Important source location missing in generated code
-
-Source location for ReturnStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:19:4
-  17 |
-  18 |   const foo = useCallback(() => {
-> 19 |     return a + b;
-     |     ^^^^^^^^^^^^^
-  20 |   }, [a, b]);
-  21 |
-  22 |   function bar() {
-
-Todo: Important source location missing in generated code
-
-Source location for ReturnStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:23:4
-  21 |
-  22 |   function bar() {
-> 23 |     return (c + d) * 2;
-     |     ^^^^^^^^^^^^^^^^^^^
-  24 |   }
-  25 |
-  26 |   console.log('Hello, world!');
-
-Todo: Important source location missing in generated code
-
-Source location for ExpressionStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:26:2
-  24 |   }
-  25 |
-> 26 |   console.log('Hello, world!');
-     |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-  27 |
-  28 |   return [y, foo, bar];
-  29 | }
-
-Todo: Important source location missing in generated code
-
-Source location for ReturnStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:28:2
-  26 |   console.log('Hello, world!');
-  27 |
-> 28 |   return [y, foo, bar];
-     |   ^^^^^^^^^^^^^^^^^^^^^
-  29 | }
-  30 |
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-missing-source-locations.js

@@ -1,29 +0,0 @@
-// @validateSourceLocations
-import {useEffect, useCallback} from 'react';
-
-function Component({prop1, prop2}) {
-  const x = prop1 + prop2;
-  const y = x * 2;
-  const arr = [x, y];
-  const obj = {x, y};
-  const [a, b] = arr;
-  const {x: c, y: d} = obj;
-
-  useEffect(() => {
-    if (a > 10) {
-      console.log(a);
-    }
-  }, [a]);
-
-  const foo = useCallback(() => {
-    return a + b;
-  }, [a, b]);
-
-  function bar() {
-    return (c + d) * 2;
-  }
-
-  console.log('Hello, world!');
-
-  return [y, foo, bar];
-}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-destructure-from-prop-with-default-value.expect.md

@@ -1,45 +0,0 @@
-
-## Input
-
-```javascript
-export function useFormatRelativeTime(opts = {}) {
-  const {timeZone, minimal} = opts;
-  const format = useCallback(function formatWithUnit() {}, [minimal]);
-  // We previously recorded `{timeZone}` as capturing timeZone into the object,
-  // then assumed that dateTimeFormat() mutates that object,
-  // which in turn could mutate timeZone and the object it came from,
-  // which meanteans that the value `minimal` is derived from can change.
-  //
-  // The fix was to record a Capture from a maybefrozen value as an ImmutableCapture
-  // which doesn't propagate mutations
-  dateTimeFormat({timeZone});
-  return format;
-}
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime";
-export function useFormatRelativeTime(t0) {
-  const $ = _c(1);
-  const opts = t0 === undefined ? {} : t0;
-  const { timeZone, minimal } = opts;
-  let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = function formatWithUnit() {};
-    $[0] = t1;
-  } else {
-    t1 = $[0];
-  }
-  const format = t1;
-
-  dateTimeFormat({ timeZone });
-  return format;
-}
-
-```
-      
-### Eval output
-(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-destructure-from-prop-with-default-value.js

@@ -1,13 +0,0 @@
-export function useFormatRelativeTime(opts = {}) {
-  const {timeZone, minimal} = opts;
-  const format = useCallback(function formatWithUnit() {}, [minimal]);
-  // We previously recorded `{timeZone}` as capturing timeZone into the object,
-  // then assumed that dateTimeFormat() mutates that object,
-  // which in turn could mutate timeZone and the object it came from,
-  // which meanteans that the value `minimal` is derived from can change.
-  //
-  // The fix was to record a Capture from a maybefrozen value as an ImmutableCapture
-  // which doesn't propagate mutations
-  dateTimeFormat({timeZone});
-  return format;
-}

package.json

@@ -152,7 +152,6 @@
     "download-build-in-codesandbox-ci": "yarn build --type=node react/index react.react-server react-dom/index react-dom/client react-dom/src/server react-dom/test-utils react-dom.react-server scheduler/index react/jsx-runtime react/jsx-dev-runtime react-server-dom-webpack",
     "check-release-dependencies": "node ./scripts/release/check-release-dependencies",
     "generate-inline-fizz-runtime": "node ./scripts/rollup/generate-inline-fizz-runtime.js",
-    "generate-changelog": "node ./scripts/tasks/generate-changelog/index.js",
     "flags": "node ./scripts/flags/flags.js"
   },
   "resolutions": {

packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js

@@ -585,29 +585,6 @@ const allTests = {
       code: normalizeIndent`
         // Valid: useEffectEvent can be called in custom effect hooks configured via ESLint settings
         function MyComponent({ theme }) {
-          const onClick = useEffectEvent(() => {
-            showNotification(theme);
-          });
-          useMyEffect(() => {
-            onClick();
-          });
-          useServerEffect(() => {
-            onClick();
-          });
-        }
-      `,
-      settings: {
-        'react-hooks': {
-          additionalEffectHooks: '(useMyEffect|useServerEffect)',
-        },
-      },
-    },
-    {
-      syntax: 'flow',
-      code: normalizeIndent`
-        // Component syntax version
-        // Valid: useEffectEvent can be called in custom effect hooks configured via ESLint settings
-        component MyComponent(theme: any) {
           const onClick = useEffectEvent(() => {
             showNotification(theme);
           });
@@ -641,24 +618,6 @@ const allTests = {
         }
       `,
     },
-    {
-      syntax: 'flow',
-      code: normalizeIndent`
-        // Component syntax version
-        // Valid because functions created with useEffectEvent can be called in a useEffect.
-        component MyComponent(theme: any) {
-          const onClick = useEffectEvent(() => {
-            showNotification(theme);
-          });
-          useEffect(() => {
-            onClick();
-          });
-          React.useEffect(() => {
-            onClick();
-          });
-        }
-      `,
-    },
     {
       code: normalizeIndent`
         // Valid because functions created with useEffectEvent can be passed by reference in useEffect
@@ -685,34 +644,6 @@ const allTests = {
         }
       `,
     },
-    {
-      syntax: 'flow',
-      code: normalizeIndent`
-        // Component syntax version
-        // Valid because functions created with useEffectEvent can be passed by reference in useEffect
-        // and useEffectEvent.
-        component MyComponent(theme: any) {
-          const onClick = useEffectEvent(() => {
-            showNotification(theme);
-          });
-          const onClick2 = useEffectEvent(() => {
-            debounce(onClick);
-            debounce(() => onClick());
-            debounce(() => { onClick() });
-            deboucne(() => debounce(onClick));
-          });
-          useEffect(() => {
-            let id = setInterval(() => onClick(), 100);
-            return () => clearInterval(onClick);
-          }, []);
-          React.useEffect(() => {
-            let id = setInterval(() => onClick(), 100);
-            return () => clearInterval(onClick);
-          }, []);
-          return null;
-        }
-      `,
-    },
     {
       code: normalizeIndent`
         function MyComponent({ theme }) {
@@ -725,20 +656,6 @@ const allTests = {
         }
       `,
     },
-    {
-      syntax: 'flow',
-      code: normalizeIndent`
-        // Component syntax version
-        component MyComponent(theme: any) {
-          useEffect(() => {
-            onClick();
-          });
-          const onClick = useEffectEvent(() => {
-            showNotification(theme);
-          });
-        }
-      `,
-    },
     {
       code: normalizeIndent`
         function MyComponent({ theme }) {
@@ -756,25 +673,6 @@ const allTests = {
         }
       `,
     },
-    {
-      syntax: 'flow',
-      code: normalizeIndent`
-        // Component syntax version
-        component MyComponent(theme: any) {
-          // Can receive arguments
-          const onEvent = useEffectEvent((text) => {
-            console.log(text);
-          });
-
-          useEffect(() => {
-            onEvent('Hello world');
-          });
-          React.useEffect(() => {
-            onEvent('Hello world');
-          });
-        }
-      `,
-    },
     {
       code: normalizeIndent`
         // Valid because functions created with useEffectEvent can be called in useLayoutEffect.
@@ -791,24 +689,6 @@ const allTests = {
         }
       `,
     },
-    {
-      syntax: 'flow',
-      code: normalizeIndent`
-        // Component syntax version
-        // Valid because functions created with useEffectEvent can be called in useLayoutEffect.
-        component MyComponent(theme: any) {
-          const onClick = useEffectEvent(() => {
-            showNotification(theme);
-          });
-          useLayoutEffect(() => {
-            onClick();
-          });
-          React.useLayoutEffect(() => {
-            onClick();
-          });
-        }
-      `,
-    },
     {
       code: normalizeIndent`
         // Valid because functions created with useEffectEvent can be called in useInsertionEffect.
@@ -825,24 +705,6 @@ const allTests = {
         }
       `,
     },
-    {
-      syntax: 'flow',
-      code: normalizeIndent`
-        // Component syntax version
-        // Valid because functions created with useEffectEvent can be called in useInsertionEffect.
-        component MyComponent(theme) {
-          const onClick = useEffectEvent(() => {
-            showNotification(theme);
-          });
-          useInsertionEffect(() => {
-            onClick();
-          });
-          React.useInsertionEffect(() => {
-            onClick();
-          });
-        }
-      `,
-    },
     {
       code: normalizeIndent`
         // Valid because functions created with useEffectEvent can be passed by reference in useLayoutEffect 
@@ -877,42 +739,6 @@ const allTests = {
         }
       `,
     },
-    {
-      syntax: 'flow',
-      code: normalizeIndent`
-        // Component syntax version
-        // Valid because functions created with useEffectEvent can be passed by reference in useLayoutEffect.
-        // and useInsertionEffect.
-        component MyComponent(theme: any) {
-          const onClick = useEffectEvent(() => {
-            showNotification(theme);
-          });
-          const onClick2 = useEffectEvent(() => {
-            debounce(onClick);
-            debounce(() => onClick());
-            debounce(() => { onClick() });
-            deboucne(() => debounce(onClick));
-          });
-          useLayoutEffect(() => {
-            let id = setInterval(() => onClick(), 100);
-            return () => clearInterval(onClick);
-          }, []);
-          React.useLayoutEffect(() => {
-            let id = setInterval(() => onClick(), 100);
-            return () => clearInterval(onClick);
-          }, []);
-          useInsertionEffect(() => {
-            let id = setInterval(() => onClick(), 100);
-            return () => clearInterval(onClick);
-          }, []);
-          React.useInsertionEffect(() => {
-            let id = setInterval(() => onClick(), 100);
-            return () => clearInterval(onClick);
-          }, []);
-          return null;
-        }
-      `,
-    },
   ],
   invalid: [
     {
@@ -1699,22 +1525,6 @@ const allTests = {
       `,
       errors: [useEffectEventError('onClick', true)],
     },
-    {
-      syntax: 'flow',
-      code: normalizeIndent`
-      // Component syntax version
-      // Invalid: useEffectEvent should not be callable in regular custom hooks without additional configuration
-      component MyComponent() {
-        const onClick = useEffectEvent(() => {
-          showNotification(theme);
-        });
-        useCustomHook(() => {
-          onClick();
-        });
-      }
-      `,
-      errors: [useEffectEventError('onClick', true)],
-    },
     {
       code: normalizeIndent`
         // Invalid: useEffectEvent should not be callable in hooks not matching the settings regex
@@ -1734,27 +1544,6 @@ const allTests = {
       },
       errors: [useEffectEventError('onClick', true)],
     },
-    {
-      syntax: 'flow',
-      code: normalizeIndent`
-        // Component syntax version
-        // Invalid: useEffectEvent should not be callable in hooks not matching the settings regex
-        component MyComponent(theme: any) {
-          const onClick = useEffectEvent(() => {
-            showNotification(theme);
-          });
-          useWrongHook(() => {
-            onClick();
-          });
-        }
-      `,
-      settings: {
-        'react-hooks': {
-          additionalEffectHooks: 'useMyEffect',
-        },
-      },
-      errors: [useEffectEventError('onClick', true)],
-    },
     {
       code: normalizeIndent`
         function MyComponent({ theme }) {
@@ -1766,19 +1555,6 @@ const allTests = {
       `,
       errors: [useEffectEventError('onClick', false)],
     },
-    {
-      syntax: 'flow',
-      code: normalizeIndent`
-        // Component syntax version
-        component MyComponent(theme: any) {
-          const onClick = useEffectEvent(() => {
-            showNotification(theme);
-          });
-          return <Child onClick={onClick}></Child>;
-        }
-      `,
-      errors: [useEffectEventError('onClick', false)],
-    },
     {
       code: normalizeIndent`
         // Invalid because useEffectEvent is being passed down
@@ -1790,19 +1566,6 @@ const allTests = {
       `,
       errors: [{...useEffectEventError(null, false), line: 4}],
     },
-    {
-      syntax: 'flow',
-      code: normalizeIndent`
-        // Component syntax version
-        // Invalid because useEffectEvent is being passed down
-        component MyComponent(theme: any) {
-          return <Child onClick={useEffectEvent(() => {
-            showNotification(theme);
-          })} />;
-        }
-      `,
-      errors: [{...useEffectEventError(null, false), line: 5}],
-    },
     {
       code: normalizeIndent`
         // This should error even though it shares an identifier name with the below
@@ -1838,43 +1601,6 @@ const allTests = {
         {...useEffectEventError('onClick', true), line: 15},
       ],
     },
-    {
-      syntax: 'flow',
-      code: normalizeIndent`
-        // Component syntax version
-        // This should error even though it shares an identifier name with the below
-        component MyComponent(theme: any) {
-          const onClick = useEffectEvent(() => {
-            showNotification(theme)
-          });
-          return <Child onClick={onClick} />
-        }
-
-        // The useEffectEvent function shares an identifier name with the above
-        component MyOtherComponent(theme: any) {
-          const onClick = useEffectEvent(() => {
-            showNotification(theme)
-          });
-          return <Child onClick={() => onClick()} />
-        }
-
-        // The useEffectEvent function shares an identifier name with the above
-        component MyLastComponent(theme: any) {
-          const onClick = useEffectEvent(() => {
-            showNotification(theme)
-          });
-          useEffect(() => {
-            onClick(); // No error here, errors on all other uses
-            onClick;
-          })
-          return <Child />
-        }
-      `,
-      errors: [
-        {...useEffectEventError('onClick', false), line: 8},
-        {...useEffectEventError('onClick', true), line: 16},
-      ],
-    },
     {
       code: normalizeIndent`
         const MyComponent = ({ theme }) => {
@@ -1899,21 +1625,6 @@ const allTests = {
       `,
       errors: [{...useEffectEventError('onClick', false), line: 7}],
     },
-    {
-      syntax: 'flow',
-      code: normalizeIndent`
-        // Component syntax version
-        // Invalid because onClick is being aliased to foo but not invoked
-        component MyComponent(theme: any) {
-          const onClick = useEffectEvent(() => {
-            showNotification(theme);
-          });
-          let foo = onClick;
-          return <Bar onClick={foo} />
-        }
-      `,
-      errors: [{...useEffectEventError('onClick', false), line: 8}],
-    },
     {
       code: normalizeIndent`
         // Should error because it's being passed down to JSX, although it's been referenced once
@@ -1930,24 +1641,6 @@ const allTests = {
       `,
       errors: [useEffectEventError('onClick', false)],
     },
-    {
-      syntax: 'flow',
-      code: normalizeIndent`
-        // Component syntax version
-        // Should error because it's being passed down to JSX, although it's been referenced once
-        // in an effect
-        component MyComponent(theme: any) {
-          const onClick = useEffectEvent(() => {
-            showNotification(them);
-          });
-          useEffect(() => {
-            setTimeout(onClick, 100);
-          });
-          return <Child onClick={onClick} />
-        }
-      `,
-      errors: [useEffectEventError('onClick', false)],
-    },
     {
       code: normalizeIndent`
         // Invalid because functions created with useEffectEvent cannot be called in arbitrary closures.
@@ -1983,43 +1676,6 @@ const allTests = {
           `It cannot be assigned to a variable or passed down.`,
       ],
     },
-    {
-      syntax: 'flow',
-      code: normalizeIndent`
-        // Hook syntax version
-        // Invalid because functions created with useEffectEvent cannot be called in arbitrary closures.
-        hook useMyHook(theme: any) {
-          const onClick = useEffectEvent(() => {
-            showNotification(theme);
-          });
-          // error message 1
-          const onClick2 = () => { onClick() };
-          // error message 2
-          const onClick3 = useCallback(() => onClick(), []);
-          // error message 3
-          const onClick4 = onClick;
-          return <>
-            {/** error message 4 */}
-            <Child onClick={onClick}></Child>
-            <Child onClick={onClick2}></Child>
-            <Child onClick={onClick3}></Child>
-          </>;
-        }
-      `,
-      // Explicitly test error messages here for various cases
-      errors: [
-        `\`onClick\` is a function created with React Hook "useEffectEvent", and can only be called from ` +
-          'Effects and Effect Events in the same component.',
-        `\`onClick\` is a function created with React Hook "useEffectEvent", and can only be called from ` +
-          'Effects and Effect Events in the same component.',
-        `\`onClick\` is a function created with React Hook "useEffectEvent", and can only be called from ` +
-          `Effects and Effect Events in the same component. ` +
-          `It cannot be assigned to a variable or passed down.`,
-        `\`onClick\` is a function created with React Hook "useEffectEvent", and can only be called from ` +
-          `Effects and Effect Events in the same component. ` +
-          `It cannot be assigned to a variable or passed down.`,
-      ],
-    },
   ],
 };
 

packages/eslint-plugin-react-hooks/src/rules/RulesOfHooks.ts

@@ -833,18 +833,6 @@ const rule = {
           recordAllUseEffectEventFunctions(getScope(node));
         }
       },
-
-      // @ts-expect-error parser-hermes produces these node types
-      ComponentDeclaration(node) {
-        // component MyComponent() { const onClick = useEffectEvent(...) }
-        recordAllUseEffectEventFunctions(getScope(node));
-      },
-
-      // @ts-expect-error parser-hermes produces these node types
-      HookDeclaration(node) {
-        // hook useMyHook() { const onClick = useEffectEvent(...) }
-        recordAllUseEffectEventFunctions(getScope(node));
-      },
     };
   },
 } satisfies Rule.RuleModule;

packages/react-client/src/ReactFlightClient.js

@@ -39,9 +39,12 @@ import type {
   EncodeFormActionCallback,
 } from './ReactFlightReplyClient';
 
+import type {Postpone} from 'react/src/ReactPostpone';
+
 import type {TemporaryReferenceSet} from './ReactFlightTemporaryReferences';
 
 import {
+  enablePostpone,
   enableProfilerTimer,
   enableComponentPerformanceTrack,
   enableAsyncDebugInfo,
@@ -86,6 +89,7 @@ import {
 import {
   REACT_LAZY_TYPE,
   REACT_ELEMENT_TYPE,
+  REACT_POSTPONE_TYPE,
   ASYNC_ITERATOR,
   REACT_FRAGMENT_TYPE,
 } from 'shared/ReactSymbols';
@@ -363,7 +367,6 @@ type Response = {
   _debugRootStack?: null | Error, // DEV-only
   _debugRootTask?: null | ConsoleTask, // DEV-only
   _debugStartTime: number, // DEV-only
-  _debugEndTime?: number, // DEV-only
   _debugIOStarted: boolean, // DEV-only
   _debugFindSourceMapURL?: void | FindSourceMapURLCallback, // DEV-only
   _debugChannel?: void | DebugChannel, // DEV-only
@@ -497,33 +500,6 @@ function createErrorChunk<T>(
   return new ReactPromise(ERRORED, null, error);
 }
 
-function filterDebugInfo(
-  response: Response,
-  value: {_debugInfo: ReactDebugInfo, ...},
-) {
-  if (response._debugEndTime === null) {
-    // No end time was defined, so we keep all debug info entries.
-    return;
-  }
-
-  // Remove any debug info entries after the defined end time. For async info
-  // that means we're including anything that was awaited before the end time,
-  // but it doesn't need to be resolved before the end time.
-  const relativeEndTime =
-    response._debugEndTime -
-    // $FlowFixMe[prop-missing]
-    performance.timeOrigin;
-  const debugInfo = [];
-  for (let i = 0; i < value._debugInfo.length; i++) {
-    const info = value._debugInfo[i];
-    if (typeof info.time === 'number' && info.time > relativeEndTime) {
-      break;
-    }
-    debugInfo.push(info);
-  }
-  value._debugInfo = debugInfo;
-}
-
 function moveDebugInfoFromChunkToInnerValue<T>(
   chunk: InitializedChunk<T> | InitializedStreamChunk<any>,
   value: T,
@@ -558,17 +534,7 @@ function moveDebugInfoFromChunkToInnerValue<T>(
   }
 }
 
-function processChunkDebugInfo<T>(
-  response: Response,
-  chunk: InitializedChunk<T> | InitializedStreamChunk<any>,
-  value: T,
-): void {
-  filterDebugInfo(response, chunk);
-  moveDebugInfoFromChunkToInnerValue(chunk, value);
-}
-
 function wakeChunk<T>(
-  response: Response,
   listeners: Array<InitializationReference | (T => mixed)>,
   value: T,
   chunk: InitializedChunk<T>,
@@ -578,17 +544,16 @@ function wakeChunk<T>(
     if (typeof listener === 'function') {
       listener(value);
     } else {
-      fulfillReference(response, listener, value, chunk);
+      fulfillReference(listener, value, chunk);
     }
   }
 
   if (__DEV__) {
-    processChunkDebugInfo(response, chunk, value);
+    moveDebugInfoFromChunkToInnerValue(chunk, value);
   }
 }
 
 function rejectChunk(
-  response: Response,
   listeners: Array<InitializationReference | (mixed => mixed)>,
   error: mixed,
 ): void {
@@ -597,7 +562,7 @@ function rejectChunk(
     if (typeof listener === 'function') {
       listener(error);
     } else {
-      rejectReference(response, listener.handler, error);
+      rejectReference(listener, error);
     }
   }
 }
@@ -630,14 +595,13 @@ function resolveBlockedCycle<T>(
 }
 
 function wakeChunkIfInitialized<T>(
-  response: Response,
   chunk: SomeChunk<T>,
   resolveListeners: Array<InitializationReference | (T => mixed)>,
   rejectListeners: null | Array<InitializationReference | (mixed => mixed)>,
 ): void {
   switch (chunk.status) {
     case INITIALIZED:
-      wakeChunk(response, resolveListeners, chunk.value, chunk);
+      wakeChunk(resolveListeners, chunk.value, chunk);
       break;
     case BLOCKED:
       // It is possible that we're blocked on our own chunk if it's a cycle.
@@ -651,7 +615,7 @@ function wakeChunkIfInitialized<T>(
           if (cyclicHandler !== null) {
             // This reference points back to this chunk. We can resolve the cycle by
             // using the value from that handler.
-            fulfillReference(response, reference, cyclicHandler.value, chunk);
+            fulfillReference(reference, cyclicHandler.value, chunk);
             resolveListeners.splice(i, 1);
             i--;
             if (rejectListeners !== null) {
@@ -660,23 +624,6 @@ function wakeChunkIfInitialized<T>(
                 rejectListeners.splice(rejectionIdx, 1);
               }
             }
-            // The status might have changed after fulfilling the reference.
-            switch ((chunk: SomeChunk<T>).status) {
-              case INITIALIZED:
-                const initializedChunk: InitializedChunk<T> = (chunk: any);
-                wakeChunk(
-                  response,
-                  resolveListeners,
-                  initializedChunk.value,
-                  initializedChunk,
-                );
-                return;
-              case ERRORED:
-                if (rejectListeners !== null) {
-                  rejectChunk(response, rejectListeners, chunk.reason);
-                }
-                return;
-            }
           }
         }
       }
@@ -703,7 +650,7 @@ function wakeChunkIfInitialized<T>(
       break;
     case ERRORED:
       if (rejectListeners) {
-        rejectChunk(response, rejectListeners, chunk.reason);
+        rejectChunk(rejectListeners, chunk.reason);
       }
       break;
   }
@@ -761,7 +708,7 @@ function triggerErrorOnChunk<T>(
   erroredChunk.status = ERRORED;
   erroredChunk.reason = error;
   if (listeners !== null) {
-    rejectChunk(response, listeners, error);
+    rejectChunk(listeners, error);
   }
 }
 
@@ -869,7 +816,7 @@ function resolveModelChunk<T>(
     // longer be rendered or might not be the highest pri.
     initializeModelChunk(resolvedChunk);
     // The status might have changed after initialization.
-    wakeChunkIfInitialized(response, chunk, resolveListeners, rejectListeners);
+    wakeChunkIfInitialized(chunk, resolveListeners, rejectListeners);
   }
 }
 
@@ -898,11 +845,12 @@ function resolveModuleChunk<T>(
   }
   if (resolveListeners !== null) {
     initializeModuleChunk(resolvedChunk);
-    wakeChunkIfInitialized(response, chunk, resolveListeners, rejectListeners);
+    wakeChunkIfInitialized(chunk, resolveListeners, rejectListeners);
   }
 }
 
 type InitializationReference = {
+  response: Response, // TODO: Remove Response from here and pass it through instead.
   handler: InitializationHandler,
   parentObject: Object,
   key: string,
@@ -1041,7 +989,7 @@ function initializeModelChunk<T>(chunk: ResolvedModelChunk<T>): void {
         if (typeof listener === 'function') {
           listener(value);
         } else {
-          fulfillReference(response, listener, value, cyclicChunk);
+          fulfillReference(listener, value, cyclicChunk);
         }
       }
     }
@@ -1062,7 +1010,7 @@ function initializeModelChunk<T>(chunk: ResolvedModelChunk<T>): void {
     initializedChunk.value = value;
 
     if (__DEV__) {
-      processChunkDebugInfo(response, initializedChunk, value);
+      moveDebugInfoFromChunkToInnerValue(initializedChunk, value);
     }
   } catch (error) {
     const erroredChunk: ErroredChunk<T> = (chunk: any);
@@ -1449,12 +1397,11 @@ function getChunk(response: Response, id: number): SomeChunk<any> {
 }
 
 function fulfillReference(
-  response: Response,
   reference: InitializationReference,
   value: any,
   fulfilledChunk: SomeChunk<any>,
 ): void {
-  const {handler, parentObject, key, map, path} = reference;
+  const {response, handler, parentObject, key, map, path} = reference;
 
   for (let i = 1; i < path.length; i++) {
     while (
@@ -1524,11 +1471,7 @@ function fulfillReference(
             return;
           }
           default: {
-            rejectReference(
-              response,
-              reference.handler,
-              referencedChunk.reason,
-            );
+            rejectReference(reference, referencedChunk.reason);
             return;
           }
         }
@@ -1626,20 +1569,21 @@ function fulfillReference(
     initializedChunk.value = handler.value;
     initializedChunk.reason = handler.reason; // Used by streaming chunks
     if (resolveListeners !== null) {
-      wakeChunk(response, resolveListeners, handler.value, initializedChunk);
+      wakeChunk(resolveListeners, handler.value, initializedChunk);
     } else {
       if (__DEV__) {
-        processChunkDebugInfo(response, initializedChunk, handler.value);
+        moveDebugInfoFromChunkToInnerValue(initializedChunk, handler.value);
       }
     }
   }
 }
 
 function rejectReference(
-  response: Response,
-  handler: InitializationHandler,
+  reference: InitializationReference,
   error: mixed,
 ): void {
+  const {handler, response} = reference;
+
   if (handler.errored) {
     // We've already errored. We could instead build up an AggregateError
     // but if there are multiple errors we just take the first one like
@@ -1730,6 +1674,7 @@ function waitForReference<T>(
   }
 
   const reference: InitializationReference = {
+    response,
     handler,
     parentObject,
     key,
@@ -1877,10 +1822,10 @@ function loadServerReference<A: Iterable<any>, T>(
       initializedChunk.status = INITIALIZED;
       initializedChunk.value = handler.value;
       if (resolveListeners !== null) {
-        wakeChunk(response, resolveListeners, handler.value, initializedChunk);
+        wakeChunk(resolveListeners, handler.value, initializedChunk);
       } else {
         if (__DEV__) {
-          processChunkDebugInfo(response, initializedChunk, handler.value);
+          moveDebugInfoFromChunkToInnerValue(initializedChunk, handler.value);
         }
       }
     }
@@ -2617,7 +2562,6 @@ function ResponseInstance(
   replayConsole: boolean, // DEV-only
   environmentName: void | string, // DEV-only
   debugStartTime: void | number, // DEV-only
-  debugEndTime: void | number, // DEV-only
   debugChannel: void | DebugChannel, // DEV-only
 ) {
   const chunks: Map<number, SomeChunk<any>> = new Map();
@@ -2685,7 +2629,6 @@ function ResponseInstance(
       // and is not considered I/O required to load the stream.
       setTimeout(markIOStarted.bind(this), 0);
     }
-    this._debugEndTime = debugEndTime == null ? null : debugEndTime;
     this._debugFindSourceMapURL = findSourceMapURL;
     this._debugChannel = debugChannel;
     this._blockedConsole = null;
@@ -2729,7 +2672,6 @@ export function createResponse(
   replayConsole: boolean, // DEV-only
   environmentName: void | string, // DEV-only
   debugStartTime: void | number, // DEV-only
-  debugEndTime: void | number, // DEV-only
   debugChannel: void | DebugChannel, // DEV-only
 ): WeakResponse {
   return getWeakResponse(
@@ -2746,7 +2688,6 @@ export function createResponse(
       replayConsole,
       environmentName,
       debugStartTime,
-      debugEndTime,
       debugChannel,
     ),
   );
@@ -3118,10 +3059,10 @@ function resolveStream<T: ReadableStream | $AsyncIterable<any, any, void>>(
   resolvedChunk.value = stream;
   resolvedChunk.reason = controller;
   if (resolveListeners !== null) {
-    wakeChunk(response, resolveListeners, chunk.value, (chunk: any));
+    wakeChunk(resolveListeners, chunk.value, (chunk: any));
   } else {
     if (__DEV__) {
-      processChunkDebugInfo(response, resolvedChunk, stream);
+      moveDebugInfoFromChunkToInnerValue(resolvedChunk, stream);
     }
   }
 }
@@ -3261,12 +3202,7 @@ function startAsyncIterable<T>(
         initializedChunk.status = INITIALIZED;
         initializedChunk.value = {done: false, value: value};
         if (resolveListeners !== null) {
-          wakeChunkIfInitialized(
-            response,
-            chunk,
-            resolveListeners,
-            rejectListeners,
-          );
+          wakeChunkIfInitialized(chunk, resolveListeners, rejectListeners);
         }
       }
       nextWriteIndex++;
@@ -3456,6 +3392,88 @@ function resolveErrorDev(
   return error;
 }
 
+function resolvePostponeProd(
+  response: Response,
+  id: number,
+  streamState: StreamState,
+): void {
+  if (__DEV__) {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'resolvePostponeProd should never be called in development mode. Use resolvePostponeDev instead. This is a bug in React.',
+    );
+  }
+  const error = new Error(
+    'A Server Component was postponed. The reason is omitted in production' +
+      ' builds to avoid leaking sensitive details.',
+  );
+  const postponeInstance: Postpone = (error: any);
+  postponeInstance.$$typeof = REACT_POSTPONE_TYPE;
+  postponeInstance.stack = 'Error: ' + error.message;
+  const chunks = response._chunks;
+  const chunk = chunks.get(id);
+  if (!chunk) {
+    const newChunk: ErroredChunk<any> = createErrorChunk(
+      response,
+      postponeInstance,
+    );
+    chunks.set(id, newChunk);
+  } else {
+    triggerErrorOnChunk(response, chunk, postponeInstance);
+  }
+}
+
+function resolvePostponeDev(
+  response: Response,
+  id: number,
+  reason: string,
+  stack: ReactStackTrace,
+  env: string,
+  streamState: StreamState,
+): void {
+  if (!__DEV__) {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'resolvePostponeDev should never be called in production mode. Use resolvePostponeProd instead. This is a bug in React.',
+    );
+  }
+  let postponeInstance: Postpone;
+  const callStack = buildFakeCallStack(
+    response,
+    stack,
+    env,
+    false,
+    // $FlowFixMe[incompatible-use]
+    Error.bind(null, reason || ''),
+  );
+  const rootTask = response._debugRootTask;
+  if (rootTask != null) {
+    postponeInstance = rootTask.run(callStack);
+  } else {
+    postponeInstance = callStack();
+  }
+  postponeInstance.$$typeof = REACT_POSTPONE_TYPE;
+  const chunks = response._chunks;
+  const chunk = chunks.get(id);
+  if (!chunk) {
+    const newChunk: ErroredChunk<any> = createErrorChunk(
+      response,
+      postponeInstance,
+    );
+    if (__DEV__) {
+      resolveChunkDebugInfo(response, streamState, newChunk);
+    }
+    chunks.set(id, newChunk);
+  } else {
+    if (__DEV__) {
+      resolveChunkDebugInfo(response, streamState, chunk);
+    }
+    triggerErrorOnChunk(response, chunk, postponeInstance);
+  }
+}
+
 function resolveErrorModel(
   response: Response,
   id: number,
@@ -4807,6 +4825,25 @@ function processFullStringRow(
       return;
     }
     // Fallthrough
+    case 80 /* "P" */: {
+      if (enablePostpone) {
+        if (__DEV__) {
+          const postponeInfo = JSON.parse(row);
+          resolvePostponeDev(
+            response,
+            id,
+            postponeInfo.reason,
+            postponeInfo.stack,
+            postponeInfo.env,
+            streamState,
+          );
+        } else {
+          resolvePostponeProd(response, id, streamState);
+        }
+        return;
+      }
+    }
+    // Fallthrough
     default: /* """ "{" "[" "t" "f" "n" "0" - "9" */ {
       if (__DEV__ && row === '') {
         resolveDebugHalt(response, id);
@@ -4857,7 +4894,6 @@ export function processBinaryChunk(
           resolvedRowTag === 65 /* "A" */ ||
           resolvedRowTag === 79 /* "O" */ ||
           resolvedRowTag === 111 /* "o" */ ||
-          resolvedRowTag === 98 /* "b" */ ||
           resolvedRowTag === 85 /* "U" */ ||
           resolvedRowTag === 83 /* "S" */ ||
           resolvedRowTag === 115 /* "s" */ ||
@@ -4917,31 +4953,14 @@ export function processBinaryChunk(
       // We found the last chunk of the row
       const length = lastIdx - i;
       const lastChunk = new Uint8Array(chunk.buffer, offset, length);
-
-      // Check if this is a Uint8Array for a byte stream. We enqueue it
-      // immediately but need to determine if we can use zero-copy or must copy.
-      if (rowTag === 98 /* "b" */) {
-        resolveBuffer(
-          response,
-          rowID,
-          // If we're at the end of the RSC chunk, no more parsing will access
-          // this buffer and we don't need to copy the chunk to allow detaching
-          // the buffer, otherwise we need to copy.
-          lastIdx === chunkLength ? lastChunk : lastChunk.slice(),
-          streamState,
-        );
-      } else {
-        // Process all other row types.
-        processFullBinaryRow(
-          response,
-          streamState,
-          rowID,
-          rowTag,
-          buffer,
-          lastChunk,
-        );
-      }
-
+      processFullBinaryRow(
+        response,
+        streamState,
+        rowID,
+        rowTag,
+        buffer,
+        lastChunk,
+      );
       // Reset state machine for a new row
       i = lastIdx;
       if (rowState === ROW_CHUNK_BY_NEWLINE) {
@@ -4954,27 +4973,14 @@ export function processBinaryChunk(
       rowLength = 0;
       buffer.length = 0;
     } else {
-      // The rest of this row is in a future chunk.
+      // The rest of this row is in a future chunk. We stash the rest of the
+      // current chunk until we can process the full row.
       const length = chunk.byteLength - i;
       const remainingSlice = new Uint8Array(chunk.buffer, offset, length);
-
-      // For byte streams, we can enqueue the partial row immediately without
-      // copying since we're at the end of the RSC chunk and no more parsing
-      // will access this buffer.
-      if (rowTag === 98 /* "b" */) {
-        // Update how many bytes we're still waiting for. We need to do this
-        // before enqueueing, as enqueue will detach the buffer and byteLength
-        // will become 0.
-        rowLength -= remainingSlice.byteLength;
-        resolveBuffer(response, rowID, remainingSlice, streamState);
-      } else {
-        // For other row types, stash the rest of the current chunk until we can
-        // process the full row.
-        buffer.push(remainingSlice);
-        // Update how many bytes we're still waiting for. If we're looking for
-        // a newline, this doesn't hurt since we'll just ignore it.
-        rowLength -= remainingSlice.byteLength;
-      }
+      buffer.push(remainingSlice);
+      // Update how many bytes we're still waiting for. If we're looking for
+      // a newline, this doesn't hurt since we'll just ignore it.
+      rowLength -= remainingSlice.byteLength;
       break;
     }
   }

packages/react-devtools-shared/src/__tests__/bridge-test.js

@@ -27,7 +27,7 @@ describe('Bridge', () => {
     // Check that we're wired up correctly.
     bridge.send('reloadAppForProfiling');
     jest.runAllTimers();
-    expect(wall.send).toHaveBeenCalledWith('reloadAppForProfiling', undefined);
+    expect(wall.send).toHaveBeenCalledWith('reloadAppForProfiling');
 
     // Should flush pending messages and then shut down.
     wall.send.mockClear();
@@ -37,7 +37,7 @@ describe('Bridge', () => {
     jest.runAllTimers();
     expect(wall.send).toHaveBeenCalledWith('update', '1');
     expect(wall.send).toHaveBeenCalledWith('update', '2');
-    expect(wall.send).toHaveBeenCalledWith('shutdown', undefined);
+    expect(wall.send).toHaveBeenCalledWith('shutdown');
     expect(shutdownCallback).toHaveBeenCalledTimes(1);
 
     // Verify that the Bridge doesn't send messages after shutdown.

packages/react-devtools-shared/src/__tests__/setupTests.js

@@ -116,16 +116,6 @@ function shouldIgnoreConsoleErrorOrWarn(args) {
     return false;
   }
 
-  const maybeError = args[1];
-  if (
-    maybeError !== null &&
-    typeof maybeError === 'object' &&
-    maybeError.message === 'Simulated error coming from DevTools'
-  ) {
-    // Error from forcing an error boundary.
-    return true;
-  }
-
   return global._ignoredErrorOrWarningMessages.some(errorOrWarningMessage => {
     return firstArg.indexOf(errorOrWarningMessage) !== -1;
   });

packages/react-devtools-shared/src/__tests__/store-test.js

@@ -3283,6 +3283,8 @@ describe('Store', () => {
         <Suspense name="Outer" rects={null}>
     `);
 
+    console.log('...........................');
+
     await actAsync(() => {
       resolve('loaded');
     });
@@ -3298,100 +3300,4 @@ describe('Store', () => {
           <Suspense name="Inner" rects={[{x:1,y:2,width:6,height:1}]}>
     `);
   });
-
-  // @reactVersion >= 19.0
-  it('measures rects when reconnecting', async () => {
-    function Component({children, promise}) {
-      let content = '';
-      if (promise) {
-        const value = readValue(promise);
-        if (typeof value === 'string') {
-          content += value;
-        }
-      }
-      return (
-        <div>
-          {content}
-          {children}
-        </div>
-      );
-    }
-
-    function App({outer, inner}) {
-      return (
-        <React.Suspense
-          name="outer"
-          fallback={<Component key="outer-fallback">loading outer</Component>}>
-          <Component key="outer-content" promise={outer}>
-            outer content
-          </Component>
-          <React.Suspense
-            name="inner"
-            fallback={
-              <Component key="inner-fallback">loading inner</Component>
-            }>
-            <Component key="inner-content" promise={inner}>
-              inner content
-            </Component>
-          </React.Suspense>
-        </React.Suspense>
-      );
-    }
-
-    await actAsync(() => {
-      render(<App outer={null} inner={null} />);
-    });
-
-    expect(store).toMatchInlineSnapshot(`
-      [root]
-        ▾ <App>
-          ▾ <Suspense name="outer">
-              <Component key="outer-content">
-            ▾ <Suspense name="inner">
-                <Component key="inner-content">
-      [suspense-root]  rects={[{x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}]}
-        <Suspense name="outer" rects={[{x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}]}>
-          <Suspense name="inner" rects={[{x:1,y:2,width:13,height:1}]}>
-    `);
-
-    let outerResolve;
-    const outerPromise = new Promise(resolve => {
-      outerResolve = resolve;
-    });
-
-    let innerResolve;
-    const innerPromise = new Promise(resolve => {
-      innerResolve = resolve;
-    });
-    await actAsync(() => {
-      render(<App outer={outerPromise} inner={innerPromise} />);
-    });
-
-    expect(store).toMatchInlineSnapshot(`
-      [root]
-        ▾ <App>
-          ▾ <Suspense name="outer">
-              <Component key="outer-fallback">
-      [suspense-root]  rects={[{x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}]}
-        <Suspense name="outer" rects={[{x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}]}>
-          <Suspense name="inner" rects={[{x:1,y:2,width:13,height:1}]}>
-    `);
-
-    await actAsync(() => {
-      outerResolve('..');
-      innerResolve('.');
-    });
-
-    expect(store).toMatchInlineSnapshot(`
-      [root]
-        ▾ <App>
-          ▾ <Suspense name="outer">
-              <Component key="outer-content">
-            ▾ <Suspense name="inner">
-                <Component key="inner-content">
-      [suspense-root]  rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:14,height:1}]}
-        <Suspense name="outer" rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:14,height:1}]}>
-          <Suspense name="inner" rects={[{x:1,y:2,width:14,height:1}]}>
-    `);
-  });
 });

packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js

@@ -18,24 +18,12 @@ import {
 describe('Store component filters', () => {
   let React;
   let Types;
-  let agent;
   let bridge: FrontendBridge;
   let store: Store;
   let utils;
   let actAsync;
 
-  beforeAll(() => {
-    // JSDDOM doesn't implement getClientRects so we're just faking one for testing purposes
-    Element.prototype.getClientRects = function (this: Element) {
-      const textContent = this.textContent;
-      return [
-        new DOMRect(1, 2, textContent.length, textContent.split('\n').length),
-      ];
-    };
-  });
-
   beforeEach(() => {
-    agent = global.agent;
     bridge = global.bridge;
     store = global.store;
     store.collapseNodesByDefault = false;
@@ -168,9 +156,9 @@ describe('Store component filters', () => {
             <div>
         ▾ <Suspense>
             <div>
-      [suspense-root]  rects={[{x:1,y:2,width:7,height:1}, {x:1,y:2,width:6,height:1}]}
-        <Suspense name="Unknown" rects={[{x:1,y:2,width:7,height:1}]}>
-        <Suspense name="Unknown" rects={[{x:1,y:2,width:6,height:1}]}>
+      [suspense-root]  rects={[]}
+        <Suspense name="Unknown" rects={[]}>
+        <Suspense name="Unknown" rects={[]}>
     `);
 
     await actAsync(
@@ -186,9 +174,9 @@ describe('Store component filters', () => {
             <div>
         ▾ <Suspense>
             <div>
-      [suspense-root]  rects={[{x:1,y:2,width:7,height:1}, {x:1,y:2,width:6,height:1}]}
-        <Suspense name="Unknown" rects={[{x:1,y:2,width:7,height:1}]}>
-        <Suspense name="Unknown" rects={[{x:1,y:2,width:6,height:1}]}>
+      [suspense-root]  rects={[]}
+        <Suspense name="Unknown" rects={[]}>
+        <Suspense name="Unknown" rects={[]}>
     `);
 
     await actAsync(
@@ -204,9 +192,9 @@ describe('Store component filters', () => {
             <div>
         ▾ <Suspense>
             <div>
-      [suspense-root]  rects={[{x:1,y:2,width:7,height:1}, {x:1,y:2,width:6,height:1}]}
-        <Suspense name="Unknown" rects={[{x:1,y:2,width:7,height:1}]}>
-        <Suspense name="Unknown" rects={[{x:1,y:2,width:6,height:1}]}>
+      [suspense-root]  rects={[]}
+        <Suspense name="Unknown" rects={[]}>
+        <Suspense name="Unknown" rects={[]}>
     `);
   });
 
@@ -752,180 +740,4 @@ describe('Store component filters', () => {
       `);
     });
   });
-
-  // @reactVersion >= 16.6
-  it('resets forced error and fallback states when filters are changed', async () => {
-    store.componentFilters = [];
-    class ErrorBoundary extends React.Component {
-      state = {hasError: false};
-
-      static getDerivedStateFromError() {
-        return {hasError: true};
-      }
-
-      render() {
-        if (this.state.hasError) {
-          return <div key="did-error" />;
-        }
-        return this.props.children;
-      }
-    }
-
-    function App() {
-      return (
-        <>
-          <React.Suspense fallback={<div key="loading" />}>
-            <div key="suspense-content" />
-          </React.Suspense>
-          <ErrorBoundary>
-            <div key="error-content" />
-          </ErrorBoundary>
-        </>
-      );
-    }
-
-    await actAsync(async () => {
-      render(<App />);
-    });
-    const rendererID = utils.getRendererID();
-    await actAsync(() => {
-      agent.overrideSuspense({
-        id: store.getElementIDAtIndex(2),
-        rendererID,
-        forceFallback: true,
-      });
-      agent.overrideError({
-        id: store.getElementIDAtIndex(4),
-        rendererID,
-        forceError: true,
-      });
-    });
-
-    expect(store).toMatchInlineSnapshot(`
-      [root]
-        ▾ <App>
-          ▾ <Suspense>
-              <div key="loading">
-          ▾ <ErrorBoundary>
-              <div key="did-error">
-      [suspense-root]  rects={[{x:1,y:2,width:0,height:1}, {x:1,y:2,width:0,height:1}, {x:1,y:2,width:0,height:1}]}
-        <Suspense name="App" rects={[{x:1,y:2,width:0,height:1}]}>
-    `);
-
-    await actAsync(() => {
-      store.componentFilters = [
-        utils.createElementTypeFilter(Types.ElementTypeFunction, true),
-      ];
-    });
-
-    expect(store).toMatchInlineSnapshot(`
-      [root]
-        ▾ <Suspense>
-            <div key="suspense-content">
-        ▾ <ErrorBoundary>
-            <div key="error-content">
-      [suspense-root]  rects={[{x:1,y:2,width:0,height:1}, {x:1,y:2,width:0,height:1}]}
-        <Suspense name="Unknown" rects={[{x:1,y:2,width:0,height:1}]}>
-    `);
-  });
-
-  // @reactVersion >= 19.2
-  it('can filter by Activity slices', async () => {
-    const Activity = React.Activity;
-    const immediate = Promise.resolve(<div>Immediate</div>);
-
-    function Root({children}) {
-      return (
-        <Activity name="/" mode="visible">
-          <React.Suspense fallback="Loading...">
-            <h1>Root</h1>
-            <main>{children}</main>
-          </React.Suspense>
-        </Activity>
-      );
-    }
-
-    function Layout({children}) {
-      return (
-        <Activity name="/blog" mode="visible">
-          <h2>Blog</h2>
-          <section>{children}</section>
-        </Activity>
-      );
-    }
-
-    function Page() {
-      return <React.Suspense fallback="Loading...">{immediate}</React.Suspense>;
-    }
-
-    await actAsync(async () =>
-      render(
-        <Root>
-          <Layout>
-            <Page />
-          </Layout>
-        </Root>,
-      ),
-    );
-
-    expect(store).toMatchInlineSnapshot(`
-      [root]
-        ▾ <Root>
-          ▾ <Activity name="/">
-            ▾ <Suspense>
-                <h1>
-              ▾ <main>
-                ▾ <Layout>
-                  ▾ <Activity name="/blog">
-                      <h2>
-                    ▾ <section>
-                      ▾ <Page>
-                        ▾ <Suspense>
-                            <div>
-      [suspense-root]  rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}
-        <Suspense name="Root" rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}>
-          <Suspense name="Page" rects={[{x:1,y:2,width:9,height:1}]}>
-    `);
-
-    await actAsync(
-      async () =>
-        (store.componentFilters = [
-          utils.createActivitySliceFilter(store.getElementIDAtIndex(1)),
-        ]),
-    );
-
-    expect(store).toMatchInlineSnapshot(`
-      [root]
-        ▾ <Activity name="/">
-          ▾ <Suspense>
-              <h1>
-            ▾ <main>
-              ▾ <Layout>
-                ▸ <Activity name="/blog">
-      [suspense-root]  rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}
-        <Suspense name="Unknown" rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}>
-          <Suspense name="Page" rects={[{x:1,y:2,width:9,height:1}]}>
-    `);
-
-    await actAsync(async () => (store.componentFilters = []));
-
-    expect(store).toMatchInlineSnapshot(`
-      [root]
-        ▾ <Root>
-          ▾ <Activity name="/">
-            ▾ <Suspense>
-                <h1>
-              ▾ <main>
-                ▾ <Layout>
-                  ▾ <Activity name="/blog">
-                      <h2>
-                    ▾ <section>
-                      ▾ <Page>
-                        ▾ <Suspense>
-                            <div>
-      [suspense-root]  rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}
-        <Suspense name="Root" rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}>
-          <Suspense name="Page" rects={[{x:1,y:2,width:9,height:1}]}>
-    `);
-  });
 });

packages/react-devtools-shared/src/__tests__/utils.js

@@ -328,19 +328,6 @@ export function createLocationFilter(
   };
 }
 
-export function createActivitySliceFilter(
-  activityID: Element['id'],
-  isEnabled: boolean = true,
-) {
-  const Types = require('react-devtools-shared/src/frontend/types');
-  return {
-    type: Types.ComponentFilterActivitySlice,
-    isEnabled,
-    isValid: true,
-    activityID: activityID,
-  };
-}
-
 export function getRendererID(): number {
   if (global.agent == null) {
     throw Error('Agent unavailable.');

packages/react-devtools-shared/src/backend/fiber/renderer.js

@@ -26,7 +26,6 @@ import {
   ComponentFilterHOC,
   ComponentFilterLocation,
   ComponentFilterEnvironmentName,
-  ComponentFilterActivitySlice,
   ElementTypeClass,
   ElementTypeContext,
   ElementTypeFunction,
@@ -54,7 +53,7 @@ import {
   renamePathInObject,
   setInObject,
   utfEncodeString,
-  persistableComponentFilters,
+  filterOutLocationComponentFilters,
 } from 'react-devtools-shared/src/utils';
 import {
   formatConsoleArgumentsToSingleString,
@@ -86,7 +85,6 @@ import {
   TREE_OPERATION_SET_SUBTREE_MODE,
   TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
-  TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE,
   SUSPENSE_TREE_OPERATION_ADD,
   SUSPENSE_TREE_OPERATION_REMOVE,
   SUSPENSE_TREE_OPERATION_REORDER_CHILDREN,
@@ -172,7 +170,6 @@ import type {
 } from '../types';
 import type {
   ComponentFilter,
-  ActivitySliceFilter,
   ElementType,
   Plugins,
 } from 'react-devtools-shared/src/frontend/types';
@@ -304,7 +301,6 @@ type SuspenseNode = {
   rects: null | Array<Rect>, // The bounding rects of content children.
   suspendedBy: Map<ReactIOInfo, Set<DevToolsInstance>>, // Tracks which data we're suspended by and the children that suspend it.
   environments: Map<string, number>, // Tracks the Flight environment names that suspended this. I.e. if the server blocked this.
-  endTime: number, // Track a short cut to the maximum end time value within the suspendedBy set.
   // Track whether any of the items in suspendedBy are unique this this Suspense boundaries or if they're all
   // also in the parent sets. This determine whether this could contribute in the loading sequence.
   hasUniqueSuspenders: boolean,
@@ -334,7 +330,6 @@ function createSuspenseNode(
     rects: null,
     suspendedBy: new Map(),
     environments: new Map(),
-    endTime: 0,
     hasUniqueSuspenders: false,
     hasUnknownSuspenders: false,
   });
@@ -871,9 +866,6 @@ const idToDevToolsInstanceMap: Map<
   FiberInstance | VirtualInstance,
 > = new Map();
 
-let focusedActivityID: null | FiberInstance['id'] = null;
-let focusedActivity: null | Fiber = null;
-
 const idToSuspenseNodeMap: Map<FiberInstance['id'], SuspenseNode> = new Map();
 
 // Map of canonical HostInstances to the nearest parent DevToolsInstance.
@@ -1441,25 +1433,16 @@ export function attach(
   const hideElementsWithPaths: Set<RegExp> = new Set();
   const hideElementsWithTypes: Set<ElementType> = new Set();
   const hideElementsWithEnvs: Set<string> = new Set();
-  let isInFocusedActivity: boolean = true;
 
   // Highlight updates
   let traceUpdatesEnabled: boolean = false;
   const traceUpdatesForNodes: Set<HostInstance> = new Set();
 
-  function applyComponentFilters(
-    componentFilters: Array<ComponentFilter>,
-    nextActivitySlice: null | Fiber,
-  ) {
+  function applyComponentFilters(componentFilters: Array<ComponentFilter>) {
     hideElementsWithTypes.clear();
     hideElementsWithDisplayNames.clear();
     hideElementsWithPaths.clear();
     hideElementsWithEnvs.clear();
-    const previousFocusedActivityID = focusedActivityID;
-    focusedActivityID = null;
-    focusedActivity = null;
-    // Consider everything in the slice by default
-    isInFocusedActivity = true;
 
     componentFilters.forEach(componentFilter => {
       if (!componentFilter.isEnabled) {
@@ -1488,25 +1471,6 @@ export function attach(
         case ComponentFilterEnvironmentName:
           hideElementsWithEnvs.add(componentFilter.value);
           break;
-        case ComponentFilterActivitySlice:
-          if (
-            nextActivitySlice !== null &&
-            nextActivitySlice.tag === ActivityComponent
-          ) {
-            focusedActivity = nextActivitySlice;
-            isInFocusedActivity = false;
-            if (componentFilter.rendererID !== rendererID) {
-              // We filtered an Activity from another renderer.
-              // We need to restore the instance ID since we won't be mounting it
-              // in this renderer.
-              focusedActivityID = previousFocusedActivityID;
-            }
-          } else {
-            // We're not filtering by activity slice after all.
-            // Don't mark the filter as disabled here.
-            // Otherwise updateComponentFilters() will think no enabled filter was changed.
-          }
-          break;
         default:
           console.warn(
             `Invalid component filter type "${componentFilter.type}"`,
@@ -1520,9 +1484,11 @@ export function attach(
   // because they are stored in localStorage within the context of the extension.
   // Instead it relies on the extension to pass filters through.
   if (window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ != null) {
-    const restoredComponentFilters: Array<ComponentFilter> =
-      persistableComponentFilters(window.__REACT_DEVTOOLS_COMPONENT_FILTERS__);
-    applyComponentFilters(restoredComponentFilters, null);
+    const componentFiltersWithoutLocationBasedOnes =
+      filterOutLocationComponentFilters(
+        window.__REACT_DEVTOOLS_COMPONENT_FILTERS__,
+      );
+    applyComponentFilters(componentFiltersWithoutLocationBasedOnes);
   } else {
     // Unfortunately this feature is not expected to work for React Native for now.
     // It would be annoying for us to spam YellowBox warnings with unactionable stuff,
@@ -1530,7 +1496,7 @@ export function attach(
     //console.warn('⚛ DevTools: Could not locate saved component filters');
 
     // Fallback to assuming the default filters in this case.
-    applyComponentFilters(getDefaultComponentFilters(), null);
+    applyComponentFilters(getDefaultComponentFilters());
   }
 
   // If necessary, we can revisit optimizing this operation.
@@ -1544,27 +1510,6 @@ export function attach(
       throw Error('Cannot modify filter preferences while profiling');
     }
 
-    const previousForcedFallbacks =
-      forceFallbackForFibers.size > 0 ? new Set(forceFallbackForFibers) : null;
-    const previousForcedErrors =
-      forceErrorForFibers.size > 0 ? new Map(forceErrorForFibers) : null;
-
-    // The ID will be based on the old tree. We need to find the Fiber based on
-    // that ID before we unmount everything. We set the activity slice ID once
-    // we mount it again.
-    let nextFocusedActivity: null | Fiber = null;
-    let focusedActivityFilter: null | ActivitySliceFilter = null;
-    for (let i = 0; i < componentFilters.length; i++) {
-      const filter = componentFilters[i];
-      if (filter.type === ComponentFilterActivitySlice && filter.isEnabled) {
-        focusedActivityFilter = filter;
-        const instance = idToDevToolsInstanceMap.get(filter.activityID);
-        if (instance !== undefined && instance.kind === FIBER_INSTANCE) {
-          nextFocusedActivity = instance.data;
-        }
-      }
-    }
-
     // Recursively unmount all roots.
     hook.getFiberRoots(rendererID).forEach(root => {
       const rootInstance = rootToFiberInstanceMap.get(root);
@@ -1576,59 +1521,15 @@ export function attach(
       currentRoot = rootInstance;
       unmountInstanceRecursively(rootInstance);
       rootToFiberInstanceMap.delete(root);
+      flushPendingEvents();
       currentRoot = (null: any);
     });
 
-    if (
-      nextFocusedActivity !== focusedActivity &&
-      (focusedActivityFilter === null ||
-        focusedActivityFilter.rendererID === rendererID)
-    ) {
-      // When we find the applied instance during mount we will send the actual ID.
-      // Otherwise 0 will indicate that we unfocused the activity slice.
-      pushOperation(TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE);
-      pushOperation(0);
-    }
-    applyComponentFilters(componentFilters, nextFocusedActivity);
+    applyComponentFilters(componentFilters);
 
     // Reset pseudo counters so that new path selections will be persisted.
     rootDisplayNameCounter.clear();
 
-    // We just cleared all the forced states. Schedule updates on the affected Fibers
-    // so that we get their initial states again according to the new filters.
-    if (typeof scheduleUpdate === 'function') {
-      if (previousForcedFallbacks !== null) {
-        // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-        for (const fiber of previousForcedFallbacks) {
-          if (typeof scheduleRetry === 'function') {
-            scheduleRetry(fiber);
-          } else {
-            scheduleUpdate(fiber);
-          }
-        }
-      }
-      if (
-        previousForcedErrors !== null &&
-        typeof setErrorHandler === 'function'
-      ) {
-        // Unlike for Suspense, disabling the forced error state requires setting
-        // the status to false first. `shouldErrorFiberAccordingToMap` will clear
-        // the Fibers later.
-        setErrorHandler(shouldErrorFiberAccordingToMap);
-        // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-        for (const [fiber, shouldError] of previousForcedErrors) {
-          forceErrorForFibers.set(fiber, false);
-          if (shouldError) {
-            if (typeof scheduleRetry === 'function') {
-              scheduleRetry(fiber);
-            } else {
-              scheduleUpdate(fiber);
-            }
-          }
-        }
-      }
-    }
-
     // Recursively re-mount all roots with new filter criteria applied.
     hook.getFiberRoots(rendererID).forEach(root => {
       const current = root.current;
@@ -1645,16 +1546,10 @@ export function attach(
       currentRoot = newRoot;
       setRootPseudoKey(currentRoot.id, root.current);
       mountFiberRecursively(root.current, false);
+      flushPendingEvents();
       currentRoot = (null: any);
     });
 
-    // We need to write back the new ID for the focused Fiber.
-    // Otherwise subsequent filter applications will try to focus based on the old ID.
-    // This is also relevant to filter across renderers.
-    if (focusedActivityFilter !== null && focusedActivityID !== null) {
-      focusedActivityFilter.activityID = focusedActivityID;
-    }
-
     flushPendingEvents();
 
     needsToFlushComponentLogs = false;
@@ -1684,10 +1579,6 @@ export function attach(
     data: ReactComponentInfo,
     secondaryEnv: null | string,
   ): boolean {
-    if (!isInFocusedActivity) {
-      return true;
-    }
-
     // For purposes of filtering Server Components are always Function Components.
     // Environment will be used to filter Server vs Client.
     // Technically they can be forwardRef and memo too but those filters will go away
@@ -1723,11 +1614,6 @@ export function attach(
   function shouldFilterFiber(fiber: Fiber): boolean {
     const {tag, type, key} = fiber;
 
-    // It is never valid to filter the root element.
-    if (tag !== HostRoot && !isInFocusedActivity) {
-      return true;
-    }
-
     switch (tag) {
       case DehydratedSuspenseComponent:
         // TODO: ideally we would show dehydrated Suspense immediately.
@@ -2157,6 +2043,7 @@ export function attach(
   let pendingOperationsQueue: Array<OperationsArray> | null = [];
   const pendingStringTable: Map<string, StringTableEntry> = new Map();
   let pendingStringTableLength: number = 0;
+  let pendingUnmountedRootID: FiberInstance['id'] | null = null;
 
   function pushOperation(op: number): void {
     if (__DEV__) {
@@ -2184,7 +2071,8 @@ export function attach(
       pendingOperations.length === 0 &&
       pendingRealUnmountedIDs.length === 0 &&
       pendingRealUnmountedSuspenseIDs.length === 0 &&
-      pendingSuspenderChanges.size === 0
+      pendingSuspenderChanges.size === 0 &&
+      pendingUnmountedRootID === null
     );
   }
 
@@ -2246,7 +2134,9 @@ export function attach(
       return;
     }
 
-    const numUnmountIDs = pendingRealUnmountedIDs.length;
+    const numUnmountIDs =
+      pendingRealUnmountedIDs.length +
+      (pendingUnmountedRootID === null ? 0 : 1);
     const numUnmountSuspenseIDs = pendingRealUnmountedSuspenseIDs.length;
     const numSuspenderChanges = pendingSuspenderChanges.size;
 
@@ -2266,8 +2156,8 @@ export function attach(
         // Regular operations
         pendingOperations.length +
         // All suspender changes are batched in a single message.
-        // [SUSPENSE_TREE_OPERATION_SUSPENDERS, suspenderChangesLength, ...[id, hasUniqueSuspenders, endTime, isSuspended]]
-        (numSuspenderChanges > 0 ? 2 + numSuspenderChanges * 4 : 0),
+        // [SUSPENSE_TREE_OPERATION_SUSPENDERS, suspenderChangesLength, ...[id, hasUniqueSuspenders, isSuspended]]
+        (numSuspenderChanges > 0 ? 2 + numSuspenderChanges * 3 : 0),
     );
 
     // Identify which renderer this update is coming from.
@@ -2324,6 +2214,11 @@ export function attach(
       for (let j = 0; j < pendingRealUnmountedIDs.length; j++) {
         operations[i++] = pendingRealUnmountedIDs[j];
       }
+      // The root ID should always be unmounted last.
+      if (pendingUnmountedRootID !== null) {
+        operations[i] = pendingUnmountedRootID;
+        i++;
+      }
     }
 
     // Fill in pending operations.
@@ -2347,7 +2242,6 @@ export function attach(
         }
         operations[i++] = fiberIdWithChanges;
         operations[i++] = suspense.hasUniqueSuspenders ? 1 : 0;
-        operations[i++] = Math.round(suspense.endTime * 1000);
         const instance = suspense.instance;
         const isSuspended =
           // TODO: Track if other SuspenseNode like SuspenseList rows are suspended.
@@ -2371,6 +2265,7 @@ export function attach(
     pendingRealUnmountedIDs.length = 0;
     pendingRealUnmountedSuspenseIDs.length = 0;
     pendingSuspenderChanges.clear();
+    pendingUnmountedRootID = null;
     pendingStringTable.clear();
     pendingStringTableLength = 0;
   }
@@ -2574,17 +2469,6 @@ export function attach(
         }
       }
     } else {
-      const suspenseNode = fiberInstance.suspenseNode;
-      if (suspenseNode !== null && fiber.memoizedState === null) {
-        // We're reconnecting an unsuspended Suspense. Measure to see if anything changed.
-        const prevRects = suspenseNode.rects;
-        const nextRects = measureInstance(fiberInstance);
-        if (!areEqualRects(prevRects, nextRects)) {
-          suspenseNode.rects = nextRects;
-          recordSuspenseResize(suspenseNode);
-        }
-      }
-
       const {key} = fiber;
       const displayName = getDisplayNameForFiber(fiber);
       const elementType = getElementTypeForFiber(fiber);
@@ -2856,6 +2740,7 @@ export function attach(
       // Already disconnected.
       return;
     }
+    const fiber = fiberInstance.data;
 
     if (trackedPathMatchInstance === fiberInstance) {
       // We're in the process of trying to restore previous selection.
@@ -2865,7 +2750,17 @@ export function attach(
     }
 
     const id = fiberInstance.id;
-    pendingRealUnmountedIDs.push(id);
+    const isRoot = fiber.tag === HostRoot;
+    if (isRoot) {
+      // Roots must be removed only after all children have been removed.
+      // So we track it separately.
+      pendingUnmountedRootID = id;
+    } else {
+      // To maintain child-first ordering,
+      // we'll push it into one of these queues,
+      // and later arrange them in the correct order.
+      pendingRealUnmountedIDs.push(id);
+    }
   }
 
   function recordSuspenseResize(suspenseNode: SuspenseNode): void {
@@ -3017,19 +2912,12 @@ export function attach(
     // like owner instances to link down into the tree.
     if (!suspendedBySet.has(parentInstance)) {
       suspendedBySet.add(parentInstance);
-      const virtualEndTime = getVirtualEndTime(ioInfo);
       if (
         !parentSuspenseNode.hasUniqueSuspenders &&
         !ioExistsInSuspenseAncestor(parentSuspenseNode, ioInfo)
       ) {
         // This didn't exist in the parent before, so let's mark this boundary as having a unique suspender.
         parentSuspenseNode.hasUniqueSuspenders = true;
-        if (parentSuspenseNode.endTime < virtualEndTime) {
-          parentSuspenseNode.endTime = virtualEndTime;
-        }
-        recordSuspenseSuspenders(parentSuspenseNode);
-      } else if (parentSuspenseNode.endTime < virtualEndTime) {
-        parentSuspenseNode.endTime = virtualEndTime;
         recordSuspenseSuspenders(parentSuspenseNode);
       }
     }
@@ -3091,26 +2979,6 @@ export function attach(
     }
   }
 
-  function getVirtualEndTime(ioInfo: ReactIOInfo): number {
-    if (ioInfo.env != null) {
-      // Sort client side content first so that scripts and streams don't
-      // cover up the effect of server time.
-      return ioInfo.end + 1000000;
-    }
-    return ioInfo.end;
-  }
-
-  function computeEndTime(suspenseNode: SuspenseNode) {
-    let maxEndTime = 0;
-    suspenseNode.suspendedBy.forEach((set, ioInfo) => {
-      const virtualEndTime = getVirtualEndTime(ioInfo);
-      if (virtualEndTime > maxEndTime) {
-        maxEndTime = virtualEndTime;
-      }
-    });
-    return maxEndTime;
-  }
-
   function removePreviousSuspendedBy(
     instance: DevToolsInstance,
     previousSuspendedBy: null | Array<ReactAsyncInfo>,
@@ -3128,7 +2996,6 @@ export function attach(
     if (previousSuspendedBy !== null && suspenseNode !== null) {
       const nextSuspendedBy = instance.suspendedBy;
       let changedEnvironment = false;
-      let mayHaveChangedEndTime = false;
       for (let i = 0; i < previousSuspendedBy.length; i++) {
         const asyncInfo = previousSuspendedBy[i];
         if (
@@ -3142,11 +3009,6 @@ export function attach(
           const ioInfo = asyncInfo.awaited;
           const suspendedBySet = suspenseNode.suspendedBy.get(ioInfo);
 
-          if (suspenseNode.endTime === getVirtualEndTime(ioInfo)) {
-            // This may be the only remaining entry at this end time. Recompute the end time.
-            mayHaveChangedEndTime = true;
-          }
-
           if (
             suspendedBySet === undefined ||
             !suspendedBySet.delete(instance)
@@ -3204,11 +3066,7 @@ export function attach(
           }
         }
       }
-      const newEndTime = mayHaveChangedEndTime
-        ? computeEndTime(suspenseNode)
-        : suspenseNode.endTime;
-      if (changedEnvironment || newEndTime !== suspenseNode.endTime) {
-        suspenseNode.endTime = newEndTime;
+      if (changedEnvironment) {
         recordSuspenseSuspenders(suspenseNode);
       }
     }
@@ -4082,23 +3940,11 @@ export function attach(
     fiber: Fiber,
     traceNearestHostComponentUpdate: boolean,
   ): void {
-    const isFocusedActivityEntry =
-      focusedActivity !== null &&
-      (fiber === focusedActivity || fiber.alternate === focusedActivity);
-    if (isFocusedActivityEntry) {
-      isInFocusedActivity = true;
-    }
-
     const shouldIncludeInTree = !shouldFilterFiber(fiber);
     let newInstance = null;
     let newSuspenseNode = null;
     if (shouldIncludeInTree) {
       newInstance = recordMount(fiber, reconcilingParent);
-      if (isFocusedActivityEntry) {
-        focusedActivityID = newInstance.id;
-        pushOperation(TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE);
-        pushOperation(newInstance.id);
-      }
       if (fiber.tag === SuspenseComponent || fiber.tag === HostRoot) {
         newSuspenseNode = createSuspenseNode(newInstance);
         // Measure this Suspense node. In general we shouldn't do this until we have
@@ -4214,7 +4060,6 @@ export function attach(
     const stashedSuspenseParent = reconcilingParentSuspenseNode;
     const stashedSuspensePrevious = previouslyReconciledSiblingSuspenseNode;
     const stashedSuspenseRemaining = remainingReconcilingChildrenSuspenseNodes;
-    const stashedIsInActivitySlice = isInFocusedActivity;
     if (newInstance !== null) {
       // Push a new DevTools instance parent while reconciling this subtree.
       reconcilingParent = newInstance;
@@ -4228,17 +4073,6 @@ export function attach(
       remainingReconcilingChildrenSuspenseNodes = null;
       shouldPopSuspenseNode = true;
     }
-    if (
-      !isFocusedActivityEntry &&
-      focusedActivity !== null &&
-      fiber.tag === ActivityComponent
-    ) {
-      // We're not filtering how Activity within the focused activity.
-      // We cut of the bottom in the Frontend if we want to just show the
-      // Activity slice instead of all Activity descendants.
-      // The filtering in the backend only happens because filtering out
-      // everything above the focused Activity is hard to implement in the frontend.
-    }
     try {
       if (traceUpdatesEnabled) {
         if (traceNearestHostComponentUpdate) {
@@ -4366,7 +4200,6 @@ export function attach(
         }
       }
     } finally {
-      isInFocusedActivity = stashedIsInActivitySlice;
       if (newInstance !== null) {
         reconcilingParent = stashedParent;
         previouslyReconciledSibling = stashedPrevious;
@@ -4398,7 +4231,6 @@ export function attach(
     const stashedSuspenseParent = reconcilingParentSuspenseNode;
     const stashedSuspensePrevious = previouslyReconciledSiblingSuspenseNode;
     const stashedSuspenseRemaining = remainingReconcilingChildrenSuspenseNodes;
-    const stashedIsInActivitySlice = isInFocusedActivity;
     const previousSuspendedBy = instance.suspendedBy;
     // Push a new DevTools instance parent while reconciling this subtree.
     reconcilingParent = instance;
@@ -4417,19 +4249,6 @@ export function attach(
       shouldPopSuspenseNode = true;
     }
 
-    if (focusedActivity !== null) {
-      if (instance.id === focusedActivityID) {
-        isInFocusedActivity = true;
-      } else if (
-        instance.kind === FIBER_INSTANCE &&
-        instance.data !== null &&
-        instance.data.tag === ActivityComponent
-      ) {
-        // Filtering nested Activity components inside the focused activity
-        // is done in the frontend.
-      }
-    }
-
     try {
       // Unmount the remaining set.
       if (
@@ -4480,7 +4299,6 @@ export function attach(
         previouslyReconciledSiblingSuspenseNode = stashedSuspensePrevious;
         remainingReconcilingChildrenSuspenseNodes = stashedSuspenseRemaining;
       }
-      isInFocusedActivity = stashedIsInActivitySlice;
     }
     if (instance.kind === FIBER_INSTANCE) {
       recordUnmount(instance);
@@ -5161,7 +4979,6 @@ export function attach(
     const stashedSuspenseParent = reconcilingParentSuspenseNode;
     const stashedSuspensePrevious = previouslyReconciledSiblingSuspenseNode;
     const stashedSuspenseRemaining = remainingReconcilingChildrenSuspenseNodes;
-    const stashedIsInActivitySlice = isInFocusedActivity;
     let updateFlags = NoUpdate;
     let shouldMeasureSuspenseNode = false;
     let shouldPopSuspenseNode = false;
@@ -5201,15 +5018,6 @@ export function attach(
         shouldMeasureSuspenseNode = true;
         shouldPopSuspenseNode = true;
       }
-
-      if (focusedActivity !== null) {
-        if (fiberInstance.id === focusedActivityID) {
-          isInFocusedActivity = true;
-        } else if (nextFiber.tag === ActivityComponent) {
-          // Filtering nested Activity components inside the focused activity
-          // is done in the frontend.
-        }
-      }
     }
     try {
       trackDebugInfoFromLazyType(nextFiber);
@@ -5634,7 +5442,6 @@ export function attach(
           previouslyReconciledSiblingSuspenseNode = stashedSuspensePrevious;
           remainingReconcilingChildrenSuspenseNodes = stashedSuspenseRemaining;
         }
-        isInFocusedActivity = stashedIsInActivitySlice;
       }
     }
   }
@@ -5749,12 +5556,11 @@ export function attach(
 
         mountFiberRecursively(root.current, false);
 
+        flushPendingEvents();
+
+        needsToFlushComponentLogs = false;
         currentRoot = (null: any);
       });
-
-      flushPendingEvents();
-
-      needsToFlushComponentLogs = false;
     }
   }
 

packages/react-devtools-shared/src/backend/views/Highlighter/index.js

@@ -33,66 +33,6 @@ export default function setupHighlighter(
   bridge.addListener('shutdown', stopInspectingHost);
   bridge.addListener('startInspectingHost', startInspectingHost);
   bridge.addListener('stopInspectingHost', stopInspectingHost);
-  bridge.addListener('scrollTo', scrollDocumentTo);
-  bridge.addListener('requestScrollPosition', sendScroll);
-
-  let applyingScroll = false;
-
-  function scrollDocumentTo({
-    left,
-    top,
-    right,
-    bottom,
-  }: {
-    left: number,
-    top: number,
-    right: number,
-    bottom: number,
-  }) {
-    if (
-      left === Math.round(window.scrollX) &&
-      top === Math.round(window.scrollY)
-    ) {
-      return;
-    }
-    applyingScroll = true;
-    window.scrollTo({
-      top: top,
-      left: left,
-      behavior: 'smooth',
-    });
-  }
-
-  let scrollTimer = null;
-  function sendScroll() {
-    if (scrollTimer) {
-      clearTimeout(scrollTimer);
-      scrollTimer = null;
-    }
-    if (applyingScroll) {
-      return;
-    }
-    const left = window.scrollX;
-    const top = window.scrollY;
-    const right = left + window.innerWidth;
-    const bottom = top + window.innerHeight;
-    bridge.send('scrollTo', {left, top, right, bottom});
-  }
-
-  function scrollEnd() {
-    // Upon scrollend send it immediately.
-    sendScroll();
-    applyingScroll = false;
-  }
-
-  document.addEventListener('scroll', () => {
-    if (!scrollTimer) {
-      // Periodically synchronize the scroll while scrolling.
-      scrollTimer = setTimeout(sendScroll, 400);
-    }
-  });
-
-  document.addEventListener('scrollend', scrollEnd);
 
   function startInspectingHost(onlySuspenseNodes: boolean) {
     inspectOnlySuspenseNodes = onlySuspenseNodes;

packages/react-devtools-shared/src/bridge.js

@@ -217,7 +217,6 @@ export type BackendEvents = {
   selectElement: [number],
   shutdown: [],
   stopInspectingHost: [boolean],
-  scrollTo: [{left: number, top: number, right: number, bottom: number}],
   syncSelectionToBuiltinElementsPanel: [],
   unsupportedRendererVersion: [],
 
@@ -271,8 +270,6 @@ type FrontendEvents = {
   startProfiling: [StartProfilingParams],
   stopInspectingHost: [],
   scrollToHostInstance: [ScrollToHostInstance],
-  scrollTo: [{left: number, top: number, right: number, bottom: number}],
-  requestScrollPosition: [],
   stopProfiling: [],
   storeAsGlobal: [StoreAsGlobalParams],
   updateComponentFilters: [Array<ComponentFilter>],
@@ -419,8 +416,7 @@ class Bridge<
     try {
       if (this._messageQueue.length) {
         for (let i = 0; i < this._messageQueue.length; i += 2) {
-          // This only supports one argument in practice but the types suggests it should support multiple.
-          this._wall.send(this._messageQueue[i], this._messageQueue[i + 1][0]);
+          this._wall.send(this._messageQueue[i], ...this._messageQueue[i + 1]);
         }
         this._messageQueue.length = 0;
       }

packages/react-devtools-shared/src/constants.js

@@ -29,7 +29,6 @@ export const SUSPENSE_TREE_OPERATION_REMOVE = 9;
 export const SUSPENSE_TREE_OPERATION_REORDER_CHILDREN = 10;
 export const SUSPENSE_TREE_OPERATION_RESIZE = 11;
 export const SUSPENSE_TREE_OPERATION_SUSPENDERS = 12;
-export const TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE = 13;
 
 export const PROFILING_FLAG_BASIC_SUPPORT /*.             */ = 0b001;
 export const PROFILING_FLAG_TIMELINE_SUPPORT /*           */ = 0b010;

packages/react-devtools-shared/src/devtools/store.js

@@ -21,18 +21,13 @@ import {
   TREE_OPERATION_SET_SUBTREE_MODE,
   TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
-  TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE,
   SUSPENSE_TREE_OPERATION_ADD,
   SUSPENSE_TREE_OPERATION_REMOVE,
   SUSPENSE_TREE_OPERATION_REORDER_CHILDREN,
   SUSPENSE_TREE_OPERATION_RESIZE,
   SUSPENSE_TREE_OPERATION_SUSPENDERS,
 } from '../constants';
-import {
-  ElementTypeRoot,
-  ElementTypeActivity,
-  ComponentFilterActivitySlice,
-} from '../frontend/types';
+import {ElementTypeRoot} from '../frontend/types';
 import {
   getSavedComponentFilters,
   setSavedComponentFilters,
@@ -149,13 +144,7 @@ export default class Store extends EventEmitter<{
   hookSettings: [$ReadOnly<DevToolsHookSettings>],
   hostInstanceSelected: [Element['id']],
   settingsUpdated: [$ReadOnly<DevToolsHookSettings>],
-  mutated: [
-    [
-      Array<Element['id']>,
-      Map<Element['id'], Element['id']>,
-      Element['id'] | null,
-    ],
-  ],
+  mutated: [[Array<Element['id']>, Map<Element['id'], Element['id']>]],
   recordChangeDescriptions: [],
   roots: [],
   rootSupportsBasicProfiling: [],
@@ -669,10 +658,6 @@ export default class Store extends EventEmitter<{
     return element;
   }
 
-  containsSuspense(id: SuspenseNode['id']): boolean {
-    return this._idToSuspense.has(id);
-  }
-
   getSuspenseByID(id: SuspenseNode['id']): SuspenseNode | null {
     const suspense = this._idToSuspense.get(id);
     if (suspense === undefined) {
@@ -940,7 +925,7 @@ export default class Store extends EventEmitter<{
    */
   getSuspendableDocumentOrderSuspense(
     uniqueSuspendersOnly: boolean,
-  ): Array<SuspenseTimelineStep> {
+  ): $ReadOnlyArray<SuspenseTimelineStep> {
     const target: Array<SuspenseTimelineStep> = [];
     const roots = this.roots;
     let rootStep: null | SuspenseTimelineStep = null;
@@ -964,25 +949,17 @@ export default class Store extends EventEmitter<{
           rootStep = {
             id: suspense.id,
             environment: environmentName,
-            endTime: suspense.endTime,
           };
           target.push(rootStep);
-        } else {
-          if (rootStep.environment === null) {
-            // If any root has an environment name, then let's use it.
-            rootStep.environment = environmentName;
-          }
-          if (suspense.endTime > rootStep.endTime) {
-            // If any root has a higher end time, let's use that.
-            rootStep.endTime = suspense.endTime;
-          }
+        } else if (rootStep.environment === null) {
+          // If any root has an environment name, then let's use it.
+          rootStep.environment = environmentName;
         }
         this.pushTimelineStepsInDocumentOrder(
           suspense.children,
           target,
           uniqueSuspendersOnly,
           environments,
-          0, // Don't pass a minimum end time at the root. The root is always first so doesn't matter.
         );
       }
     }
@@ -995,7 +972,6 @@ export default class Store extends EventEmitter<{
     target: Array<SuspenseTimelineStep>,
     uniqueSuspendersOnly: boolean,
     parentEnvironments: Array<string>,
-    parentEndTime: number,
   ): void {
     for (let i = 0; i < children.length; i++) {
       const child = this.getSuspenseByID(children[i]);
@@ -1020,15 +996,10 @@ export default class Store extends EventEmitter<{
         unionEnvironments.length > 0
           ? unionEnvironments[unionEnvironments.length - 1]
           : null;
-      // The end time of a child boundary can in effect never be earlier than its parent even if
-      // everything unsuspended before that.
-      const maxEndTime =
-        parentEndTime > child.endTime ? parentEndTime : child.endTime;
       if (hasRects && (!uniqueSuspendersOnly || child.hasUniqueSuspenders)) {
         target.push({
           id: child.id,
           environment: environmentName,
-          endTime: maxEndTime,
         });
       }
       this.pushTimelineStepsInDocumentOrder(
@@ -1036,28 +1007,10 @@ export default class Store extends EventEmitter<{
         target,
         uniqueSuspendersOnly,
         unionEnvironments,
-        maxEndTime,
       );
     }
   }
 
-  getEndTimeOrDocumentOrderSuspense(
-    uniqueSuspendersOnly: boolean,
-  ): $ReadOnlyArray<SuspenseTimelineStep> {
-    const timeline =
-      this.getSuspendableDocumentOrderSuspense(uniqueSuspendersOnly);
-    if (timeline.length === 0) {
-      return timeline;
-    }
-    const root = timeline[0];
-    // We mutate in place since we assume we've got a fresh array.
-    timeline.sort((a, b) => {
-      // Root is always first
-      return a === root ? -1 : b === root ? 1 : a.endTime - b.endTime;
-    });
-    return timeline;
-  }
-
   getRendererIDForElement(id: number): number | null {
     let current = this._idToElement.get(id);
     while (current !== undefined) {
@@ -1171,7 +1124,7 @@ export default class Store extends EventEmitter<{
         // The Tree context's search reducer expects an explicit list of ids for nodes that were added or removed.
         // In this  case, we can pass it empty arrays since nodes in a collapsed tree are still there (just hidden).
         // Updating the selected search index later may require auto-expanding a collapsed subtree though.
-        this.emit('mutated', [[], new Map(), null]);
+        this.emit('mutated', [[], new Map()]);
       }
     }
   }
@@ -1240,11 +1193,10 @@ export default class Store extends EventEmitter<{
 
     const addedElementIDs: Array<number> = [];
     // This is a mapping of removed ID -> parent ID:
-    // We'll use the parent ID to adjust selection if it gets deleted.
     const removedElementIDs: Map<number, number> = new Map();
     const removedSuspenseIDs: Map<SuspenseNode['id'], SuspenseNode['id']> =
       new Map();
-    let nextActivitySliceID = null;
+    // We'll use the parent ID to adjust selection if it gets deleted.
 
     let i = 2;
 
@@ -1736,7 +1688,6 @@ export default class Store extends EventEmitter<{
             hasUniqueSuspenders: false,
             isSuspended: isSuspended,
             environments: [],
-            endTime: 0,
           });
 
           hasSuspenseTreeChanged = true;
@@ -1933,7 +1884,6 @@ export default class Store extends EventEmitter<{
           for (let changeIndex = 0; changeIndex < changeLength; changeIndex++) {
             const id = operations[i++];
             const hasUniqueSuspenders = operations[i++] === 1;
-            const endTime = operations[i++] / 1000;
             const isSuspended = operations[i++] === 1;
             const environmentNamesLength = operations[i++];
             const environmentNames = [];
@@ -1969,7 +1919,6 @@ export default class Store extends EventEmitter<{
             }
 
             suspense.hasUniqueSuspenders = hasUniqueSuspenders;
-            suspense.endTime = endTime;
             suspense.isSuspended = isSuspended;
             suspense.environments = environmentNames;
           }
@@ -1978,11 +1927,6 @@ export default class Store extends EventEmitter<{
 
           break;
         }
-        case TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE: {
-          i++;
-          nextActivitySliceID = operations[i++];
-          break;
-        }
         default:
           this._throwAndEmitError(
             new UnsupportedBridgeOperationError(
@@ -2081,80 +2025,9 @@ export default class Store extends EventEmitter<{
       console.groupEnd();
     }
 
-    if (nextActivitySliceID !== null && nextActivitySliceID !== 0) {
-      let didCollapse = false;
-      // The backend filtered everything above the Activity slice.
-      // We need to hide everything below the Activity slice by collapsing
-      // the Activities that are descendants of the next Activity slice.
-      const nextActivitySlice = this._idToElement.get(nextActivitySliceID);
-      if (nextActivitySlice === undefined) {
-        throw new Error('Next Activity slice not found in Store.');
-      }
-
-      for (let j = 0; j < nextActivitySlice.children.length; j++) {
-        didCollapse ||= this._collapseActivitiesRecursively(
-          nextActivitySlice.children[j],
-        );
-      }
-
-      if (didCollapse) {
-        let weightAcrossRoots = 0;
-        this._roots.forEach(rootID => {
-          const {weight} = ((this.getElementByID(rootID): any): Element);
-          weightAcrossRoots += weight;
-        });
-        this._weightAcrossRoots = weightAcrossRoots;
-      }
-    }
-
-    for (let j = 0; j < this._componentFilters.length; j++) {
-      const filter = this._componentFilters[j];
-      // If we're focusing an Activity, IDs may have changed.
-      if (filter.type === ComponentFilterActivitySlice) {
-        if (nextActivitySliceID === null || nextActivitySliceID === 0) {
-          filter.isValid = false;
-        } else {
-          filter.activityID = nextActivitySliceID;
-        }
-      }
-    }
-
-    this.emit('mutated', [
-      addedElementIDs,
-      removedElementIDs,
-      nextActivitySliceID,
-    ]);
+    this.emit('mutated', [addedElementIDs, removedElementIDs]);
   };
 
-  _collapseActivitiesRecursively(elementID: number): boolean {
-    let didMutate = false;
-    const element = this._idToElement.get(elementID);
-    if (element === undefined) {
-      throw new Error('Element not found in Store.');
-    }
-
-    if (element.type === ElementTypeActivity) {
-      if (!element.isCollapsed) {
-        element.isCollapsed = true;
-
-        const weightDelta = 1 - element.weight;
-
-        let parentElement = this._idToElement.get(element.parentID);
-        while (parentElement !== undefined) {
-          parentElement.weight += weightDelta;
-          parentElement = this._idToElement.get(parentElement.parentID);
-        }
-        return true;
-      }
-      return false;
-    }
-
-    for (let i = 0; i < element.children.length; i++) {
-      didMutate ||= this._collapseActivitiesRecursively(element.children[i]);
-    }
-    return didMutate;
-  }
-
   // Certain backends save filters on a per-domain basis.
   // In order to prevent filter preferences and applied filters from being out of sync,
   // this message enables the backend to override the frontend's current ("saved") filters.
@@ -2320,7 +2193,7 @@ export default class Store extends EventEmitter<{
 
     if (previousStatus !== status) {
       // Propagate to subscribers, although tree state has not changed
-      this.emit('mutated', [[], new Map(), null]);
+      this.emit('mutated', [[], new Map()]);
     }
   }
 

packages/react-devtools-shared/src/devtools/views/Components/ActivitySlice.css

@@ -1,28 +0,0 @@
-.ActivitySlice {
-  max-width: 100%;
-  overflow-x: auto;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  position: relative;
-}
-
-.ActivitySliceButton {
-  color: var(--color-button-active);
-  font-family: var(--font-family-monospace);
-  font-size: var(--font-size-monospace-normal);
-}
-
-.Bar {
-  display: flex;
-  flex: 1 1 auto;
-  overflow-x: auto;
-}
-
-.VRule {
-  flex: 0 0 auto;
-  height: 20px;
-  width: 1px;
-  background-color: var(--color-border);
-  margin: 0 0.5rem;
-}

packages/react-devtools-shared/src/devtools/views/Components/ActivitySlice.js

@@ -1,52 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-import * as React from 'react';
-import {startTransition, useContext} from 'react';
-import Button from '../Button';
-import ButtonIcon from '../ButtonIcon';
-import {StoreContext} from '../context';
-import {useChangeActivitySliceAction} from '../SuspenseTab/ActivityList';
-import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
-import styles from './ActivitySlice.css';
-
-export default function ActivitySlice(): React.Node {
-  const dispatch = useContext(TreeDispatcherContext);
-  const {activityID} = useContext(TreeStateContext);
-  const store = useContext(StoreContext);
-
-  const activity =
-    activityID === null ? null : store.getElementByID(activityID);
-  const name = activity ? activity.nameProp : null;
-
-  const changeActivitySliceAction = useChangeActivitySliceAction();
-
-  return (
-    <div className={styles.ActivitySlice}>
-      <div className={styles.Bar}>
-        <Button
-          className={styles.ActivitySliceButton}
-          onClick={dispatch.bind(null, {
-            type: 'SELECT_ELEMENT_BY_ID',
-            payload: activityID,
-          })}>
-          "{name || 'Unknown'}"
-        </Button>
-      </div>
-      <div className={styles.VRule} />
-      <Button
-        onClick={startTransition.bind(
-          null,
-          changeActivitySliceAction.bind(null, null),
-        )}
-        title="Back to tree view">
-        <ButtonIcon type="close" />
-      </Button>
-    </div>
-  );
-}

packages/react-devtools-shared/src/devtools/views/Components/Element.js

@@ -8,9 +8,8 @@
  */
 
 import * as React from 'react';
-import {Fragment, startTransition, useContext, useMemo, useState} from 'react';
+import {Fragment, useContext, useMemo, useState} from 'react';
 import Store from 'react-devtools-shared/src/devtools/store';
-import {ElementTypeActivity} from 'react-devtools-shared/src/frontend/types';
 import ButtonIcon from '../ButtonIcon';
 import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
 import {StoreContext} from '../context';
@@ -26,7 +25,6 @@ import styles from './Element.css';
 import Icon from '../Icon';
 import {useChangeOwnerAction} from './OwnersListContext';
 import Tooltip from './reach-ui/tooltip';
-import {useChangeActivitySliceAction} from '../SuspenseTab/ActivityList';
 
 type Props = {
   data: ItemData,
@@ -67,7 +65,6 @@ export default function Element({data, index, style}: Props): React.Node {
   }>(errorsAndWarningsSubscription);
 
   const changeOwnerAction = useChangeOwnerAction();
-  const changeActivitySliceAction = useChangeActivitySliceAction();
 
   // Handle elements that are removed from the tree while an async render is in progress.
   if (element == null) {
@@ -78,13 +75,9 @@ export default function Element({data, index, style}: Props): React.Node {
   }
 
   const handleDoubleClick = () => {
-    startTransition(() => {
-      if (element.type === ElementTypeActivity) {
-        changeActivitySliceAction(element.id);
-      } else {
-        changeOwnerAction(element.id);
-      }
-    });
+    if (id !== null) {
+      changeOwnerAction(id);
+    }
   };
 
   // $FlowFixMe[missing-local-annot]

packages/react-devtools-shared/src/devtools/views/Components/Tree.js

@@ -11,7 +11,6 @@ import * as React from 'react';
 import {
   Fragment,
   Suspense,
-  startTransition,
   useCallback,
   useContext,
   useEffect,
@@ -38,10 +37,7 @@ import ButtonIcon from '../ButtonIcon';
 import Button from '../Button';
 import {logEvent} from 'react-devtools-shared/src/Logger';
 import {useExtensionComponentsPanelVisibility} from 'react-devtools-shared/src/frontend/hooks/useExtensionComponentsPanelVisibility';
-import {ElementTypeActivity} from 'react-devtools-shared/src/frontend/types';
 import {useChangeOwnerAction} from './OwnersListContext';
-import {useChangeActivitySliceAction} from '../SuspenseTab/ActivityList';
-import ActivitySlice from './ActivitySlice';
 
 // Indent for each node at level N, compared to node at level N - 1.
 const INDENTATION_SIZE = 10;
@@ -76,7 +72,6 @@ function calculateInitialScrollOffset(
 export default function Tree(): React.Node {
   const dispatch = useContext(TreeDispatcherContext);
   const {
-    activityID,
     numElements,
     ownerID,
     searchIndex,
@@ -307,7 +302,6 @@ export default function Tree(): React.Node {
   const handleBlur = useCallback(() => setTreeFocused(false), []);
   const handleFocus = useCallback(() => setTreeFocused(true), []);
 
-  const changeActivitySliceAction = useChangeActivitySliceAction();
   const changeOwnerAction = useChangeOwnerAction();
   const handleKeyPress = useCallback(
     (event: $FlowFixMe) => {
@@ -315,17 +309,7 @@ export default function Tree(): React.Node {
         case 'Enter':
         case ' ':
           if (inspectedElementID !== null) {
-            const inspectedElement = store.getElementByID(inspectedElementID);
-            startTransition(() => {
-              if (
-                inspectedElement !== null &&
-                inspectedElement.type === ElementTypeActivity
-              ) {
-                changeActivitySliceAction(inspectedElementID);
-              } else {
-                changeOwnerAction(inspectedElementID);
-              }
-            });
+            changeOwnerAction(inspectedElementID);
           }
           break;
         default:
@@ -460,13 +444,7 @@ export default function Tree(): React.Node {
             </Fragment>
           )}
           <Suspense fallback={<Loading />}>
-            {ownerID !== null ? (
-              <OwnersStack />
-            ) : activityID !== null ? (
-              <ActivitySlice />
-            ) : (
-              <ComponentSearchInput />
-            )}
+            {ownerID !== null ? <OwnersStack /> : <ComponentSearchInput />}
           </Suspense>
           {ownerID === null && (errors > 0 || warnings > 0) && (
             <React.Fragment>

packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js

@@ -57,9 +57,6 @@ export type StateContext = {
   ownerID: number | null,
   ownerFlatTree: Array<Element> | null,
 
-  // Activity slice
-  activityID: Element['id'] | null,
-
   // Inspection element panel
   inspectedElementID: number | null,
   inspectedElementIndex: number | null,
@@ -73,7 +70,7 @@ type ACTION_GO_TO_PREVIOUS_SEARCH_RESULT = {
 };
 type ACTION_HANDLE_STORE_MUTATION = {
   type: 'HANDLE_STORE_MUTATION',
-  payload: [Array<number>, Map<number, number>, null | Element['id']],
+  payload: [Array<number>, Map<number, number>],
 };
 type ACTION_RESET_OWNER_STACK = {
   type: 'RESET_OWNER_STACK',
@@ -170,9 +167,6 @@ type State = {
   ownerID: number | null,
   ownerFlatTree: Array<Element> | null,
 
-  // Activity slice
-  activityID: Element['id'] | null,
-
   // Inspection element panel
   inspectedElementID: number | null,
   inspectedElementIndex: number | null,
@@ -800,33 +794,6 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
   };
 }
 
-function reduceActivityState(
-  store: Store,
-  state: State,
-  action: Action,
-): State {
-  switch (action.type) {
-    case 'HANDLE_STORE_MUTATION':
-      let {activityID} = state;
-      const [, , activitySliceIDChange] = action.payload;
-      if (activitySliceIDChange === 0 && activityID !== null) {
-        activityID = null;
-      } else if (
-        activitySliceIDChange !== null &&
-        activitySliceIDChange !== activityID
-      ) {
-        activityID = activitySliceIDChange;
-      }
-      if (activityID !== state.activityID) {
-        return {
-          ...state,
-          activityID,
-        };
-      }
-  }
-  return state;
-}
-
 type Props = {
   children: React$Node,
 
@@ -861,9 +828,6 @@ function getInitialState({
     ownerID: defaultOwnerID == null ? null : defaultOwnerID,
     ownerFlatTree: null,
 
-    // Activity slice
-    activityID: null,
-
     // Inspection element panel
     inspectedElementID:
       defaultInspectedElementID != null
@@ -918,7 +882,6 @@ function TreeContextController({
             state = reduceTreeState(store, state, action);
             state = reduceSearchState(store, state, action);
             state = reduceOwnersState(store, state, action);
-            state = reduceActivityState(store, state, action);
 
             // TODO(hoxyq): review
             // If the selected ID is in a collapsed subtree, reset the selected index to null.
@@ -987,14 +950,13 @@ function TreeContextController({
 
   // Mutations to the underlying tree may impact this context (e.g. search results, selection state).
   useEffect(() => {
-    const handleStoreMutated = ([
-      addedElementIDs,
-      removedElementIDs,
-      activitySliceIDChange,
-    ]: [Array<number>, Map<number, number>, null | Element['id']]) => {
+    const handleStoreMutated = ([addedElementIDs, removedElementIDs]: [
+      Array<number>,
+      Map<number, number>,
+    ]) => {
       dispatch({
         type: 'HANDLE_STORE_MUTATION',
-        payload: [addedElementIDs, removedElementIDs, activitySliceIDChange],
+        payload: [addedElementIDs, removedElementIDs],
       });
     };
 
@@ -1005,7 +967,7 @@ function TreeContextController({
       // It would only impact the search state, which is unlikely to exist yet at this point.
       dispatch({
         type: 'HANDLE_STORE_MUTATION',
-        payload: [[], new Map(), null],
+        payload: [[], new Map()],
       });
     }
 

packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js

@@ -16,7 +16,6 @@ import {
   TREE_OPERATION_SET_SUBTREE_MODE,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
   TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
-  TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE,
   SUSPENSE_TREE_OPERATION_ADD,
   SUSPENSE_TREE_OPERATION_REMOVE,
   SUSPENSE_TREE_OPERATION_REORDER_CHILDREN,
@@ -461,14 +460,13 @@ function updateTree(
         for (let changeIndex = 0; changeIndex < changeLength; changeIndex++) {
           const suspenseNodeId = operations[i++];
           const hasUniqueSuspenders = operations[i++] === 1;
-          const endTime = operations[i++] / 1000;
           const isSuspended = operations[i++] === 1;
           const environmentNamesLength = operations[i++];
           i += environmentNamesLength;
           if (__DEBUG__) {
             debug(
               'Suspender changes',
-              `Suspense node ${suspenseNodeId} unique suspenders set to ${String(hasUniqueSuspenders)} ending at ${String(endTime)} is suspended set to ${String(isSuspended)} with ${String(environmentNamesLength)} environments`,
+              `Suspense node ${suspenseNodeId} unique suspenders set to ${String(hasUniqueSuspenders)} is suspended set to ${String(isSuspended)} with ${String(environmentNamesLength)} environments`,
             );
           }
         }
@@ -476,20 +474,6 @@ function updateTree(
         break;
       }
 
-      case TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE: {
-        i++;
-        const activitySliceIDChange = operations[i++];
-        if (__DEBUG__) {
-          debug(
-            'Applied activity slice change',
-            activitySliceIDChange === 0
-              ? 'Reset applied activity slice'
-              : `Changed to activity slice ID ${activitySliceIDChange}`,
-          );
-        }
-        break;
-      }
-
       default:
         throw Error(`Unsupported Bridge operation "${operation}"`);
     }

packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js

@@ -29,7 +29,6 @@ import {
   ComponentFilterHOC,
   ComponentFilterLocation,
   ComponentFilterEnvironmentName,
-  ComponentFilterActivitySlice,
   ElementTypeClass,
   ElementTypeContext,
   ElementTypeFunction,
@@ -172,8 +171,6 @@ export default function ComponentsSettings({
               isValid: true,
               value: 'Client',
             };
-          } else if (type === ComponentFilterActivitySlice) {
-            // TODO: Allow changing type
           }
         }
         return cloned;
@@ -367,39 +364,34 @@ export default function ComponentsSettings({
           {componentFilters.map((componentFilter, index) => (
             <tr className={styles.TableRow} key={index}>
               <td className={styles.TableCell}>
-                {componentFilter.type !== ComponentFilterActivitySlice && (
-                  <Toggle
-                    className={
-                      componentFilter.isValid !== false
-                        ? ''
-                        : styles.InvalidRegExp
+                <Toggle
+                  className={
+                    componentFilter.isValid !== false
+                      ? ''
+                      : styles.InvalidRegExp
+                  }
+                  isChecked={componentFilter.isEnabled}
+                  onChange={isEnabled =>
+                    toggleFilterIsEnabled(componentFilter, isEnabled)
+                  }
+                  title={
+                    componentFilter.isValid === false
+                      ? 'Filter invalid'
+                      : componentFilter.isEnabled
+                        ? 'Filter enabled'
+                        : 'Filter disabled'
+                  }>
+                  <ToggleIcon
+                    isEnabled={componentFilter.isEnabled}
+                    isValid={
+                      componentFilter.isValid == null ||
+                      componentFilter.isValid === true
                     }
-                    isChecked={componentFilter.isEnabled}
-                    onChange={isEnabled =>
-                      toggleFilterIsEnabled(componentFilter, isEnabled)
-                    }
-                    title={
-                      componentFilter.isValid === false
-                        ? 'Filter invalid'
-                        : componentFilter.isEnabled
-                          ? 'Filter enabled'
-                          : 'Filter disabled'
-                    }>
-                    <ToggleIcon
-                      isEnabled={componentFilter.isEnabled}
-                      isValid={
-                        componentFilter.isValid == null ||
-                        componentFilter.isValid === true
-                      }
-                    />
-                  </Toggle>
-                )}
+                  />
+                </Toggle>
               </td>
               <td className={styles.TableCell}>
                 <select
-                  disabled={
-                    componentFilter.type === ComponentFilterActivitySlice
-                  }
                   value={componentFilter.type}
                   onChange={({currentTarget}) =>
                     changeFilterType(
@@ -421,11 +413,6 @@ export default function ComponentsSettings({
                       environment
                     </option>
                   )}
-                  {componentFilter.type === ComponentFilterActivitySlice && (
-                    <option value={ComponentFilterActivitySlice}>
-                      component
-                    </option>
-                  )}
                 </select>
               </td>
               <td className={styles.TableCell}>
@@ -435,8 +422,6 @@ export default function ComponentsSettings({
                 {(componentFilter.type === ComponentFilterLocation ||
                   componentFilter.type === ComponentFilterDisplayName) &&
                   'matches'}
-                {componentFilter.type === ComponentFilterActivitySlice &&
-                  'within'}
               </td>
               <td className={styles.TableCell}>
                 {componentFilter.type === ComponentFilterElementType && (
@@ -502,9 +487,6 @@ export default function ComponentsSettings({
                     ))}
                   </select>
                 )}
-                {componentFilter.type === ComponentFilterActivitySlice && (
-                  <span>Activity Slice</span>
-                )}
               </td>
               <td className={styles.TableCell}>
                 <Button

packages/react-devtools-shared/src/devtools/views/SuspenseTab/ActivityList.css

@@ -1,45 +0,0 @@
-.ActivityList {
-  cursor: default;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-
-.ActivityList[data-pending-activity-slice-selection="true"] {
-  cursor: wait;
-}
-
-.ActivityList:focus {
-  outline: none;
-}
-
-.ActivityListItem {
-  color: var(--color-component-name);
-  padding: 0 0.25rem;
-  user-select: none;
-}
-
-.ActivityListItem:hover {
-  background-color: var(--color-background-hover);
-}
-
-.ActivityListItem[aria-selected="true"] {
-  background-color: var(--color-background-inactive);
-}
-
-.ActivityList:focus .ActivityListItem[aria-selected="true"] {
-  background-color: var(--color-background-selected);
-  color: var(--color-text-selected);
-
-  /* Invert colors */
-  --color-component-name: var(--color-component-name-inverted);
-  --color-text: var(--color-text-selected);
-  --color-component-badge-background: var(
-    --color-component-badge-background-inverted
-  );
-  --color-forget-badge-background: var(--color-forget-badge-background-inverted);
-  --color-component-badge-count: var(--color-component-badge-count-inverted);
-  --color-attribute-name: var(--color-attribute-name-inverted);
-  --color-attribute-value: var(--color-attribute-value-inverted);
-  --color-expand-collapse-toggle: var(--color-component-name-inverted);
-}

packages/react-devtools-shared/src/devtools/views/SuspenseTab/ActivityList.js

@@ -1,173 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-import type {
-  Element,
-  ActivitySliceFilter,
-  ComponentFilter,
-} from 'react-devtools-shared/src/frontend/types';
-import typeof {
-  SyntheticMouseEvent,
-  SyntheticKeyboardEvent,
-} from 'react-dom-bindings/src/events/SyntheticEvent';
-
-import * as React from 'react';
-import {useContext, useTransition} from 'react';
-import {ComponentFilterActivitySlice} from 'react-devtools-shared/src/frontend/types';
-import styles from './ActivityList.css';
-import {
-  TreeStateContext,
-  TreeDispatcherContext,
-} from '../Components/TreeContext';
-import {useHighlightHostInstance} from '../hooks';
-import {StoreContext} from '../context';
-
-export function useChangeActivitySliceAction(): (
-  id: Element['id'] | null,
-) => void {
-  const store = useContext(StoreContext);
-
-  function changeActivitySliceAction(activityID: Element['id'] | null) {
-    const nextFilters: ComponentFilter[] = [];
-    // Remove any existing activity slice filter
-    for (let i = 0; i < store.componentFilters.length; i++) {
-      const filter = store.componentFilters[i];
-      if (filter.type !== ComponentFilterActivitySlice) {
-        nextFilters.push(filter);
-      }
-    }
-
-    if (activityID !== null) {
-      const rendererID = store.getRendererIDForElement(activityID);
-      if (rendererID === null) {
-        throw new Error('Expected to find renderer.');
-      }
-      const activityFilter: ActivitySliceFilter = {
-        type: ComponentFilterActivitySlice,
-        activityID,
-        rendererID,
-        isValid: true,
-        isEnabled: true,
-      };
-      nextFilters.push(activityFilter);
-    }
-    store.componentFilters = nextFilters;
-  }
-
-  return changeActivitySliceAction;
-}
-
-export default function ActivityList({
-  activities,
-}: {
-  activities: $ReadOnlyArray<Element>,
-}): React$Node {
-  const {inspectedElementID} = useContext(TreeStateContext);
-  const treeDispatch = useContext(TreeDispatcherContext);
-  // TODO: Derive from inspected element
-  const selectedActivityID = inspectedElementID;
-  const {highlightHostInstance, clearHighlightHostInstance} =
-    useHighlightHostInstance();
-
-  const [isPendingActivitySliceSelection, startActivitySliceSelection] =
-    useTransition();
-  const changeActivitySliceAction = useChangeActivitySliceAction();
-
-  function handleKeyDown(event: SyntheticKeyboardEvent) {
-    // TODO: Implement keyboard navigation
-    switch (event.key) {
-      case 'Enter':
-      case ' ':
-        if (inspectedElementID !== null) {
-          startActivitySliceSelection(() => {
-            changeActivitySliceAction(inspectedElementID);
-          });
-        }
-        event.preventDefault();
-        break;
-      case 'Home':
-        treeDispatch({type: 'SELECT_ELEMENT_BY_ID', payload: activities[0].id});
-        event.preventDefault();
-        break;
-      case 'End':
-        treeDispatch({
-          type: 'SELECT_ELEMENT_BY_ID',
-          payload: activities[activities.length - 1].id,
-        });
-        event.preventDefault();
-        break;
-      case 'ArrowUp': {
-        const currentIndex = activities.findIndex(
-          activity => activity.id === selectedActivityID,
-        );
-        if (currentIndex !== undefined) {
-          const nextIndex =
-            (currentIndex + activities.length - 1) % activities.length;
-
-          treeDispatch({
-            type: 'SELECT_ELEMENT_BY_ID',
-            payload: activities[nextIndex].id,
-          });
-        }
-        event.preventDefault();
-        break;
-      }
-      case 'ArrowDown': {
-        const currentIndex = activities.findIndex(
-          activity => activity.id === selectedActivityID,
-        );
-        if (currentIndex !== undefined) {
-          const nextIndex = (currentIndex + 1) % activities.length;
-
-          treeDispatch({
-            type: 'SELECT_ELEMENT_BY_ID',
-            payload: activities[nextIndex].id,
-          });
-        }
-        event.preventDefault();
-        break;
-      }
-      default:
-        break;
-    }
-  }
-
-  function handleClick(id: Element['id'], event: SyntheticMouseEvent) {
-    event.preventDefault();
-    treeDispatch({type: 'SELECT_ELEMENT_BY_ID', payload: id});
-  }
-
-  function handleDoubleClick() {
-    if (inspectedElementID !== null) {
-      changeActivitySliceAction(inspectedElementID);
-    }
-  }
-
-  return (
-    <ol
-      role="listbox"
-      className={styles.ActivityList}
-      data-pending-activity-slice-selection={isPendingActivitySliceSelection}
-      tabIndex={0}
-      onKeyDown={handleKeyDown}>
-      {activities.map(activity => (
-        <li
-          key={activity.id}
-          role="option"
-          aria-selected={activity.id === selectedActivityID ? 'true' : 'false'}
-          className={styles.ActivityListItem}
-          onClick={handleClick.bind(null, activity.id)}
-          onDoubleClick={handleDoubleClick}
-          onPointerOver={highlightHostInstance.bind(null, activity.id, false)}
-          onPointerLeave={clearHighlightHostInstance}>
-          {activity.nameProp}
-        </li>
-      ))}
-    </ol>
-  );
-}

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css

@@ -6,17 +6,18 @@
   border-radius: 0.25rem;
 }
 
+.SuspenseRectsContainer[data-highlighted='true'] {
+  outline-color: var(--color-transition);
+  outline-style: solid;
+  outline-width: 4px;
+}
+
 .SuspenseRectsRoot {
   cursor: pointer;
   outline-color: var(--color-transition);
   background-color: color-mix(in srgb, var(--color-transition) 5%, transparent);
 }
 
-.SuspenseRectsRootOutline {
-  outline-width: 4px;
-  border-radius: 0.125rem;
-}
-
 .SuspenseRectsRoot[data-hovered='true'] {
   background-color: color-mix(in srgb, var(--color-transition) 15%, transparent);
 }

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js

@@ -18,7 +18,7 @@ import typeof {
 } from 'react-dom-bindings/src/events/SyntheticEvent';
 
 import * as React from 'react';
-import {createContext, useContext, useLayoutEffect} from 'react';
+import {createContext, useContext} from 'react';
 import {
   TreeDispatcherContext,
   TreeStateContext,
@@ -236,6 +236,13 @@ function SuspenseRects({
             <span>{suspense.name}</span>
           </ScaledRect>
         ) : null}
+        {selected && visible ? (
+          <ScaledRect
+            className={styles.SuspenseRectOutline}
+            rect={boundingBox}
+            adjust={true}
+          />
+        ) : null}
       </ViewBox.Provider>
     </ScaledRect>
   );
@@ -428,11 +435,7 @@ function SuspenseRectsRoot({rootID}: {rootID: SuspenseNode['id']}): React$Node {
 
 const ViewBox = createContext<Rect>((null: any));
 
-function SuspenseRectsContainer({
-  scaleRef,
-}: {
-  scaleRef: {current: number},
-}): React$Node {
+function SuspenseRectsContainer(): React$Node {
   const store = useContext(StoreContext);
   const {inspectedElementID} = useContext(TreeStateContext);
   const treeDispatch = useContext(TreeDispatcherContext);
@@ -502,47 +505,17 @@ function SuspenseRectsContainer({
   const rootEnvironment =
     timeline.length === 0 ? null : timeline[0].environment;
 
-  useLayoutEffect(() => {
-    // 100% of the width represents this many pixels in the real document.
-    scaleRef.current = boundingBoxWidth;
-  }, [boundingBoxWidth]);
-
-  let selectedBoundingBox = null;
-  let selectedEnvironment = null;
-  if (isRootSelected) {
-    selectedEnvironment = rootEnvironment;
-  } else if (
-    inspectedElementID !== null &&
-    // TODO: Separate inspected element and inspected Suspense and use the inspected Suspense ID here.
-    store.containsSuspense(inspectedElementID)
-  ) {
-    const selectedSuspenseNode = store.getSuspenseByID(inspectedElementID);
-    if (
-      selectedSuspenseNode !== null &&
-      (selectedSuspenseNode.hasUniqueSuspenders || !uniqueSuspendersOnly)
-    ) {
-      selectedBoundingBox = getBoundingBox(selectedSuspenseNode.rects);
-      for (let i = 0; i < timeline.length; i++) {
-        const timelineStep = timeline[i];
-        if (timelineStep.id === inspectedElementID) {
-          selectedEnvironment = timelineStep.environment;
-          break;
-        }
-      }
-    }
-  }
-
   return (
     <div
       className={
         styles.SuspenseRectsContainer +
         (hasRootSuspenders ? ' ' + styles.SuspenseRectsRoot : '') +
-        (isRootSelected ? ' ' + styles.SuspenseRectsRootOutline : '') +
         ' ' +
         getClassNameForEnvironment(rootEnvironment)
       }
       onClick={handleClick}
       onDoubleClick={handleDoubleClick}
+      data-highlighted={isRootSelected}
       data-hovered={isRootHovered}>
       <ViewBox.Provider value={boundingBox}>
         <div
@@ -551,17 +524,6 @@ function SuspenseRectsContainer({
           {roots.map(rootID => {
             return <SuspenseRectsRoot key={rootID} rootID={rootID} />;
           })}
-          {selectedBoundingBox !== null ? (
-            <ScaledRect
-              className={
-                styles.SuspenseRectOutline +
-                ' ' +
-                getClassNameForEnvironment(selectedEnvironment)
-              }
-              rect={selectedBoundingBox}
-              adjust={true}
-            />
-          ) : null}
         </div>
       </ViewBox.Provider>
     </div>

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css

@@ -91,9 +91,10 @@
   }
 }
 
-.ActivityList {
+.TreeList {
   flex: 0 0 var(--horizontal-resize-tree-list-percentage);
   border-right: 1px solid var(--color-border);
+  padding: 0.25rem;
   overflow: auto;
 }
 
@@ -141,4 +142,4 @@
 
 .SuspenseTreeViewFooterButtons {
   padding: 0.25rem;
-}
+}

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js

@@ -6,14 +6,12 @@
  *
  * @flow
  */
-import type {Element} from 'react-devtools-shared/src/frontend/types';
 
 import * as React from 'react';
 import {
   useContext,
   useEffect,
   useLayoutEffect,
-  useMemo,
   useReducer,
   useRef,
   Fragment,
@@ -32,12 +30,12 @@ import styles from './SuspenseTab.css';
 import SuspenseBreadcrumbs from './SuspenseBreadcrumbs';
 import SuspenseRects from './SuspenseRects';
 import SuspenseTimeline from './SuspenseTimeline';
-import ActivityList from './ActivityList';
+import SuspenseTreeList from './SuspenseTreeList';
 import {
   SuspenseTreeDispatcherContext,
   SuspenseTreeStateContext,
 } from './SuspenseTreeContext';
-import {BridgeContext, StoreContext, OptionsContext} from '../context';
+import {StoreContext, OptionsContext} from '../context';
 import Button from '../Button';
 import Toggle from '../Toggle';
 import typeof {SyntheticPointerEvent} from 'react-dom-bindings/src/events/SyntheticEvent';
@@ -76,7 +74,7 @@ function ToggleUniqueSuspenders() {
   function handleToggleUniqueSuspenders() {
     const nextUniqueSuspendersOnly = !uniqueSuspendersOnly;
     // TODO: Handle different timeline modes (e.g. random order)
-    const nextTimeline = store.getEndTimeOrDocumentOrderSuspense(
+    const nextTimeline = store.getSuspendableDocumentOrderSuspense(
       nextUniqueSuspendersOnly,
     );
     suspenseTreeDispatch({
@@ -159,130 +157,6 @@ function ToggleInspectedElement({
   );
 }
 
-function SynchronizedScrollContainer({
-  className,
-  children,
-  scaleRef,
-}: {
-  className?: string,
-  children?: React.Node,
-  scaleRef: {current: number},
-}) {
-  const bridge = useContext(BridgeContext);
-  const ref = useRef(null);
-  const applyingScrollRef = useRef(false);
-
-  // TODO: useEffectEvent
-  function scrollContainerTo({
-    left,
-    top,
-    right,
-    bottom,
-  }: {
-    left: number,
-    top: number,
-    right: number,
-    bottom: number,
-  }): void {
-    const element = ref.current;
-    if (element === null) {
-      return;
-    }
-    const scale = scaleRef.current / element.clientWidth;
-    const targetLeft = Math.round(left / scale);
-    const targetTop = Math.round(top / scale);
-    if (
-      targetLeft !== Math.round(element.scrollLeft) ||
-      targetTop !== Math.round(element.scrollTop)
-    ) {
-      // Disable scroll events until we've applied the new scroll position.
-      applyingScrollRef.current = true;
-      element.scrollTo({
-        left: targetLeft,
-        top: targetTop,
-        behavior: 'smooth',
-      });
-    }
-  }
-
-  useEffect(() => {
-    const callback = scrollContainerTo;
-    bridge.addListener('scrollTo', callback);
-    // Ask for the current scroll position when we mount so we can attach ourselves to it.
-    bridge.send('requestScrollPosition');
-    return () => bridge.removeListener('scrollTo', callback);
-  }, [bridge]);
-
-  const scrollTimer = useRef<null | TimeoutID>(null);
-
-  // TODO: useEffectEvent
-  function sendScroll() {
-    if (scrollTimer.current) {
-      clearTimeout(scrollTimer.current);
-      scrollTimer.current = null;
-    }
-    if (applyingScrollRef.current) {
-      return;
-    }
-    const element = ref.current;
-    if (element === null) {
-      return;
-    }
-    const scale = scaleRef.current / element.clientWidth;
-    const left = element.scrollLeft * scale;
-    const top = element.scrollTop * scale;
-    const right = left + element.clientWidth * scale;
-    const bottom = top + element.clientHeight * scale;
-    bridge.send('scrollTo', {left, top, right, bottom});
-  }
-
-  // TODO: useEffectEvent
-  function throttleScroll() {
-    if (!scrollTimer.current) {
-      // Periodically synchronize the scroll while scrolling.
-      scrollTimer.current = setTimeout(sendScroll, 400);
-    }
-  }
-
-  function scrollEnd() {
-    // Upon scrollend send it immediately.
-    sendScroll();
-    applyingScrollRef.current = false;
-  }
-
-  useEffect(() => {
-    const element = ref.current;
-    if (element === null) {
-      return;
-    }
-    const scrollCallback = throttleScroll;
-    const scrollEndCallback = scrollEnd;
-    element.addEventListener('scroll', scrollCallback);
-    element.addEventListener('scrollend', scrollEndCallback);
-    return () => {
-      element.removeEventListener('scroll', scrollCallback);
-      element.removeEventListener('scrollend', scrollEndCallback);
-    };
-  }, [ref]);
-
-  return (
-    <div className={className} ref={ref}>
-      {children}
-    </div>
-  );
-}
-
-// TODO: Get this from the store directly.
-// The backend needs to keep a separate tree so that resuspending keeps Activity around.
-function useActivities(): $ReadOnlyArray<Element> {
-  const activities = useMemo(() => {
-    const items: Array<Element> = [];
-    return items;
-  }, []);
-
-  return activities;
-}
-
 function SuspenseTab(_: {}) {
   const store = useContext(StoreContext);
   const {hideSettings} = useContext(OptionsContext);
@@ -292,10 +166,10 @@ function SuspenseTab(_: {}) {
     initLayoutState,
   );
 
-  const activities = useActivities();
   // If there are no named Activity boundaries, we don't have any tree list and we should hide
-  // both the panel and the button to toggle it.
-  const treeListDisabled = activities.length === 0;
+  // both the panel and the button to toggle it. Since we currently don't support it yet, it's
+  // always disabled.
+  const treeListDisabled = true;
 
   const wrapperTreeRef = useRef<null | HTMLElement>(null);
   const resizeTreeRef = useRef<null | HTMLElement>(null);
@@ -467,18 +341,16 @@ function SuspenseTab(_: {}) {
     }
   };
 
-  const scaleRef = useRef(0);
-
   return (
     <SettingsModalContextController>
       <div className={styles.SuspenseTab} ref={wrapperTreeRef}>
         <div className={styles.TreeWrapper} ref={resizeTreeRef}>
           {treeListDisabled ? null : (
             <div
-              className={styles.ActivityList}
+              className={styles.TreeList}
               hidden={treeListHidden}
               ref={resizeTreeListRef}>
-              <ActivityList activities={activities} />
+              <SuspenseTreeList />
             </div>
           )}
           {treeListDisabled ? null : (
@@ -516,11 +388,9 @@ function SuspenseTab(_: {}) {
                 orientation="horizontal"
               />
             </header>
-            <SynchronizedScrollContainer
-              className={styles.Rects}
-              scaleRef={scaleRef}>
-              <SuspenseRects scaleRef={scaleRef} />
-            </SynchronizedScrollContainer>
+            <div className={styles.Rects}>
+              <SuspenseRects />
+            </div>
             <footer className={styles.SuspenseTreeViewFooter}>
               <SuspenseTimeline />
               <div className={styles.SuspenseTreeViewFooterButtons}>

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js

@@ -111,7 +111,7 @@ type Props = {
 function getInitialState(store: Store): SuspenseTreeState {
   const uniqueSuspendersOnly = true;
   const timeline =
-    store.getEndTimeOrDocumentOrderSuspense(uniqueSuspendersOnly);
+    store.getSuspendableDocumentOrderSuspense(uniqueSuspendersOnly);
   const timelineIndex = timeline.length - 1;
   const selectedSuspenseID =
     timelineIndex === -1 ? null : timeline[timelineIndex].id;
@@ -182,7 +182,7 @@ function SuspenseTreeContextController({children}: Props): React.Node {
             }
 
             // TODO: Handle different timeline modes (e.g. random order)
-            const nextTimeline = store.getEndTimeOrDocumentOrderSuspense(
+            const nextTimeline = store.getSuspendableDocumentOrderSuspense(
               state.uniqueSuspendersOnly,
             );
 

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeList.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+
+export default function SuspenseTreeList(_: {}): React$Node {
+  return <div>Activity slices not implemented yet</div>;
+}

packages/react-devtools-shared/src/frontend/types.js

@@ -82,9 +82,8 @@ export const ComponentFilterDisplayName = 2;
 export const ComponentFilterLocation = 3;
 export const ComponentFilterHOC = 4;
 export const ComponentFilterEnvironmentName = 5;
-export const ComponentFilterActivitySlice = 6;
 
-export type ComponentFilterType = 1 | 2 | 3 | 4 | 5 | 6;
+export type ComponentFilterType = 1 | 2 | 3 | 4 | 5;
 
 // Hide all elements of types in this Set.
 // We hide host components only by default.
@@ -116,20 +115,11 @@ export type EnvironmentNameComponentFilter = {
   value: string,
 };
 
-export type ActivitySliceFilter = {
-  type: 6,
-  activityID: Element['id'],
-  rendererID: number,
-  isValid: boolean,
-  isEnabled: boolean,
-};
-
 export type ComponentFilter =
   | BooleanComponentFilter
   | ElementTypeComponentFilter
   | RegExpComponentFilter
-  | EnvironmentNameComponentFilter
-  | ActivitySliceFilter;
+  | EnvironmentNameComponentFilter;
 
 export type HookName = string | null;
 // Map of hook source ("<filename>:<line-number>:<column-number>") to name.
@@ -206,7 +196,6 @@ export type Rect = {
 export type SuspenseTimelineStep = {
   id: SuspenseNode['id'], // TODO: Will become a group.
   environment: null | string,
-  endTime: number,
 };
 
 export type SuspenseNode = {
@@ -218,7 +207,6 @@ export type SuspenseNode = {
   hasUniqueSuspenders: boolean,
   isSuspended: boolean,
   environments: Array<string>,
-  endTime: number,
 };
 
 // Serialized version of ReactIOInfo

packages/react-devtools-shared/src/utils.js

@@ -33,7 +33,6 @@ import {
   TREE_OPERATION_SET_SUBTREE_MODE,
   TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
-  TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE,
   LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY,
   LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
   LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET,
@@ -48,7 +47,6 @@ import {
   SUSPENSE_TREE_OPERATION_SUSPENDERS,
 } from './constants';
 import {
-  ComponentFilterActivitySlice,
   ComponentFilterElementType,
   ComponentFilterLocation,
   ElementTypeHostComponent,
@@ -434,27 +432,16 @@ export function printOperationsArray(operations: Array<number>) {
         for (let changeIndex = 0; changeIndex < changeLength; changeIndex++) {
           const id = operations[i++];
           const hasUniqueSuspenders = operations[i++] === 1;
-          const endTime = operations[i++] / 1000;
           const isSuspended = operations[i++] === 1;
           const environmentNamesLength = operations[i++];
           i += environmentNamesLength;
           logs.push(
-            `Suspense node ${id} unique suspenders set to ${String(hasUniqueSuspenders)} ending at ${String(endTime)} is suspended set to ${String(isSuspended)} with ${String(environmentNamesLength)} environments`,
+            `Suspense node ${id} unique suspenders set to ${String(hasUniqueSuspenders)} is suspended set to ${String(isSuspended)} with ${String(environmentNamesLength)} environments`,
           );
         }
 
         break;
       }
-      case TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE: {
-        i++;
-        const activitySliceIDChange = operations[i + 1];
-        logs.push(
-          activitySliceIDChange === 0
-            ? 'Reset applied activity slice'
-            : 'Applied activity slice change to ' + activitySliceIDChange,
-        );
-        break;
-      }
       default:
         throw Error(`Unsupported Bridge operation "${operation}"`);
     }
@@ -480,7 +467,7 @@ export function getSavedComponentFilters(): Array<ComponentFilter> {
     );
     if (raw != null) {
       const parsedFilters: Array<ComponentFilter> = JSON.parse(raw);
-      return persistableComponentFilters(parsedFilters);
+      return filterOutLocationComponentFilters(parsedFilters);
     }
   } catch (error) {}
   return getDefaultComponentFilters();
@@ -491,11 +478,16 @@ export function setSavedComponentFilters(
 ): void {
   localStorageSetItem(
     LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY,
-    JSON.stringify(persistableComponentFilters(componentFilters)),
+    JSON.stringify(filterOutLocationComponentFilters(componentFilters)),
   );
 }
 
-export function persistableComponentFilters(
+// Following __debugSource removal from Fiber, the new approach for finding the source location
+// of a component, represented by the Fiber, is based on lazily generating and parsing component stack frames
+// To find the original location, React DevTools will perform symbolication, source maps are required for that.
+// In order to start filtering Fibers, we need to find location for all of them, which can't be done lazily.
+// Eager symbolication can become quite expensive for large applications.
+export function filterOutLocationComponentFilters(
   componentFilters: Array<ComponentFilter>,
 ): Array<ComponentFilter> {
   // This is just an additional check to preserve the previous state
@@ -504,18 +496,7 @@ export function persistableComponentFilters(
     return componentFilters;
   }
 
-  return componentFilters.filter(f => {
-    return (
-      // Following __debugSource removal from Fiber, the new approach for finding the source location
-      // of a component, represented by the Fiber, is based on lazily generating and parsing component stack frames
-      // To find the original location, React DevTools will perform symbolication, source maps are required for that.
-      // In order to start filtering Fibers, we need to find location for all of them, which can't be done lazily.
-      // Eager symbolication can become quite expensive for large applications.
-      f.type !== ComponentFilterLocation &&
-      // Activity slice filters are based on DevTools instance IDs which do not persist across sessions.
-      f.type !== ComponentFilterActivitySlice
-    );
-  });
+  return componentFilters.filter(f => f.type !== ComponentFilterLocation);
 }
 
 const vscodeFilepath = 'vscode://file/{path}:{line}:{column}';

packages/react-devtools-shell/src/app/Segments/index.js

@@ -1,96 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import * as React from 'react';
-
-function deferred<T>(
-  timeoutMS: number,
-  resolvedValue: T,
-  displayName: string,
-): Promise<T> {
-  const promise = new Promise<T>(resolve => {
-    setTimeout(() => resolve(resolvedValue), timeoutMS);
-  });
-  (promise as any).displayName = displayName;
-
-  return promise;
-}
-
-const title = deferred(100, 'Segmented Page Title', 'title');
-const content = deferred(
-  400,
-  'This is the content of a segmented page. It loads in multiple parts.',
-  'content',
-);
-function Page(): React.Node {
-  return (
-    <article>
-      <h1>{title}</h1>
-      <p>{content}</p>
-    </article>
-  );
-}
-
-function InnerSegment({children}: {children: React.Node}): React.Node {
-  return (
-    <>
-      <h3>Inner Segment</h3>
-      <React.Suspense name="InnerSegment" fallback={<p>Loading...</p>}>
-        <section>{children}</section>
-        <p>After inner</p>
-      </React.Suspense>
-    </>
-  );
-}
-
-const cookies = deferred(200, 'Cookies: 🍪🍪🍪', 'cookies');
-function OuterSegment({children}: {children: React.Node}): React.Node {
-  return (
-    <>
-      <h2>Outer Segment</h2>
-      <React.Suspense name="OuterSegment" fallback={<p>Loading outer</p>}>
-        <p>{cookies}</p>
-        <div>{children}</div>
-        <p>After outer</p>
-      </React.Suspense>
-    </>
-  );
-}
-
-function Root({children}: {children: React.Node}): React.Node {
-  return (
-    <>
-      <h1>Root Segment</h1>
-      <React.Suspense name="Root" fallback={<p>Loading root</p>}>
-        <main>{children}</main>
-        <footer>After root</footer>
-      </React.Suspense>
-    </>
-  );
-}
-
-export default function Segments(): React.Node {
-  return (
-    <React.Activity name="/" mode="visible">
-      <Root>
-        <React.Activity name="/outer/" mode="visible">
-          <OuterSegment>
-            <React.Activity name="/outer/inner" mode="visible">
-              <InnerSegment>
-                <React.Activity name="/outer/inner/page" mode="visible">
-                  <Page />
-                </React.Activity>
-              </InnerSegment>
-            </React.Activity>
-          </OuterSegment>
-        </React.Activity>
-      </Root>
-    </React.Activity>
-  );
-}

packages/react-devtools-shell/src/app/index.js

@@ -18,7 +18,6 @@ import ToDoList from './ToDoList';
 import Toggle from './Toggle';
 import ErrorBoundaries from './ErrorBoundaries';
 import PartiallyStrictApp from './PartiallyStrictApp';
-import Segments from './Segments';
 import SuspenseTree from './SuspenseTree';
 import TraceUpdatesTest from './TraceUpdatesTest';
 import {ignoreErrors, ignoreLogs, ignoreWarnings} from './console';
@@ -115,7 +114,6 @@ function mountTestApp() {
   mountApp(DeeplyNestedComponents);
   mountApp(Iframe);
   mountApp(TraceUpdatesTest);
-  mountApp(Segments);
 
   if (shouldRenderLegacy) {
     mountLegacyApp(PartiallyStrictApp);

packages/react-devtools/package.json

@@ -27,6 +27,6 @@
     "internal-ip": "^6.2.0",
     "minimist": "^1.2.3",
     "react-devtools-core": "7.0.1",
-    "update-notifier": "^5.0.0"
+    "update-notifier": "^2.1.0"
   }
 }

packages/react-dom-bindings/src/client/ReactDOMComponentTree.js

@@ -38,8 +38,6 @@ import {getParentHydrationBoundary} from './ReactFiberConfigDOM';
 
 import {enableScopeAPI} from 'shared/ReactFeatureFlags';
 
-import {enableInternalInstanceMap} from 'shared/ReactFeatureFlags';
-
 const randomKey = Math.random().toString(36).slice(2);
 const internalInstanceKey = '__reactFiber$' + randomKey;
 const internalPropsKey = '__reactProps$' + randomKey;
@@ -51,32 +49,7 @@ const internalRootNodeResourcesKey = '__reactResources$' + randomKey;
 const internalHoistableMarker = '__reactMarker$' + randomKey;
 const internalScrollTimer = '__reactScroll$' + randomKey;
 
-type InstanceUnion =
-  | Instance
-  | TextInstance
-  | SuspenseInstance
-  | ActivityInstance
-  | ReactScopeInstance
-  | Container;
-
-const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
-const internalInstanceMap:
-  | WeakMap<InstanceUnion, Fiber>
-  | Map<InstanceUnion, Fiber> = new PossiblyWeakMap();
-const internalPropsMap:
-  | WeakMap<InstanceUnion, Props>
-  | Map<InstanceUnion, Props> = new PossiblyWeakMap();
-
 export function detachDeletedInstance(node: Instance): void {
-  if (enableInternalInstanceMap) {
-    internalInstanceMap.delete(node);
-    internalPropsMap.delete(node);
-    delete (node: any)[internalEventHandlersKey];
-    delete (node: any)[internalEventHandlerListenersKey];
-    delete (node: any)[internalEventHandlesSetKey];
-    delete (node: any)[internalRootNodeResourcesKey];
-    return;
-  }
   // TODO: This function is only called on host components. I don't think all of
   // these fields are relevant.
   delete (node: any)[internalInstanceKey];
@@ -95,10 +68,6 @@ export function precacheFiberNode(
     | ActivityInstance
     | ReactScopeInstance,
 ): void {
-  if (enableInternalInstanceMap) {
-    internalInstanceMap.set(node, hostInst);
-    return;
-  }
   (node: any)[internalInstanceKey] = hostInst;
 }
 
@@ -126,12 +95,7 @@ export function isContainerMarkedAsRoot(node: Container): boolean {
 // HostRoot back. To get to the HostRoot, you need to pass a child of it.
 // The same thing applies to Suspense and Activity boundaries.
 export function getClosestInstanceFromNode(targetNode: Node): null | Fiber {
-  let targetInst: void | Fiber;
-  if (enableInternalInstanceMap) {
-    targetInst = internalInstanceMap.get(((targetNode: any): InstanceUnion));
-  } else {
-    targetInst = (targetNode: any)[internalInstanceKey];
-  }
+  let targetInst = (targetNode: any)[internalInstanceKey];
   if (targetInst) {
     // Don't return HostRoot, SuspenseComponent or ActivityComponent here.
     return targetInst;
@@ -148,15 +112,9 @@ export function getClosestInstanceFromNode(targetNode: Node): null | Fiber {
     // itself because the fibers are conceptually between the container
     // node and the first child. It isn't surrounding the container node.
     // If it's not a container, we check if it's an instance.
-    if (enableInternalInstanceMap) {
-      targetInst =
-        (parentNode: any)[internalContainerInstanceKey] ||
-        internalInstanceMap.get(((parentNode: any): InstanceUnion));
-    } else {
-      targetInst =
-        (parentNode: any)[internalContainerInstanceKey] ||
-        (parentNode: any)[internalInstanceKey];
-    }
+    targetInst =
+      (parentNode: any)[internalContainerInstanceKey] ||
+      (parentNode: any)[internalInstanceKey];
     if (targetInst) {
       // Since this wasn't the direct target of the event, we might have
       // stepped past dehydrated DOM nodes to get here. However they could
@@ -189,10 +147,8 @@ export function getClosestInstanceFromNode(targetNode: Node): null | Fiber {
           // have had an internalInstanceKey on it.
           // Let's get the fiber associated with the SuspenseComponent
           // as the deepest instance.
-          const targetFiber = enableInternalInstanceMap
-            ? internalInstanceMap.get(hydrationInstance)
-            : // $FlowFixMe[prop-missing]
-              hydrationInstance[internalInstanceKey];
+          // $FlowFixMe[prop-missing]
+          const targetFiber = hydrationInstance[internalInstanceKey];
           if (targetFiber) {
             return targetFiber;
           }
@@ -219,16 +175,9 @@ export function getClosestInstanceFromNode(targetNode: Node): null | Fiber {
  * instance, or null if the node was not rendered by this React.
  */
 export function getInstanceFromNode(node: Node): Fiber | null {
-  let inst: void | null | Fiber;
-  if (enableInternalInstanceMap) {
-    inst =
-      internalInstanceMap.get(((node: any): InstanceUnion)) ||
-      (node: any)[internalContainerInstanceKey];
-  } else {
-    inst =
-      (node: any)[internalInstanceKey] ||
-      (node: any)[internalContainerInstanceKey];
-  }
+  const inst =
+    (node: any)[internalInstanceKey] ||
+    (node: any)[internalContainerInstanceKey];
   if (inst) {
     const tag = inst.tag;
     if (
@@ -277,25 +226,16 @@ export function getFiberCurrentPropsFromNode(
     | TextInstance
     | SuspenseInstance
     | ActivityInstance,
-): Props | null {
-  if (enableInternalInstanceMap) {
-    return internalPropsMap.get(node) || null;
-  }
+): Props {
   return (node: any)[internalPropsKey] || null;
 }
 
 export function updateFiberProps(node: Instance, props: Props): void {
-  if (enableInternalInstanceMap) {
-    internalPropsMap.set(node, props);
-    return;
-  }
   (node: any)[internalPropsKey] = props;
 }
 
 export function getEventListenerSet(node: EventTarget): Set<string> {
-  let elementListenerSet: Set<string> | void = (node: any)[
-    internalEventHandlersKey
-  ];
+  let elementListenerSet = (node: any)[internalEventHandlersKey];
   if (elementListenerSet === undefined) {
     elementListenerSet = (node: any)[internalEventHandlersKey] = new Set();
   }
@@ -306,9 +246,6 @@ export function getFiberFromScopeInstance(
   scope: ReactScopeInstance,
 ): null | Fiber {
   if (enableScopeAPI) {
-    if (enableInternalInstanceMap) {
-      return internalInstanceMap.get(((scope: any): InstanceUnion)) || null;
-    }
     return (scope: any)[internalInstanceKey] || null;
   }
   return null;
@@ -381,12 +318,6 @@ export function clearScrollEndTimer(node: EventTarget): void {
 }
 
 export function isOwnedInstance(node: Node): boolean {
-  if (enableInternalInstanceMap) {
-    return !!(
-      (node: any)[internalHoistableMarker] ||
-      internalInstanceMap.has((node: any))
-    );
-  }
   return !!(
     (node: any)[internalHoistableMarker] || (node: any)[internalInstanceKey]
   );

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -126,7 +126,6 @@ import {
   enableHydrationChangeEvent,
   enableFragmentRefsScrollIntoView,
   enableProfilerTimer,
-  enableFragmentRefsInstanceHandles,
 } from 'shared/ReactFeatureFlags';
 import {
   HostComponent,
@@ -215,10 +214,6 @@ export type Container =
 export type Instance = Element;
 export type TextInstance = Text;
 
-type InstanceWithFragmentHandles = Instance & {
-  unstable_reactFragments?: Set<FragmentInstanceType>,
-};
-
 declare class ActivityInterface extends Comment {}
 declare class SuspenseInterface extends Comment {
   _reactRetry: void | (() => void);
@@ -1435,13 +1430,8 @@ export function applyViewTransitionName(
   className: ?string,
 ): void {
   instance = ((instance: any): HTMLElement);
-  // If the name isn't valid CSS identifier, base64 encode the name instead.
-  // This doesn't let you select it in custom CSS selectors but it does work in current
-  // browsers.
-  const escapedName =
-    CSS.escape(name) !== name ? 'r-' + btoa(name).replace(/=/g, '') : name;
   // $FlowFixMe[prop-missing]
-  instance.style.viewTransitionName = escapedName;
+  instance.style.viewTransitionName = name;
   if (className != null) {
     // $FlowFixMe[prop-missing]
     instance.style.viewTransitionClass = className;
@@ -3400,44 +3390,10 @@ if (enableFragmentRefsScrollIntoView) {
   };
 }
 
-function addFragmentHandleToFiber(
-  child: Fiber,
-  fragmentInstance: FragmentInstanceType,
-): boolean {
-  if (enableFragmentRefsInstanceHandles) {
-    const instance =
-      getInstanceFromHostFiber<InstanceWithFragmentHandles>(child);
-    if (instance != null) {
-      addFragmentHandleToInstance(instance, fragmentInstance);
-    }
-  }
-  return false;
-}
-
-function addFragmentHandleToInstance(
-  instance: InstanceWithFragmentHandles,
-  fragmentInstance: FragmentInstanceType,
-): void {
-  if (enableFragmentRefsInstanceHandles) {
-    if (instance.unstable_reactFragments == null) {
-      instance.unstable_reactFragments = new Set();
-    }
-    instance.unstable_reactFragments.add(fragmentInstance);
-  }
-}
-
 export function createFragmentInstance(
   fragmentFiber: Fiber,
 ): FragmentInstanceType {
-  const fragmentInstance = new (FragmentInstance: any)(fragmentFiber);
-  if (enableFragmentRefsInstanceHandles) {
-    traverseFragmentInstance(
-      fragmentFiber,
-      addFragmentHandleToFiber,
-      fragmentInstance,
-    );
-  }
-  return fragmentInstance;
+  return new (FragmentInstance: any)(fragmentFiber);
 }
 
 export function updateFragmentInstanceFiber(
@@ -3448,7 +3404,7 @@ export function updateFragmentInstanceFiber(
 }
 
 export function commitNewChildToFragmentInstance(
-  childInstance: InstanceWithFragmentHandles,
+  childInstance: Instance,
   fragmentInstance: FragmentInstanceType,
 ): void {
   const eventListeners = fragmentInstance._eventListeners;
@@ -3463,25 +3419,17 @@ export function commitNewChildToFragmentInstance(
       observer.observe(childInstance);
     });
   }
-  if (enableFragmentRefsInstanceHandles) {
-    addFragmentHandleToInstance(childInstance, fragmentInstance);
-  }
 }
 
 export function deleteChildFromFragmentInstance(
-  childInstance: InstanceWithFragmentHandles,
+  childElement: Instance,
   fragmentInstance: FragmentInstanceType,
 ): void {
   const eventListeners = fragmentInstance._eventListeners;
   if (eventListeners !== null) {
     for (let i = 0; i < eventListeners.length; i++) {
       const {type, listener, optionsOrUseCapture} = eventListeners[i];
-      childInstance.removeEventListener(type, listener, optionsOrUseCapture);
-    }
-  }
-  if (enableFragmentRefsInstanceHandles) {
-    if (childInstance.unstable_reactFragments != null) {
-      childInstance.unstable_reactFragments.delete(fragmentInstance);
+      childElement.removeEventListener(type, listener, optionsOrUseCapture);
     }
   }
 }

packages/react-dom-bindings/src/events/ReactDOMEventListener.js

@@ -341,6 +341,7 @@ export function getEventPriority(domEventName: DOMEventName): EventPriority {
     case 'pointerup':
     case 'ratechange':
     case 'reset':
+    case 'resize':
     case 'seeked':
     case 'submit':
     case 'toggle':
@@ -379,7 +380,6 @@ export function getEventPriority(domEventName: DOMEventName): EventPriority {
     case 'pointermove':
     case 'pointerout':
     case 'pointerover':
-    case 'resize':
     case 'scroll':
     case 'touchmove':
     case 'wheel':

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js

@@ -8,7 +8,7 @@ export const clientRenderBoundary =
 export const completeBoundary =
   '$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0};\n$RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};';
 export const completeBoundaryUpgradeToViewTransitions =
-  '$RV=function(A,g){function k(a,b){var e=a.getAttribute(b);e&&(b=a.style,l.push(a,b.viewTransitionName,b.viewTransitionClass),"auto"!==e&&(b.viewTransitionClass=e),(a=a.getAttribute("vt-name"))||(a="_T_"+K++ +"_"),a=CSS.escape(a)!==a?"r-"+btoa(a).replace(/=/g,""):a,b.viewTransitionName=a,B=!0)}var B=!1,K=0,l=[];try{var f=document.__reactViewTransition;if(f){f.finished.finally($RV.bind(null,g));return}var m=new Map;for(f=1;f<g.length;f+=2)for(var h=g[f].querySelectorAll("[vt-share]"),d=0;d<h.length;d++){var c=h[d];m.set(c.getAttribute("vt-name"),c)}var u=[];for(h=0;h<g.length;h+=2){var C=g[h],x=C.parentNode;if(x){var v=x.getBoundingClientRect();if(v.left||v.top||v.width||v.height){c=C;for(f=0;c;){if(8===c.nodeType){var r=c.data;if("/$"===r)if(0===f)break;else f--;else"$"!==r&&"$?"!==r&&"$~"!==r&&"$!"!==r||f++}else if(1===c.nodeType){d=c;var D=d.getAttribute("vt-name"),y=m.get(D);k(d,y?"vt-share":"vt-exit");y&&(k(y,"vt-share"),m.set(D,null));var E=d.querySelectorAll("[vt-share]");\nfor(d=0;d<E.length;d++){var F=E[d],G=F.getAttribute("vt-name"),H=m.get(G);H&&(k(F,"vt-share"),k(H,"vt-share"),m.set(G,null))}}c=c.nextSibling}for(var I=g[h+1],t=I.firstElementChild;t;)null!==m.get(t.getAttribute("vt-name"))&&k(t,"vt-enter"),t=t.nextElementSibling;c=x;do for(var n=c.firstElementChild;n;){var J=n.getAttribute("vt-update");J&&"none"!==J&&!l.includes(n)&&k(n,"vt-update");n=n.nextElementSibling}while((c=c.parentNode)&&1===c.nodeType&&"none"!==c.getAttribute("vt-update"));u.push.apply(u,\nI.querySelectorAll(\'img[src]:not([loading="lazy"])\'))}}}if(B){var z=document.__reactViewTransition=document.startViewTransition({update:function(){A(g);for(var a=[document.documentElement.clientHeight,document.fonts.ready],b={},e=0;e<u.length;b={g:b.g},e++)if(b.g=u[e],!b.g.complete){var p=b.g.getBoundingClientRect();0<p.bottom&&0<p.right&&p.top<window.innerHeight&&p.left<window.innerWidth&&(p=new Promise(function(w){return function(q){w.g.addEventListener("load",q);w.g.addEventListener("error",q)}}(b)),\na.push(p))}return Promise.race([Promise.all(a),new Promise(function(w){var q=performance.now();setTimeout(w,2300>q&&2E3<q?2300-q:500)})])},types:[]});z.ready.finally(function(){for(var a=l.length-3;0<=a;a-=3){var b=l[a],e=b.style;e.viewTransitionName=l[a+1];e.viewTransitionClass=l[a+1];""===b.getAttribute("style")&&b.removeAttribute("style")}});z.finished.finally(function(){document.__reactViewTransition===z&&(document.__reactViewTransition=null)});$RB=[];return}}catch(a){}A(g)}.bind(null,\n$RV);';
+  '$RV=function(A,g){function k(a,b){var e=a.getAttribute(b);e&&(b=a.style,l.push(a,b.viewTransitionName,b.viewTransitionClass),"auto"!==e&&(b.viewTransitionClass=e),(a=a.getAttribute("vt-name"))||(a="_T_"+K++ +"_"),b.viewTransitionName=a,B=!0)}var B=!1,K=0,l=[];try{var f=document.__reactViewTransition;if(f){f.finished.finally($RV.bind(null,g));return}var m=new Map;for(f=1;f<g.length;f+=2)for(var h=g[f].querySelectorAll("[vt-share]"),d=0;d<h.length;d++){var c=h[d];m.set(c.getAttribute("vt-name"),c)}var u=[];for(h=0;h<g.length;h+=2){var C=g[h],x=C.parentNode;if(x){var v=x.getBoundingClientRect();if(v.left||v.top||v.width||v.height){c=C;for(f=0;c;){if(8===c.nodeType){var r=c.data;if("/$"===r)if(0===f)break;else f--;else"$"!==r&&"$?"!==r&&"$~"!==r&&"$!"!==r||f++}else if(1===c.nodeType){d=c;var D=d.getAttribute("vt-name"),y=m.get(D);k(d,y?"vt-share":"vt-exit");y&&(k(y,"vt-share"),m.set(D,null));var E=d.querySelectorAll("[vt-share]");for(d=0;d<E.length;d++){var F=E[d],G=F.getAttribute("vt-name"),\nH=m.get(G);H&&(k(F,"vt-share"),k(H,"vt-share"),m.set(G,null))}}c=c.nextSibling}for(var I=g[h+1],t=I.firstElementChild;t;)null!==m.get(t.getAttribute("vt-name"))&&k(t,"vt-enter"),t=t.nextElementSibling;c=x;do for(var n=c.firstElementChild;n;){var J=n.getAttribute("vt-update");J&&"none"!==J&&!l.includes(n)&&k(n,"vt-update");n=n.nextElementSibling}while((c=c.parentNode)&&1===c.nodeType&&"none"!==c.getAttribute("vt-update"));u.push.apply(u,I.querySelectorAll(\'img[src]:not([loading="lazy"])\'))}}}if(B){var z=\ndocument.__reactViewTransition=document.startViewTransition({update:function(){A(g);for(var a=[document.documentElement.clientHeight,document.fonts.ready],b={},e=0;e<u.length;b={g:b.g},e++)if(b.g=u[e],!b.g.complete){var p=b.g.getBoundingClientRect();0<p.bottom&&0<p.right&&p.top<window.innerHeight&&p.left<window.innerWidth&&(p=new Promise(function(w){return function(q){w.g.addEventListener("load",q);w.g.addEventListener("error",q)}}(b)),a.push(p))}return Promise.race([Promise.all(a),new Promise(function(w){var q=\nperformance.now();setTimeout(w,2300>q&&2E3<q?2300-q:500)})])},types:[]});z.ready.finally(function(){for(var a=l.length-3;0<=a;a-=3){var b=l[a],e=b.style;e.viewTransitionName=l[a+1];e.viewTransitionClass=l[a+1];""===b.getAttribute("style")&&b.removeAttribute("style")}});z.finished.finally(function(){document.__reactViewTransition===z&&(document.__reactViewTransition=null)});$RB=[];return}}catch(a){}A(g)}.bind(null,$RV);';
 export const completeBoundaryWithStyles =
   '$RM=new Map;$RR=function(n,w,p){function u(q){this._p=null;q()}for(var r=new Map,t=document,h,b,e=t.querySelectorAll("link[data-precedence],style[data-precedence]"),v=[],k=0;b=e[k++];)"not all"===b.getAttribute("media")?v.push(b):("LINK"===b.tagName&&$RM.set(b.getAttribute("href"),b),r.set(b.dataset.precedence,h=b));e=0;b=[];var l,a;for(k=!0;;){if(k){var f=p[e++];if(!f){k=!1;e=0;continue}var c=!1,m=0;var d=f[m++];if(a=$RM.get(d)){var g=a._p;c=!0}else{a=t.createElement("link");a.href=d;a.rel=\n"stylesheet";for(a.dataset.precedence=l=f[m++];g=f[m++];)a.setAttribute(g,f[m++]);g=a._p=new Promise(function(q,x){a.onload=u.bind(a,q);a.onerror=u.bind(a,x)});$RM.set(d,a)}d=a.getAttribute("media");!g||d&&!matchMedia(d).matches||b.push(g);if(c)continue}else{a=v[e++];if(!a)break;l=a.getAttribute("data-precedence");a.removeAttribute("media")}c=r.get(l)||h;c===h&&(h=a);r.set(l,a);c?c.parentNode.insertBefore(a,c.nextSibling):(c=t.head,c.insertBefore(a,c.firstChild))}if(p=document.getElementById(n))p.previousSibling.data=\n"$~";Promise.all(b).then($RC.bind(null,n,w),$RX.bind(null,n,"CSS failed to load"))};';
 export const completeSegment =

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetShared.js

@@ -130,12 +130,7 @@ export function revealCompletedBoundariesWithViewTransitions(
       const idPrefix = '';
       name = '_' + idPrefix + 'T_' + autoNameIdx++ + '_';
     }
-    // If the name isn't valid CSS identifier, base64 encode the name instead.
-    // This doesn't let you select it in custom CSS selectors but it does work in current
-    // browsers.
-    const escapedName =
-      CSS.escape(name) !== name ? 'r-' + btoa(name).replace(/=/g, '') : name;
-    elementStyle['viewTransitionName'] = escapedName;
+    elementStyle['viewTransitionName'] = name;
     shouldStartViewTransition = true;
   }
   try {

packages/react-dom/npm/server.bun.js

@@ -12,8 +12,6 @@ if (process.env.NODE_ENV === 'production') {
 
 exports.version = b.version;
 exports.renderToReadableStream = b.renderToReadableStream;
-exports.renderToPipeableStream = b.renderToPipeableStream;
-exports.resumeToPipeableStream = b.resumeToPipeableStream;
 exports.resume = b.resume;
 exports.renderToString = l.renderToString;
 exports.renderToStaticMarkup = l.renderToStaticMarkup;

packages/react-dom/server.bun.js

@@ -38,17 +38,3 @@ export function resume() {
     arguments,
   );
 }
-
-export function renderToPipeableStream() {
-  return require('./src/server/react-dom-server.bun').renderToPipeableStream.apply(
-    this,
-    arguments,
-  );
-}
-
-export function resumeToPipeableStream() {
-  return require('./src/server/react-dom-server.bun').resumeToPipeableStream.apply(
-    this,
-    arguments,
-  );
-}