[lint] Allow useEffectEvent in useLayoutEffect and useInsertionEffect

Small follow-up to #34350. The `_store` property is now only assigned in
development mode when creating lazy types. It also uses the `validated`
value that was passed to `createElement`, if applicable.

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/AlignReactiveScopesToBlockScopesHIR.ts

@@ -175,41 +175,6 @@ export function alignReactiveScopesToBlockScopesHIR(fn: HIRFunction): void {
       if (node != null) {
         valueBlockNodes.set(fallthrough, node);
       }
-    } else if (terminal.kind === 'goto') {
-      /**
-       * If we encounter a goto that is not to the natural fallthrough of the current
-       * block (not the topmost fallthrough on the stack), then this is a goto to a
-       * label. Any scopes that extend beyond the goto must be extended to include
-       * the labeled range, so that the break statement doesn't accidentally jump
-       * out of the scope. We do this by extending the start and end of the scope's
-       * range to the label and its fallthrough respectively.
-       */
-      const start = activeBlockFallthroughRanges.find(
-        range => range.fallthrough === terminal.block,
-      );
-      if (start != null && start !== activeBlockFallthroughRanges.at(-1)) {
-        const fallthroughBlock = fn.body.blocks.get(start.fallthrough)!;
-        const firstId =
-          fallthroughBlock.instructions[0]?.id ?? fallthroughBlock.terminal.id;
-        for (const scope of activeScopes) {
-          /**
-           * activeScopes is only filtered at block start points, so some of the
-           * scopes may not actually be active anymore, ie we've past their end
-           * instruction. Only extend ranges for scopes that are actually active.
-           *
-           * TODO: consider pruning activeScopes per instruction
-           */
-          if (scope.range.end <= terminal.id) {
-            continue;
-          }
-          scope.range.start = makeInstructionId(
-            Math.min(start.range.start, scope.range.start),
-          );
-          scope.range.end = makeInstructionId(
-            Math.max(firstId, scope.range.end),
-          );
-        }
-      }
     }
 
     /*

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneNonEscapingScopes.ts

@@ -411,9 +411,7 @@ class CollectDependenciesVisitor extends ReactiveFunctionVisitor<
     this.state = state;
     this.options = {
       memoizeJsxElements: !this.env.config.enableForest,
-      forceMemoizePrimitives:
-        this.env.config.enableForest ||
-        this.env.config.enablePreserveExistingMemoizationGuarantees,
+      forceMemoizePrimitives: this.env.config.enableForest,
     };
   }
 
@@ -536,23 +534,9 @@ class CollectDependenciesVisitor extends ReactiveFunctionVisitor<
       case 'JSXText':
       case 'BinaryExpression':
       case 'UnaryExpression': {
-        if (options.forceMemoizePrimitives) {
-          /**
-           * Because these instructions produce primitives we usually don't consider
-           * them as escape points: they are known to copy, not return references.
-           * However if we're forcing memoization of primitives then we mark these
-           * instructions as needing memoization and walk their rvalues to ensure
-           * any scopes transitively reachable from the rvalues are considered for
-           * memoization. Note: we may still prune primitive-producing scopes if
-           * they don't ultimately escape at all.
-           */
-          const level = MemoizationLevel.Memoized;
-          return {
-            lvalues: lvalue !== null ? [{place: lvalue, level}] : [],
-            rvalues: [...eachReactiveValueOperand(value)],
-          };
-        }
-        const level = MemoizationLevel.Never;
+        const level = options.forceMemoizePrimitives
+          ? MemoizationLevel.Memoized
+          : MemoizationLevel.Never;
         return {
           // All of these instructions return a primitive value and never need to be memoized
           lvalues: lvalue !== null ? [{place: lvalue, level}] : [],

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-if.expect.md

@@ -46,16 +46,14 @@ function useFoo(t0) {
     t1 = $[0];
   }
   let items = t1;
-  if ($[1] !== cond) {
-    bb0: {
-      if (cond) {
-        items = [];
-      } else {
-        break bb0;
-      }
-
-      items.push(2);
+  bb0: if ($[1] !== cond) {
+    if (cond) {
+      items = [];
+    } else {
+      break bb0;
     }
+
+    items.push(2);
     $[1] = cond;
     $[2] = items;
   } else {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-memoize-primitive-function-call-non-escaping-useMemo.expect.md

@@ -1,77 +0,0 @@
-
-## Input
-
-```javascript
-// @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
-import {useMemo} from 'react';
-import {makeObject_Primitives, ValidateMemoization} from 'shared-runtime';
-
-function Component(props) {
-  const result = useMemo(
-    () => makeObject(props.value).value + 1,
-    [props.value]
-  );
-  console.log(result);
-  return 'ok';
-}
-
-function makeObject(value) {
-  console.log(value);
-  return {value};
-}
-
-export const TODO_FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{value: 42}],
-  sequentialRenders: [
-    {value: 42},
-    {value: 42},
-    {value: 3.14},
-    {value: 3.14},
-    {value: 42},
-    {value: 3.14},
-    {value: 42},
-    {value: 3.14},
-  ],
-};
-
-```
-
-## Code
-
-```javascript
-// @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
-import { useMemo } from "react";
-import { makeObject_Primitives, ValidateMemoization } from "shared-runtime";
-
-function Component(props) {
-  const result = makeObject(props.value).value + 1;
-
-  console.log(result);
-  return "ok";
-}
-
-function makeObject(value) {
-  console.log(value);
-  return { value };
-}
-
-export const TODO_FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{ value: 42 }],
-  sequentialRenders: [
-    { value: 42 },
-    { value: 42 },
-    { value: 3.14 },
-    { value: 3.14 },
-    { value: 42 },
-    { value: 3.14 },
-    { value: 42 },
-    { value: 3.14 },
-  ],
-};
-
-```
-      
-### Eval output
-(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-memoize-primitive-function-call-non-escaping-useMemo.js

@@ -1,32 +0,0 @@
-// @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
-import {useMemo} from 'react';
-import {makeObject_Primitives, ValidateMemoization} from 'shared-runtime';
-
-function Component(props) {
-  const result = useMemo(
-    () => makeObject(props.value).value + 1,
-    [props.value]
-  );
-  console.log(result);
-  return 'ok';
-}
-
-function makeObject(value) {
-  console.log(value);
-  return {value};
-}
-
-export const TODO_FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{value: 42}],
-  sequentialRenders: [
-    {value: 42},
-    {value: 42},
-    {value: 3.14},
-    {value: 3.14},
-    {value: 42},
-    {value: 3.14},
-    {value: 42},
-    {value: 3.14},
-  ],
-};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-memoize-primitive-function-call-non-escaping.expect.md

@@ -1,81 +0,0 @@
-
-## Input
-
-```javascript
-// @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
-import {useMemo} from 'react';
-import {makeObject_Primitives, ValidateMemoization} from 'shared-runtime';
-
-function Component(props) {
-  const result = makeObject(props.value).value + 1;
-  console.log(result);
-  return 'ok';
-}
-
-function makeObject(value) {
-  console.log(value);
-  return {value};
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{value: 42}],
-  sequentialRenders: [
-    {value: 42},
-    {value: 42},
-    {value: 3.14},
-    {value: 3.14},
-    {value: 42},
-    {value: 3.14},
-    {value: 42},
-    {value: 3.14},
-  ],
-};
-
-```
-
-## Code
-
-```javascript
-// @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
-import { useMemo } from "react";
-import { makeObject_Primitives, ValidateMemoization } from "shared-runtime";
-
-function Component(props) {
-  const result = makeObject(props.value).value + 1;
-  console.log(result);
-  return "ok";
-}
-
-function makeObject(value) {
-  console.log(value);
-  return { value };
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{ value: 42 }],
-  sequentialRenders: [
-    { value: 42 },
-    { value: 42 },
-    { value: 3.14 },
-    { value: 3.14 },
-    { value: 42 },
-    { value: 3.14 },
-    { value: 42 },
-    { value: 3.14 },
-  ],
-};
-
-```
-      
-### Eval output
-(kind: ok) "ok"
-"ok"
-"ok"
-"ok"
-"ok"
-"ok"
-"ok"
-"ok"
-logs: [42,43,42,43,3.14,4.140000000000001,3.14,4.140000000000001,42,43,3.14,4.140000000000001,42,43,3.14,4.140000000000001]

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-memoize-primitive-function-call-non-escaping.js

@@ -1,29 +0,0 @@
-// @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
-import {useMemo} from 'react';
-import {makeObject_Primitives, ValidateMemoization} from 'shared-runtime';
-
-function Component(props) {
-  const result = makeObject(props.value).value + 1;
-  console.log(result);
-  return 'ok';
-}
-
-function makeObject(value) {
-  console.log(value);
-  return {value};
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{value: 42}],
-  sequentialRenders: [
-    {value: 42},
-    {value: 42},
-    {value: 3.14},
-    {value: 3.14},
-    {value: 42},
-    {value: 3.14},
-    {value: 42},
-    {value: 3.14},
-  ],
-};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-primitive-function-calls.expect.md

@@ -1,107 +0,0 @@
-
-## Input
-
-```javascript
-// @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
-import {useMemo} from 'react';
-import {makeObject_Primitives, ValidateMemoization} from 'shared-runtime';
-
-function Component(props) {
-  const result = useMemo(() => {
-    return makeObject(props.value).value + 1;
-  }, [props.value]);
-  return <ValidateMemoization inputs={[props.value]} output={result} />;
-}
-
-function makeObject(value) {
-  console.log(value);
-  return {value};
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{value: 42}],
-  sequentialRenders: [
-    {value: 42},
-    {value: 42},
-    {value: 3.14},
-    {value: 3.14},
-    {value: 42},
-    {value: 3.14},
-    {value: 42},
-    {value: 3.14},
-  ],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
-import { useMemo } from "react";
-import { makeObject_Primitives, ValidateMemoization } from "shared-runtime";
-
-function Component(props) {
-  const $ = _c(7);
-  let t0;
-  if ($[0] !== props.value) {
-    t0 = makeObject(props.value);
-    $[0] = props.value;
-    $[1] = t0;
-  } else {
-    t0 = $[1];
-  }
-  const result = t0.value + 1;
-  let t1;
-  if ($[2] !== props.value) {
-    t1 = [props.value];
-    $[2] = props.value;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  let t2;
-  if ($[4] !== result || $[5] !== t1) {
-    t2 = <ValidateMemoization inputs={t1} output={result} />;
-    $[4] = result;
-    $[5] = t1;
-    $[6] = t2;
-  } else {
-    t2 = $[6];
-  }
-  return t2;
-}
-
-function makeObject(value) {
-  console.log(value);
-  return { value };
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{ value: 42 }],
-  sequentialRenders: [
-    { value: 42 },
-    { value: 42 },
-    { value: 3.14 },
-    { value: 3.14 },
-    { value: 42 },
-    { value: 3.14 },
-    { value: 42 },
-    { value: 3.14 },
-  ],
-};
-
-```
-      
-### Eval output
-(kind: ok) <div>{"inputs":[42],"output":43}</div>
-<div>{"inputs":[42],"output":43}</div>
-<div>{"inputs":[3.14],"output":4.140000000000001}</div>
-<div>{"inputs":[3.14],"output":4.140000000000001}</div>
-<div>{"inputs":[42],"output":43}</div>
-<div>{"inputs":[3.14],"output":4.140000000000001}</div>
-<div>{"inputs":[42],"output":43}</div>
-<div>{"inputs":[3.14],"output":4.140000000000001}</div>
-logs: [42,3.14,42,3.14,42,3.14]

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/memoize-primitive-function-calls.js

@@ -1,30 +0,0 @@
-// @compilationMode:"infer" @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees
-import {useMemo} from 'react';
-import {makeObject_Primitives, ValidateMemoization} from 'shared-runtime';
-
-function Component(props) {
-  const result = useMemo(() => {
-    return makeObject(props.value).value + 1;
-  }, [props.value]);
-  return <ValidateMemoization inputs={[props.value]} output={result} />;
-}
-
-function makeObject(value) {
-  console.log(value);
-  return {value};
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{value: 42}],
-  sequentialRenders: [
-    {value: 42},
-    {value: 42},
-    {value: 3.14},
-    {value: 3.14},
-    {value: 42},
-    {value: 3.14},
-    {value: 42},
-    {value: 3.14},
-  ],
-};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-jsx-and-break.expect.md

@@ -49,12 +49,12 @@ import {
 } from "shared-runtime";
 
 function useFoo(t0) {
-  const $ = _c(4);
+  const $ = _c(3);
   const { data } = t0;
   let obj;
   let myDiv = null;
-  if ($[0] !== data.cond || $[1] !== data.cond1) {
-    bb0: if (data.cond) {
+  bb0: if (data.cond) {
+    if ($[0] !== data.cond1) {
       obj = makeObject_Primitives();
       if (data.cond1) {
         myDiv = <Stringify value={mutateAndReturn(obj)} />;
@@ -62,14 +62,13 @@ function useFoo(t0) {
       }
 
       mutate(obj);
+      $[0] = data.cond1;
+      $[1] = obj;
+      $[2] = myDiv;
+    } else {
+      obj = $[1];
+      myDiv = $[2];
     }
-    $[0] = data.cond;
-    $[1] = data.cond1;
-    $[2] = obj;
-    $[3] = myDiv;
-  } else {
-    obj = $[2];
-    myDiv = $[3];
   }
   return myDiv;
 }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/useMemo-multiple-if-else.expect.md

@@ -34,16 +34,17 @@ import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
 import { useMemo } from "react";
 
 function Component(props) {
-  const $ = _c(5);
+  const $ = _c(6);
   let t0;
-  if (
-    $[0] !== props.a ||
-    $[1] !== props.b ||
-    $[2] !== props.cond ||
-    $[3] !== props.cond2
-  ) {
-    bb0: {
-      const y = [];
+  bb0: {
+    let y;
+    if (
+      $[0] !== props.a ||
+      $[1] !== props.b ||
+      $[2] !== props.cond ||
+      $[3] !== props.cond2
+    ) {
+      y = [];
       if (props.cond) {
         y.push(props.a);
       }
@@ -53,15 +54,17 @@ function Component(props) {
       }
 
       y.push(props.b);
-      t0 = y;
+      $[0] = props.a;
+      $[1] = props.b;
+      $[2] = props.cond;
+      $[3] = props.cond2;
+      $[4] = y;
+      $[5] = t0;
+    } else {
+      y = $[4];
+      t0 = $[5];
     }
-    $[0] = props.a;
-    $[1] = props.b;
-    $[2] = props.cond;
-    $[3] = props.cond2;
-    $[4] = t0;
-  } else {
-    t0 = $[4];
+    t0 = y;
   }
   const x = t0;
   return x;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-useMemo-if-else-both-early-return.expect.md

@@ -1,118 +0,0 @@
-
-## Input
-
-```javascript
-import {useMemo} from 'react';
-import {
-  makeObject_Primitives,
-  mutate,
-  Stringify,
-  ValidateMemoization,
-} from 'shared-runtime';
-
-function Component({cond}) {
-  const memoized = useMemo(() => {
-    const value = makeObject_Primitives();
-    if (cond) {
-      return value;
-    } else {
-      mutate(value);
-      return value;
-    }
-  }, [cond]);
-  return <ValidateMemoization inputs={[cond]} output={memoized} />;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{cond: false}],
-  sequentialRenders: [
-    {cond: false},
-    {cond: false},
-    {cond: true},
-    {cond: true},
-    {cond: false},
-    {cond: true},
-    {cond: false},
-    {cond: true},
-  ],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime";
-import { useMemo } from "react";
-import {
-  makeObject_Primitives,
-  mutate,
-  Stringify,
-  ValidateMemoization,
-} from "shared-runtime";
-
-function Component(t0) {
-  const $ = _c(7);
-  const { cond } = t0;
-  let t1;
-  if ($[0] !== cond) {
-    const value = makeObject_Primitives();
-    if (cond) {
-      t1 = value;
-    } else {
-      mutate(value);
-      t1 = value;
-    }
-    $[0] = cond;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  const memoized = t1;
-  let t2;
-  if ($[2] !== cond) {
-    t2 = [cond];
-    $[2] = cond;
-    $[3] = t2;
-  } else {
-    t2 = $[3];
-  }
-  let t3;
-  if ($[4] !== memoized || $[5] !== t2) {
-    t3 = <ValidateMemoization inputs={t2} output={memoized} />;
-    $[4] = memoized;
-    $[5] = t2;
-    $[6] = t3;
-  } else {
-    t3 = $[6];
-  }
-  return t3;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{ cond: false }],
-  sequentialRenders: [
-    { cond: false },
-    { cond: false },
-    { cond: true },
-    { cond: true },
-    { cond: false },
-    { cond: true },
-    { cond: false },
-    { cond: true },
-  ],
-};
-
-```
-      
-### Eval output
-(kind: ok) <div>{"inputs":[false],"output":{"a":0,"b":"value1","c":true,"wat0":"joe"}}</div>
-<div>{"inputs":[false],"output":{"a":0,"b":"value1","c":true,"wat0":"joe"}}</div>
-<div>{"inputs":[true],"output":{"a":0,"b":"value1","c":true}}</div>
-<div>{"inputs":[true],"output":{"a":0,"b":"value1","c":true}}</div>
-<div>{"inputs":[false],"output":{"a":0,"b":"value1","c":true,"wat0":"joe"}}</div>
-<div>{"inputs":[true],"output":{"a":0,"b":"value1","c":true}}</div>
-<div>{"inputs":[false],"output":{"a":0,"b":"value1","c":true,"wat0":"joe"}}</div>
-<div>{"inputs":[true],"output":{"a":0,"b":"value1","c":true}}</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-useMemo-if-else-both-early-return.js

@@ -1,35 +0,0 @@
-import {useMemo} from 'react';
-import {
-  makeObject_Primitives,
-  mutate,
-  Stringify,
-  ValidateMemoization,
-} from 'shared-runtime';
-
-function Component({cond}) {
-  const memoized = useMemo(() => {
-    const value = makeObject_Primitives();
-    if (cond) {
-      return value;
-    } else {
-      mutate(value);
-      return value;
-    }
-  }, [cond]);
-  return <ValidateMemoization inputs={[cond]} output={memoized} />;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{cond: false}],
-  sequentialRenders: [
-    {cond: false},
-    {cond: false},
-    {cond: true},
-    {cond: true},
-    {cond: false},
-    {cond: true},
-    {cond: false},
-    {cond: true},
-  ],
-};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-multiple-if-else.expect.md

@@ -33,16 +33,17 @@ import { c as _c } from "react/compiler-runtime";
 import { useMemo } from "react";
 
 function Component(props) {
-  const $ = _c(5);
+  const $ = _c(6);
   let t0;
-  if (
-    $[0] !== props.a ||
-    $[1] !== props.b ||
-    $[2] !== props.cond ||
-    $[3] !== props.cond2
-  ) {
-    bb0: {
-      const y = [];
+  bb0: {
+    let y;
+    if (
+      $[0] !== props.a ||
+      $[1] !== props.b ||
+      $[2] !== props.cond ||
+      $[3] !== props.cond2
+    ) {
+      y = [];
       if (props.cond) {
         y.push(props.a);
       }
@@ -52,15 +53,17 @@ function Component(props) {
       }
 
       y.push(props.b);
-      t0 = y;
+      $[0] = props.a;
+      $[1] = props.b;
+      $[2] = props.cond;
+      $[3] = props.cond2;
+      $[4] = y;
+      $[5] = t0;
+    } else {
+      y = $[4];
+      t0 = $[5];
     }
-    $[0] = props.a;
-    $[1] = props.b;
-    $[2] = props.cond;
-    $[3] = props.cond2;
-    $[4] = t0;
-  } else {
-    t0 = $[4];
+    t0 = y;
   }
   const x = t0;
   return x;

fixtures/flight/server/region.js

@@ -74,13 +74,7 @@ function getDebugChannel(req) {
   return activeDebugChannels.get(requestId);
 }
 
-async function renderApp(
-  res,
-  returnValue,
-  formState,
-  noCache,
-  promiseForDebugChannel
-) {
+async function renderApp(res, returnValue, formState, noCache, debugChannel) {
   const {renderToPipeableStream} = await import(
     'react-server-dom-webpack/server'
   );
@@ -132,7 +126,7 @@ async function renderApp(
   // For client-invoked server actions we refresh the tree and return a return value.
   const payload = {root, returnValue, formState};
   const {pipe} = renderToPipeableStream(payload, moduleMap, {
-    debugChannel: await promiseForDebugChannel,
+    debugChannel,
     filterStackFrame,
   });
   pipe(res);
@@ -385,23 +379,20 @@ app.on('error', function (error) {
 if (process.env.NODE_ENV === 'development') {
   // Open a websocket server for Debug information
   const WebSocket = require('ws');
-  const webSocketServer = new WebSocket.Server({noServer: true});
 
-  httpServer.on('upgrade', (request, socket, head) => {
-    const DEBUG_CHANNEL_PATH = '/debug-channel?';
-    if (request.url.startsWith(DEBUG_CHANNEL_PATH)) {
-      const requestId = request.url.slice(DEBUG_CHANNEL_PATH.length);
-      const promiseForWs = new Promise(resolve => {
-        webSocketServer.handleUpgrade(request, socket, head, ws => {
-          ws.on('close', () => {
-            activeDebugChannels.delete(requestId);
-          });
-          resolve(ws);
-        });
-      });
-      activeDebugChannels.set(requestId, promiseForWs);
-    } else {
-      socket.destroy();
-    }
+  const webSocketServer = new WebSocket.Server({
+    server: httpServer,
+    path: '/debug-channel',
+  });
+
+  webSocketServer.on('connection', (ws, req) => {
+    const url = new URL(req.url, `http://${req.headers.host}`);
+    const requestId = url.searchParams.get('id');
+
+    activeDebugChannels.set(requestId, ws);
+
+    ws.on('close', (code, reason) => {
+      activeDebugChannels.delete(requestId);
+    });
   });
 }

fixtures/flight/src/index.js

@@ -14,18 +14,52 @@ function findSourceMapURL(fileName) {
   );
 }
 
+async function createWebSocketStream(url) {
+  const ws = new WebSocket(url);
+  ws.binaryType = 'arraybuffer';
+
+  await new Promise((resolve, reject) => {
+    ws.addEventListener('open', resolve, {once: true});
+    ws.addEventListener('error', reject, {once: true});
+  });
+
+  const writable = new WritableStream({
+    write(chunk) {
+      ws.send(chunk);
+    },
+    close() {
+      ws.close();
+    },
+    abort(reason) {
+      ws.close(1000, reason && String(reason));
+    },
+  });
+
+  const readable = new ReadableStream({
+    start(controller) {
+      ws.addEventListener('message', event => {
+        controller.enqueue(event.data);
+      });
+      ws.addEventListener('close', () => {
+        controller.close();
+      });
+      ws.addEventListener('error', err => {
+        controller.error(err);
+      });
+    },
+  });
+
+  return {readable, writable};
+}
+
 let updateRoot;
 async function callServer(id, args) {
   let response;
-  if (
-    process.env.NODE_ENV === 'development' &&
-    typeof WebSocketStream === 'function'
-  ) {
+  if (process.env.NODE_ENV === 'development') {
     const requestId = crypto.randomUUID();
-    const wss = new WebSocketStream(
-      'ws://localhost:3001/debug-channel?' + requestId
+    const debugChannel = await createWebSocketStream(
+      `ws://localhost:3001/debug-channel?id=${requestId}`
     );
-    const debugChannel = await wss.opened;
     response = createFromFetch(
       fetch('/', {
         method: 'POST',
@@ -74,15 +108,11 @@ function Shell({data}) {
 
 async function hydrateApp() {
   let response;
-  if (
-    process.env.NODE_ENV === 'development' &&
-    typeof WebSocketStream === 'function'
-  ) {
+  if (process.env.NODE_ENV === 'development') {
     const requestId = crypto.randomUUID();
-    const wss = new WebSocketStream(
-      'ws://localhost:3001/debug-channel?' + requestId
+    const debugChannel = await createWebSocketStream(
+      `ws://localhost:3001/debug-channel?id=${requestId}`
     );
-    const debugChannel = await wss.opened;
     response = createFromFetch(
       fetch('/', {
         headers: {

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

@@ -1430,6 +1430,72 @@ if (__EXPERIMENTAL__) {
         }
       `,
     },
+    {
+      code: normalizeIndent`
+        // Valid because functions created with useEffectEvent can be called in useLayoutEffect.
+        function MyComponent({ theme }) {
+          const onClick = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          useLayoutEffect(() => {
+            onClick();
+          });
+          React.useLayoutEffect(() => {
+            onClick();
+          });
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        // Valid because functions created with useEffectEvent can be called in useInsertionEffect.
+        function 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 
+        // and useInsertionEffect.
+        function MyComponent({ theme }) {
+          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;
+        }
+      `,
+    },
   ];
   allTests.invalid = [
     ...allTests.invalid,

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

@@ -147,8 +147,8 @@ function getNodeWithoutReactNamespace(
   return node;
 }
 
-function isUseEffectIdentifier(node: Node): boolean {
-  return node.type === 'Identifier' && node.name === 'useEffect';
+function isEffectIdentifier(node: Node): boolean {
+  return node.type === 'Identifier' && (node.name === 'useEffect' || node.name === 'useLayoutEffect' || node.name === 'useInsertionEffect');
 }
 function isUseEffectEventIdentifier(node: Node): boolean {
   if (__EXPERIMENTAL__) {
@@ -726,7 +726,7 @@ const rule = {
         // Check all `useEffect` and `React.useEffect`, `useEffectEvent`, and `React.useEffectEvent`
         const nodeWithoutNamespace = getNodeWithoutReactNamespace(node.callee);
         if (
-          (isUseEffectIdentifier(nodeWithoutNamespace) ||
+          (isEffectIdentifier(nodeWithoutNamespace) ||
             isUseEffectEventIdentifier(nodeWithoutNamespace)) &&
           node.arguments.length > 0
         ) {

packages/react-client/src/ReactFlightClient.js

@@ -1010,10 +1010,15 @@ export function reportGlobalError(
   if (__DEV__) {
     const debugChannel = response._debugChannel;
     if (debugChannel !== undefined) {
-      // If we don't have any more ways of reading data, we don't have to send any
-      // more neither. So we close the writable side.
+      // If we don't have any more ways of reading data, we don't have to send
+      // any more neither. So we close the writable side.
       closeDebugChannel(debugChannel);
       response._debugChannel = undefined;
+      // Make sure the debug channel is not closed a second time when the
+      // Response gets GC:ed.
+      if (debugChannelRegistry !== null) {
+        debugChannelRegistry.unregister(response);
+      }
     }
   }
 }
@@ -1069,7 +1074,14 @@ function getTaskName(type: mixed): string {
   }
 }
 
-function initializeElement(response: Response, element: any): void {
+function initializeElement(
+  response: Response,
+  element: any,
+  lazyType: null | LazyComponent<
+    React$Element<any>,
+    SomeChunk<React$Element<any>>,
+  >,
+): void {
   if (!__DEV__) {
     return;
   }
@@ -1136,6 +1148,18 @@ function initializeElement(response: Response, element: any): void {
   if (owner !== null) {
     initializeFakeStack(response, owner);
   }
+
+  // In case the JSX runtime has validated the lazy type as a static child, we
+  // need to transfer this information to the element.
+  if (
+    lazyType &&
+    lazyType._store &&
+    lazyType._store.validated &&
+    !element._store.validated
+  ) {
+    element._store.validated = lazyType._store.validated;
+  }
+
   // TODO: We should be freezing the element but currently, we might write into
   // _debugInfo later. We could move it into _store which remains mutable.
   Object.freeze(element.props);
@@ -1148,7 +1172,7 @@ function createElement(
   props: mixed,
   owner: ?ReactComponentInfo, // DEV-only
   stack: ?ReactStackTrace, // DEV-only
-  validated: number, // DEV-only
+  validated: 0 | 1 | 2, // DEV-only
 ):
   | React$Element<any>
   | LazyComponent<React$Element<any>, SomeChunk<React$Element<any>>> {
@@ -1225,7 +1249,7 @@ function createElement(
         handler.reason,
       );
       if (__DEV__) {
-        initializeElement(response, element);
+        initializeElement(response, element, null);
         // Conceptually the error happened inside this Element but right before
         // it was rendered. We don't have a client side component to render but
         // we can add some DebugInfo to explain that this was conceptually a
@@ -1244,7 +1268,7 @@ function createElement(
         }
         erroredChunk._debugInfo = [erroredComponent];
       }
-      return createLazyChunkWrapper(erroredChunk);
+      return createLazyChunkWrapper(erroredChunk, validated);
     }
     if (handler.deps > 0) {
       // We have blocked references inside this Element but we can turn this into
@@ -1253,16 +1277,17 @@ function createElement(
         createBlockedChunk(response);
       handler.value = element;
       handler.chunk = blockedChunk;
+      const lazyType = createLazyChunkWrapper(blockedChunk, validated);
       if (__DEV__) {
-        /// After we have initialized any blocked references, initialize stack etc.
-        const init = initializeElement.bind(null, response, element);
+        // After we have initialized any blocked references, initialize stack etc.
+        const init = initializeElement.bind(null, response, element, lazyType);
         blockedChunk.then(init, init);
       }
-      return createLazyChunkWrapper(blockedChunk);
+      return lazyType;
     }
   }
   if (__DEV__) {
-    initializeElement(response, element);
+    initializeElement(response, element, null);
   }
 
   return element;
@@ -1270,6 +1295,7 @@ function createElement(
 
 function createLazyChunkWrapper<T>(
   chunk: SomeChunk<T>,
+  validated: 0 | 1 | 2, // DEV-only
 ): LazyComponent<T, SomeChunk<T>> {
   const lazyType: LazyComponent<T, SomeChunk<T>> = {
     $$typeof: REACT_LAZY_TYPE,
@@ -1281,6 +1307,8 @@ function createLazyChunkWrapper<T>(
     const chunkDebugInfo: ReactDebugInfo =
       chunk._debugInfo || (chunk._debugInfo = ([]: ReactDebugInfo));
     lazyType._debugInfo = chunkDebugInfo;
+    // Initialize a store for key validation by the JSX runtime.
+    lazyType._store = {validated: validated};
   }
   return lazyType;
 }
@@ -2085,7 +2113,7 @@ function parseModelString(
         }
         // We create a React.lazy wrapper around any lazy values.
         // When passed into React, we'll know how to suspend on this.
-        return createLazyChunkWrapper(chunk);
+        return createLazyChunkWrapper(chunk, 0);
       }
       case '@': {
         // Promise
@@ -2434,7 +2462,7 @@ function ResponseInstance(
         // When a Response gets GC:ed because nobody is referring to any of the
         // objects that lazily load from the Response anymore, then we can close
         // the debug channel.
-        debugChannelRegistry.register(this, debugChannel);
+        debugChannelRegistry.register(this, debugChannel, this);
       }
     }
   }

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

@@ -80,8 +80,8 @@ export default function Element({data, index, style}: Props): React.Node {
   };
 
   // $FlowFixMe[missing-local-annot]
-  const handleClick = ({metaKey}) => {
-    if (id !== null) {
+  const handleClick = ({metaKey, button}) => {
+    if (id !== null && button === 0) {
       logEvent({
         event_name: 'select-element',
         metadata: {source: 'click-element'},

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

@@ -16,14 +16,15 @@
 
 .TreeWrapper {
   border-top: 1px solid var(--color-border);
-  flex: 1 1 var(--horizontal-resize-tree-percentage);
+  flex: 1 1 65%;
   display: flex;
   flex-direction: row;
   height: 100%;
+  overflow: auto;
 }
 
 .InspectedElementWrapper {
-  flex: 1 1 35%;
+  flex: 0 0 calc(100% - var(--horizontal-resize-tree-percentage));
   overflow-x: hidden;
   overflow-y: auto;
 }
@@ -59,12 +60,12 @@
 
   .TreeWrapper {
     border-top: 1px solid var(--color-border);
-    flex: 1 1 var(--vertical-resize-tree-percentage);
+    flex: 1 1 50%;
     overflow: hidden;
   }
 
   .InspectedElementWrapper {
-    flex: 1 1 50%;
+    flex: 0 0 calc(100% - var(--vertical-resize-tree-percentage));
   }
 
   .TreeWrapper + .ResizeBarWrapper .ResizeBar {

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

@@ -2,13 +2,18 @@
   width: 100%;
   display: flex;
   flex-direction: row;
-  padding: 0 0.25rem;
+  padding: 0.25rem;
 }
 
 .SuspenseTimelineInput {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  /* 
+   * `overflow: auto` will add scrollbars but the input will not actually grow beyond visible content.
+   * `overflow: hidden` will constrain the input to its visible content.
+   */
+  overflow: hidden;
 }
 
 .SuspenseTimelineRootSwitcher {
@@ -16,20 +21,6 @@
   max-width: 3rem;
 }
 
-.SuspenseTimelineMarkers {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+.SuspenseTimelineProgressIndicator {
+  align-self: center;
 }
-
-.SuspenseTimelineMarkers > * {
-  flex: 1 1 0;
-  overflow: visible;
-  visibility: hidden;
-  width: 0
-}
-
-.SuspenseTimelineActiveMarker {
-  visibility: visible;
-}
-

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

@@ -11,14 +11,7 @@ import type {Element, SuspenseNode} from '../../../frontend/types';
 import type Store from '../../store';
 
 import * as React from 'react';
-import {
-  useContext,
-  useId,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import {useContext, useLayoutEffect, useMemo, useRef, useState} from 'react';
 import {BridgeContext, StoreContext} from '../context';
 import {TreeDispatcherContext} from '../Components/TreeContext';
 import {useHighlightHostInstance} from '../hooks';
@@ -112,30 +105,6 @@ function SuspenseTimelineInput({rootID}: {rootID: Element['id'] | void}) {
     setValue(max);
   }
 
-  const markersID = useId();
-  const markers: React.Node[] = useMemo(() => {
-    return timeline.map((suspense, index) => {
-      const takesUpSpace =
-        suspense.rects !== null &&
-        suspense.rects.some(rect => {
-          return rect.width > 0 && rect.height > 0;
-        });
-
-      return takesUpSpace ? (
-        <option
-          key={suspense.id}
-          className={
-            index === value ? styles.SuspenseTimelineActiveMarker : undefined
-          }
-          value={index}>
-          #{index + 1}
-        </option>
-      ) : (
-        <option key={suspense.id} />
-      );
-    });
-  }, [timeline, value]);
-
   if (rootID === undefined) {
     return <div className={styles.SuspenseTimelineInput}>Root not found.</div>;
   }
@@ -219,25 +188,26 @@ function SuspenseTimelineInput({rootID}: {rootID: Element['id'] | void}) {
   }
 
   return (
-    <div className={styles.SuspenseTimelineInput}>
-      <input
-        className={styles.SuspenseTimelineSlider}
-        type="range"
-        min={min}
-        max={max}
-        list={markersID}
-        value={value}
-        onBlur={handleBlur}
-        onChange={handleChange}
-        onFocus={handleFocus}
-        onPointerMove={handlePointerMove}
-        onPointerUp={clearHighlightHostInstance}
-        ref={inputRef}
-      />
-      <datalist id={markersID} className={styles.SuspenseTimelineMarkers}>
-        {markers}
-      </datalist>
-    </div>
+    <>
+      <div>
+        {value}/{max}
+      </div>
+      <div className={styles.SuspenseTimelineInput}>
+        <input
+          className={styles.SuspenseTimelineSlider}
+          type="range"
+          min={min}
+          max={max}
+          value={value}
+          onBlur={handleBlur}
+          onChange={handleChange}
+          onFocus={handleFocus}
+          onPointerMove={handlePointerMove}
+          onPointerUp={clearHighlightHostInstance}
+          ref={inputRef}
+        />
+      </div>
+    </>
   );
 }
 

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

@@ -10,5 +10,5 @@
 import * as React from 'react';
 
 export default function SuspenseTreeList(_: {}): React$Node {
-  return <div>Activity slices</div>;
+  return <div>Activity slices not implemented yet</div>;
 }

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js

@@ -2846,4 +2846,64 @@ describe('ReactFlightDOMBrowser', () => {
 
     expect(container.innerHTML).toBe('<p>Hi</p>');
   });
+
+  it('should not have missing key warnings when a static child is blocked on debug info', async () => {
+    const ClientComponent = clientExports(function ClientComponent({element}) {
+      return (
+        <div>
+          <span>Hi</span>
+          {element}
+        </div>
+      );
+    });
+
+    let debugReadableStreamController;
+
+    const debugReadableStream = new ReadableStream({
+      start(controller) {
+        debugReadableStreamController = controller;
+      },
+    });
+
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        <ClientComponent element={<span>Sebbie</span>} />,
+        webpackMap,
+        {
+          debugChannel: {
+            writable: new WritableStream({
+              write(chunk) {
+                debugReadableStreamController.enqueue(chunk);
+              },
+              close() {
+                debugReadableStreamController.close();
+              },
+            }),
+          },
+        },
+      ),
+    );
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(stream, {
+      debugChannel: {readable: createDelayedStream(debugReadableStream)},
+    });
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<ClientRoot response={response} />);
+    });
+
+    // Wait for the debug info to be processed.
+    await act(() => {});
+
+    expect(container.innerHTML).toBe(
+      '<div><span>Hi</span><span>Sebbie</span></div>',
+    );
+  });
 });

packages/react/src/ReactLazy.js

@@ -59,7 +59,10 @@ export type LazyComponent<T, P> = {
   $$typeof: symbol | number,
   _payload: P,
   _init: (payload: P) => T,
+
+  // __DEV__
   _debugInfo?: null | ReactDebugInfo,
+  _store?: {validated: 0 | 1 | 2, ...}, // 0: not validated, 1: validated, 2: force fail
 };
 
 function lazyInitializer<T>(payload: Payload<T>): T {

packages/react/src/jsx/ReactJSXElement.js

@@ -804,6 +804,14 @@ function validateChildKeys(node) {
       if (node._store) {
         node._store.validated = 1;
       }
+    } else if (isLazyType(node)) {
+      if (node._payload.status === 'fulfilled') {
+        if (isValidElement(node._payload.value) && node._payload.value._store) {
+          node._payload.value._store.validated = 1;
+        }
+      } else if (node._store) {
+        node._store.validated = 1;
+      }
     }
   }
 }
@@ -822,3 +830,11 @@ export function isValidElement(object) {
     object.$$typeof === REACT_ELEMENT_TYPE
   );
 }
+
+export function isLazyType(object) {
+  return (
+    typeof object === 'object' &&
+    object !== null &&
+    object.$$typeof === REACT_LAZY_TYPE
+  );
+}