From 1fd291d3c5e21953d92228b0f35d4f932170317f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Fri, 26 Sep 2025 09:43:00 -0400
Subject: [PATCH 1/5] [DevTools] Disable the tree list for now (#34606)

When there are no named Activities we should hide the tree side panel
(and the button to show it). Since it's not implemented yet there are
never any ones so it's always hidden.
---
 .../devtools/views/SuspenseTab/SuspenseTab.js | 41 ++++++++++++-------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js
index 64ad391dd94d1..8c93cf968a2ac 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js
@@ -117,6 +117,11 @@ function SuspenseTab(_: {}) {
     initLayoutState,
   );
 
+  // 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. 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);
   const resizeTreeListRef = useRef<null | HTMLElement>(null);
@@ -290,23 +295,31 @@ function SuspenseTab(_: {}) {
   return (
     <div className={styles.SuspenseTab} ref={wrapperTreeRef}>
       <div className={styles.TreeWrapper} ref={resizeTreeRef}>
-        <div
-          className={styles.TreeList}
-          hidden={treeListHidden}
-          ref={resizeTreeListRef}>
-          <SuspenseTreeList />
-        </div>
-        <div className={styles.ResizeBarWrapper} hidden={treeListHidden}>
+        {treeListDisabled ? null : (
           <div
-            onPointerDown={onResizeStart}
-            onPointerMove={onResizeTreeList}
-            onPointerUp={onResizeEnd}
-            className={styles.ResizeBar}
-          />
-        </div>
+            className={styles.TreeList}
+            hidden={treeListHidden}
+            ref={resizeTreeListRef}>
+            <SuspenseTreeList />
+          </div>
+        )}
+        {treeListDisabled ? null : (
+          <div className={styles.ResizeBarWrapper} hidden={treeListHidden}>
+            <div
+              onPointerDown={onResizeStart}
+              onPointerMove={onResizeTreeList}
+              onPointerUp={onResizeEnd}
+              className={styles.ResizeBar}
+            />
+          </div>
+        )}
         <div className={styles.TreeView}>
           <div className={styles.SuspenseTreeViewHeader}>
-            <ToggleTreeList dispatch={dispatch} state={state} />
+            {treeListDisabled ? (
+              <div />
+            ) : (
+              <ToggleTreeList dispatch={dispatch} state={state} />
+            )}
             <div className={styles.SuspenseTreeViewHeaderMain}>
               <div className={styles.SuspenseTimeline}>
                 <SuspenseTimeline />

From 6a51a9fea6b5dc6c83f428b09b160a793cf92f15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Fri, 26 Sep 2025 09:43:38 -0400
Subject: [PATCH 2/5] [DevTools] Track Server Environment Names of Each
 SuspenseNode (#34605)

Tracks the environment names of the I/O in each SuspenseNode and sent it
to the front end when the suspenders change.

In the front end, every child boundary should really be treated as it
has all environment names of the parents too since they're blocked by
the parent too. We could do this tracking on backend but if there's ever
one added on the root would need to be send for every child.

This lets us highlight which subtrees are blocked by content on the
server.

---------

Co-authored-by: Sebastian "Sebbie" Silbermann <silbermann.sebastian@gmail.com>
---
 .../src/backend/fiber/renderer.js             | 53 ++++++++++++++++++-
 .../src/devtools/store.js                     | 21 +++++---
 .../views/Profiler/CommitTreeBuilder.js       | 20 ++++---
 packages/react-devtools-shared/src/utils.js   | 18 ++++---
 4 files changed, 92 insertions(+), 20 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js
index f2b6700163719..c03b657e60f86 100644
--- a/packages/react-devtools-shared/src/backend/fiber/renderer.js
+++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js
@@ -299,6 +299,7 @@ type SuspenseNode = {
   nextSibling: null | 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.
   // 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,
@@ -327,6 +328,7 @@ function createSuspenseNode(
     nextSibling: null,
     rects: null,
     suspendedBy: new Map(),
+    environments: new Map(),
     hasUniqueSuspenders: false,
     hasUnknownSuspenders: false,
   });
@@ -2220,6 +2222,10 @@ export function attach(
         }
         operations[i++] = fiberIdWithChanges;
         operations[i++] = suspense.hasUniqueSuspenders ? 1 : 0;
+        operations[i++] = suspense.environments.size;
+        suspense.environments.forEach((count, env) => {
+          operations[i++] = getStringID(env);
+        });
       });
     }
 
@@ -2725,6 +2731,13 @@ export function attach(
       return;
     }
 
+    // TODO: Just enqueue the operations here instead of stashing by id.
+
+    // Ensure each environment gets recorded in the string table since it is emitted
+    // before we loop it over again later during flush.
+    suspenseNode.environments.forEach((count, env) => {
+      getStringID(env);
+    });
     pendingSuspenderChanges.add(fiberInstance.id);
   }
 
@@ -2807,7 +2820,20 @@ export function attach(
     let suspendedBySet = suspenseNodeSuspendedBy.get(ioInfo);
     if (suspendedBySet === undefined) {
       suspendedBySet = new Set();
-      suspenseNodeSuspendedBy.set(asyncInfo.awaited, suspendedBySet);
+      suspenseNodeSuspendedBy.set(ioInfo, suspendedBySet);
+      // We've added a dependency. We must increment the ref count of the environment.
+      const env = ioInfo.env;
+      if (env != null) {
+        const environmentCounts = parentSuspenseNode.environments;
+        const count = environmentCounts.get(env);
+        if (count === undefined || count === 0) {
+          environmentCounts.set(env, 1);
+          // We've discovered a new environment for this SuspenseNode. We'll to update the node.
+          recordSuspenseSuspenders(parentSuspenseNode);
+        } else {
+          environmentCounts.set(env, count + 1);
+        }
+      }
     }
     // The child of the Suspense boundary that was suspended on this, or null if suspended at the root.
     // This is used to keep track of how many dependents are still alive and also to get information
@@ -2897,6 +2923,7 @@ export function attach(
         : instance.suspenseNode;
     if (previousSuspendedBy !== null && suspenseNode !== null) {
       const nextSuspendedBy = instance.suspendedBy;
+      let changedEnvironment = false;
       for (let i = 0; i < previousSuspendedBy.length; i++) {
         const asyncInfo = previousSuspendedBy[i];
         if (
@@ -2935,7 +2962,26 @@ export function attach(
             }
           }
           if (suspendedBySet !== undefined && suspendedBySet.size === 0) {
-            suspenseNode.suspendedBy.delete(asyncInfo.awaited);
+            suspenseNode.suspendedBy.delete(ioInfo);
+            // Successfully removed all dependencies. We can decrement the ref count of the environment.
+            const env = ioInfo.env;
+            if (env != null) {
+              const environmentCounts = suspenseNode.environments;
+              const count = environmentCounts.get(env);
+              if (count === undefined || count === 0) {
+                throw new Error(
+                  'We are removing an environment but it was not in the set. ' +
+                    'This is a bug in React.',
+                );
+              }
+              if (count === 1) {
+                environmentCounts.delete(env);
+                // Last one. We've now change the set of environments. We'll need to update the node.
+                changedEnvironment = true;
+              } else {
+                environmentCounts.set(env, count - 1);
+              }
+            }
           }
           if (
             suspenseNode.hasUniqueSuspenders &&
@@ -2948,6 +2994,9 @@ export function attach(
           }
         }
       }
+      if (changedEnvironment) {
+        recordSuspenseSuspenders(suspenseNode);
+      }
     }
   }
 
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index 79e6957aecfe4..6ffbb52d94e8e 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -1759,12 +1759,22 @@ export default class Store extends EventEmitter<{
           break;
         }
         case SUSPENSE_TREE_OPERATION_SUSPENDERS: {
-          const changeLength = operations[i + 1];
-          i += 2;
+          i++;
+          const changeLength = operations[i++];
 
           for (let changeIndex = 0; changeIndex < changeLength; changeIndex++) {
-            const id = operations[i];
-            const hasUniqueSuspenders = operations[i + 1] === 1;
+            const id = operations[i++];
+            const hasUniqueSuspenders = operations[i++] === 1;
+            const environmentNamesLength = operations[i++];
+            const environmentNames = [];
+            for (
+              let envIndex = 0;
+              envIndex < environmentNamesLength;
+              envIndex++
+            ) {
+              const environmentNameStringID = operations[i++];
+              environmentNames.push(stringTable[environmentNameStringID]);
+            }
             const suspense = this._idToSuspense.get(id);
 
             if (suspense === undefined) {
@@ -1777,8 +1787,6 @@ export default class Store extends EventEmitter<{
               break;
             }
 
-            i += 2;
-
             if (__DEBUG__) {
               const previousHasUniqueSuspenders = suspense.hasUniqueSuspenders;
               debug(
@@ -1788,6 +1796,7 @@ export default class Store extends EventEmitter<{
             }
 
             suspense.hasUniqueSuspenders = hasUniqueSuspenders;
+            // TODO: Recompute the environment names.
           }
 
           hasSuspenseTreeChanged = true;
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
index 5637967a6abb2..9e928b0231985 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -454,14 +454,22 @@ function updateTree(
       }
 
       case SUSPENSE_TREE_OPERATION_SUSPENDERS: {
-        const changesLength = ((operations[i + 1]: any): number);
-
-        if (__DEBUG__) {
-          const changes = operations.slice(i + 2, i + 2 + changesLength * 2);
-          debug('Suspender changes', `[${changes.join(',')}]`);
+        i++;
+        const changeLength = ((operations[i++]: any): number);
+
+        for (let changeIndex = 0; changeIndex < changeLength; changeIndex++) {
+          const suspenseNodeId = operations[i++];
+          const hasUniqueSuspenders = operations[i++] === 1;
+          const environmentNamesLength = operations[i++];
+          i += environmentNamesLength;
+          if (__DEBUG__) {
+            debug(
+              'Suspender changes',
+              `Suspense node ${suspenseNodeId} unique suspenders set to ${String(hasUniqueSuspenders)} with ${String(environmentNamesLength)} environments`,
+            );
+          }
         }
 
-        i += 2 + changesLength * 2;
         break;
       }
 
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index 7e256febea013..bc8e7684505f4 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -426,12 +426,18 @@ export function printOperationsArray(operations: Array<number>) {
         break;
       }
       case SUSPENSE_TREE_OPERATION_SUSPENDERS: {
-        const changeLength = operations[i + 1];
-        i += 2;
-        const changes = operations.slice(i, i + changeLength * 2);
-        i += changeLength;
-
-        logs.push(`Suspense node suspender changes ${changes.join(',')}`);
+        i++;
+        const changeLength = ((operations[i++]: any): number);
+
+        for (let changeIndex = 0; changeIndex < changeLength; changeIndex++) {
+          const id = operations[i++];
+          const hasUniqueSuspenders = operations[i++] === 1;
+          const environmentNamesLength = operations[i++];
+          i += environmentNamesLength;
+          logs.push(
+            `Suspense node ${id} unique suspenders set to ${String(hasUniqueSuspenders)} with ${String(environmentNamesLength)} environments`,
+          );
+        }
 
         break;
       }

From 8d557a638ef8caf9bddfc6c7541b58b8b59259f9 Mon Sep 17 00:00:00 2001
From: "Sebastian \"Sebbie\" Silbermann" <sebastian.silbermann@vercel.com>
Date: Fri, 26 Sep 2025 17:29:15 +0200
Subject: [PATCH 3/5] [DevTools] Only show Suspense rects matching
 "unique-suspenders-only" filter (#34607)

---
 .../views/SuspenseTab/SuspenseRects.css       |  9 +++
 .../views/SuspenseTab/SuspenseRects.js        | 14 ++++-
 .../src/app/SuspenseTree/index.js             | 58 ++++++++++++++++---
 3 files changed, 71 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css
index 7e74f21eef08c..7ad31524968e8 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css
@@ -19,6 +19,10 @@
    overflow: hidden;
 }
 
+.SuspenseRectsScaledRect[data-visible='false'] > .SuspenseRectsBoundaryChildren {
+  overflow: initial;
+}
+
 .SuspenseRectsRect {
   box-shadow: var(--elevation-4);
   pointer-events: all;
@@ -31,6 +35,11 @@
   outline-color: var(--color-background-selected);
 }
 
+.SuspenseRectsScaledRect[data-visible='false'] {
+  pointer-events: none;
+  outline-width: 0;
+}
+
 /* highlight this boundary */
 .SuspenseRectsBoundary:hover:not(:has(.SuspenseRectsBoundary:hover)) > .SuspenseRectsRect, .SuspenseRectsBoundary[data-highlighted='true'] > .SuspenseRectsRect {
     background-color: var(--color-background-hover);
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js
index 39c6f1c492517..5dac93a182c1c 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js
@@ -34,10 +34,12 @@ import {
 function ScaledRect({
   className,
   rect,
+  visible,
   ...props
 }: {
   className: string,
   rect: Rect,
+  visible: boolean,
   ...
 }): React$Node {
   const viewBox = useContext(ViewBox);
@@ -50,6 +52,7 @@ function ScaledRect({
     <div
       {...props}
       className={styles.SuspenseRectsScaledRect + ' ' + className}
+      data-visible={visible}
       style={{
         width,
         height,
@@ -68,6 +71,7 @@ function SuspenseRects({
   const store = useContext(StoreContext);
   const treeDispatch = useContext(TreeDispatcherContext);
   const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);
+  const {uniqueSuspendersOnly} = useContext(SuspenseTreeStateContext);
 
   const {inspectedElementID} = useContext(TreeStateContext);
 
@@ -79,6 +83,7 @@ function SuspenseRects({
     // getSuspenseByID will have already warned
     return null;
   }
+  const visible = suspense.hasUniqueSuspenders || !uniqueSuspendersOnly;
 
   function handleClick(event: SyntheticMouseEvent) {
     if (event.defaultPrevented) {
@@ -117,9 +122,13 @@ function SuspenseRects({
   const boundingBox = getBoundingBox(suspense.rects);
 
   return (
-    <ScaledRect rect={boundingBox} className={styles.SuspenseRectsBoundary}>
+    <ScaledRect
+      rect={boundingBox}
+      className={styles.SuspenseRectsBoundary}
+      visible={visible}>
       <ViewBox.Provider value={boundingBox}>
-        {suspense.rects !== null &&
+        {visible &&
+          suspense.rects !== null &&
           suspense.rects.map((rect, index) => {
             return (
               <ScaledRect
@@ -245,6 +254,7 @@ function SuspenseRectsContainer(): React$Node {
   // TODO: This relies on a full re-render of all children when the Suspense tree changes.
   const {roots} = useContext(SuspenseTreeStateContext);
 
+  // TODO: bbox does not consider uniqueSuspendersOnly filter
   const boundingBox = getDocumentBoundingRect(store, roots);
 
   const boundingBoxWidth = boundingBox.width;
diff --git a/packages/react-devtools-shell/src/app/SuspenseTree/index.js b/packages/react-devtools-shell/src/app/SuspenseTree/index.js
index c18a6315a6e71..ff0b0ce294225 100644
--- a/packages/react-devtools-shell/src/app/SuspenseTree/index.js
+++ b/packages/react-devtools-shell/src/app/SuspenseTree/index.js
@@ -184,8 +184,12 @@ function EmptySuspense() {
 // $FlowFixMe[missing-local-annot]
 function PrimaryFallbackTest({initialSuspend}) {
   const [suspend, setSuspend] = useState(initialSuspend);
-  const fallbackStep = useTestSequence('fallback', Fallback1, Fallback2);
-  const primaryStep = useTestSequence('primary', Primary1, Primary2);
+  const [fallbackStepIndex, fallbackStep] = useTestSequence(
+    'fallback',
+    Fallback1,
+    Fallback2,
+  );
+  const [, primaryStep] = useTestSequence('primary', Primary1, Primary2);
   return (
     <Fragment>
       <label>
@@ -198,7 +202,11 @@ function PrimaryFallbackTest({initialSuspend}) {
       </label>
       <br />
       <Suspense fallback={fallbackStep}>
-        {suspend ? <Never /> : primaryStep}
+        {suspend ? (
+          <Never id={`primary-fallback-test-${fallbackStepIndex}`} />
+        ) : (
+          primaryStep
+        )}
       </Suspense>
     </Fragment>
   );
@@ -227,7 +235,7 @@ function useTestSequence(label: string, T1: any => any, T2: any => any) {
       {next} <T2 prop={step}>goodbye</T2>
     </Fragment>,
   ];
-  return allSteps[step];
+  return [step, allSteps[step]];
 }
 
 function NestedSuspenseTest() {
@@ -252,7 +260,7 @@ function Parent() {
       </Suspense>
       <br />
       <Suspense fallback={<Fallback1>This will never load</Fallback1>}>
-        <Never />
+        <Never id="parent-never" />
       </Suspense>
       <br />
       <b>
@@ -298,14 +306,48 @@ function LoadLater() {
           Loaded! Click to suspend again.
         </Primary1>
       ) : (
-        <Never />
+        <Never id="load-later" />
       )}
     </Suspense>
   );
 }
 
-function Never() {
-  throw new Promise(resolve => {});
+function readRecord(promise: any): any {
+  if (typeof React.use === 'function') {
+    return React.use(promise);
+  }
+  switch (promise.status) {
+    case 'pending':
+      throw promise;
+    case 'rejected':
+      throw promise.reason;
+    case 'fulfilled':
+      return promise.value;
+    default:
+      promise.status = 'pending';
+      promise.then(
+        value => {
+          promise.status = 'fulfilled';
+          promise.value = value;
+        },
+        reason => {
+          promise.status = 'rejected';
+          promise.reason = reason;
+        },
+      );
+      throw promise;
+  }
+}
+
+const nevers = new Map<string, Promise<empty>>();
+function Never({id}: {id: string}) {
+  let promise = nevers.get(id);
+  if (!promise) {
+    promise = new Promise(() => {});
+    (promise as any).displayName = id;
+    nevers.set(id, promise);
+  }
+  readRecord(promise);
 }
 
 function Fallback1({prop, ...rest}: any) {

From 8bb7241f4c773376893701bfe8b8ff03687342a0 Mon Sep 17 00:00:00 2001
From: Jack Pope <jackpope1@gmail.com>
Date: Fri, 26 Sep 2025 11:51:30 -0400
Subject: [PATCH 4/5] Bump useEffectEvent to Canary (#34610)

Bumps `useEffectEvent` from `@experimental` to `@canary`. Removes the
`experimental_` prefix from the export.

## TODO
- [ ] Update useEffectEvent reference page and Canary badging in docs:
https://github.com/reactjs/react.dev/pull/8025
---
 .../react-dom/src/__tests__/ReactDOMFizzServer-test.js    | 8 ++++----
 .../react-reconciler/src/__tests__/useEffectEvent-test.js | 2 +-
 packages/react/index.development.js                       | 2 +-
 packages/react/index.experimental.development.js          | 2 +-
 packages/react/index.experimental.js                      | 2 +-
 packages/react/index.fb.js                                | 3 ++-
 packages/react/index.js                                   | 2 +-
 packages/react/index.stable.development.js                | 1 +
 packages/react/index.stable.js                            | 1 +
 packages/react/src/ReactClient.js                         | 2 +-
 10 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 8442fa3c1316d..d9b604c17507f 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -6514,7 +6514,7 @@ describe('ReactDOMFizzServer', () => {
       const ref = React.createRef();
       function App() {
         const [count, setCount] = React.useState(0);
-        const onClick = React.experimental_useEffectEvent(() => {
+        const onClick = React.useEffectEvent(() => {
           setCount(c => c + 1);
         });
         return (
@@ -6544,7 +6544,7 @@ describe('ReactDOMFizzServer', () => {
     it('throws if useEffectEvent is called during a server render', async () => {
       const logs = [];
       function App() {
-        const onRender = React.experimental_useEffectEvent(() => {
+        const onRender = React.useEffectEvent(() => {
           logs.push('rendered');
         });
         onRender();
@@ -6575,8 +6575,8 @@ describe('ReactDOMFizzServer', () => {
     // @gate enableUseEffectEventHook
     it('does not guarantee useEffectEvent return values during server rendering are distinct', async () => {
       function App() {
-        const onClick1 = React.experimental_useEffectEvent(() => {});
-        const onClick2 = React.experimental_useEffectEvent(() => {});
+        const onClick1 = React.useEffectEvent(() => {});
+        const onClick2 = React.useEffectEvent(() => {});
         if (onClick1 === onClick2) {
           return <div />;
         } else {
diff --git a/packages/react-reconciler/src/__tests__/useEffectEvent-test.js b/packages/react-reconciler/src/__tests__/useEffectEvent-test.js
index aa7adcd04ef68..17b8d6d421f77 100644
--- a/packages/react-reconciler/src/__tests__/useEffectEvent-test.js
+++ b/packages/react-reconciler/src/__tests__/useEffectEvent-test.js
@@ -37,7 +37,7 @@ describe('useEffectEvent', () => {
     createContext = React.createContext;
     useContext = React.useContext;
     useState = React.useState;
-    useEffectEvent = React.experimental_useEffectEvent;
+    useEffectEvent = React.useEffectEvent;
     useEffect = React.useEffect;
     useLayoutEffect = React.useLayoutEffect;
     useMemo = React.useMemo;
diff --git a/packages/react/index.development.js b/packages/react/index.development.js
index b3c3752ab0f2a..a2ec28574333b 100644
--- a/packages/react/index.development.js
+++ b/packages/react/index.development.js
@@ -56,7 +56,7 @@ export {
   useDebugValue,
   useDeferredValue,
   useEffect,
-  experimental_useEffectEvent,
+  useEffectEvent,
   useImperativeHandle,
   useInsertionEffect,
   useLayoutEffect,
diff --git a/packages/react/index.experimental.development.js b/packages/react/index.experimental.development.js
index 6bf0b8a6bb78c..211f1c5dfb419 100644
--- a/packages/react/index.experimental.development.js
+++ b/packages/react/index.experimental.development.js
@@ -43,7 +43,7 @@ export {
   useDebugValue,
   useDeferredValue,
   useEffect,
-  experimental_useEffectEvent,
+  useEffectEvent,
   useImperativeHandle,
   useInsertionEffect,
   useLayoutEffect,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index a251b03949292..0330dde744ca0 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -44,7 +44,7 @@ export {
   useDebugValue,
   useDeferredValue,
   useEffect,
-  experimental_useEffectEvent,
+  useEffectEvent,
   useImperativeHandle,
   useInsertionEffect,
   useLayoutEffect,
diff --git a/packages/react/index.fb.js b/packages/react/index.fb.js
index 3dba103e89d28..10e2ca4b90c0c 100644
--- a/packages/react/index.fb.js
+++ b/packages/react/index.fb.js
@@ -21,7 +21,8 @@ export {
   createContext,
   createElement,
   createRef,
-  experimental_useEffectEvent,
+  useEffectEvent as experimental_useEffectEvent,
+  useEffectEvent,
   forwardRef,
   Fragment,
   isValidElement,
diff --git a/packages/react/index.js b/packages/react/index.js
index aee4ac263de2d..804853b3319ba 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -58,7 +58,7 @@ export {
   useDebugValue,
   useDeferredValue,
   useEffect,
-  experimental_useEffectEvent,
+  useEffectEvent,
   useImperativeHandle,
   useInsertionEffect,
   useLayoutEffect,
diff --git a/packages/react/index.stable.development.js b/packages/react/index.stable.development.js
index d8b561541cb0f..29df69ff3f863 100644
--- a/packages/react/index.stable.development.js
+++ b/packages/react/index.stable.development.js
@@ -37,6 +37,7 @@ export {
   useDebugValue,
   useDeferredValue,
   useEffect,
+  useEffectEvent,
   useImperativeHandle,
   useInsertionEffect,
   useLayoutEffect,
diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js
index 70b24eb0b2408..76edd14e05be3 100644
--- a/packages/react/index.stable.js
+++ b/packages/react/index.stable.js
@@ -37,6 +37,7 @@ export {
   useDebugValue,
   useDeferredValue,
   useEffect,
+  useEffectEvent,
   useImperativeHandle,
   useInsertionEffect,
   useLayoutEffect,
diff --git a/packages/react/src/ReactClient.js b/packages/react/src/ReactClient.js
index 12c3b6c4abf40..b505dc49fca40 100644
--- a/packages/react/src/ReactClient.js
+++ b/packages/react/src/ReactClient.js
@@ -88,7 +88,7 @@ export {
   useCallback,
   useContext,
   useEffect,
-  useEffectEvent as experimental_useEffectEvent,
+  useEffectEvent,
   useImperativeHandle,
   useDebugValue,
   useInsertionEffect,

From df38ac9a3b9a5ea43c1d07c00d090a448acfd56c Mon Sep 17 00:00:00 2001
From: "Sebastian \"Sebbie\" Silbermann" <sebastian.silbermann@vercel.com>
Date: Fri, 26 Sep 2025 18:53:12 +0200
Subject: [PATCH 5/5] Ensure `useEffectEvent` implementation is available in
 Canary (#34614)

---
 packages/shared/ReactFeatureFlags.js                            | 2 +-
 packages/shared/forks/ReactFeatureFlags.native-fb.js            | 2 +-
 packages/shared/forks/ReactFeatureFlags.native-oss.js           | 2 +-
 packages/shared/forks/ReactFeatureFlags.test-renderer.js        | 2 +-
 .../shared/forks/ReactFeatureFlags.test-renderer.native-fb.js   | 2 +-
 packages/shared/forks/ReactFeatureFlags.test-renderer.www.js    | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index add44f786e18e..f29ee68d7411b 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -118,7 +118,7 @@ export const enableCPUSuspense = __EXPERIMENTAL__;
 // Test this at Meta before enabling.
 export const enableNoCloningMemoCache: boolean = false;
 
-export const enableUseEffectEventHook = __EXPERIMENTAL__;
+export const enableUseEffectEventHook: boolean = true;
 
 // Test in www before enabling in open source.
 // Enables DOM-server to stream its instruction set as data-attributes
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 83410ee5ce695..409b10d0b2db7 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -65,7 +65,7 @@ export const enableTaint: boolean = true;
 export const enableTransitionTracing: boolean = false;
 export const enableTrustedTypesIntegration: boolean = false;
 export const enableUpdaterTracking: boolean = __PROFILE__;
-export const enableUseEffectEventHook: boolean = false;
+export const enableUseEffectEventHook: boolean = true;
 export const retryLaneExpirationMs = 5000;
 export const syncLaneExpirationMs = 250;
 export const transitionLaneExpirationMs = 5000;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 3cae738acd49d..fbef31b026e6f 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -51,7 +51,7 @@ export const enableSuspenseCallback: boolean = false;
 export const enableTaint: boolean = true;
 export const enableTransitionTracing: boolean = false;
 export const enableTrustedTypesIntegration: boolean = false;
-export const enableUseEffectEventHook: boolean = false;
+export const enableUseEffectEventHook: boolean = true;
 export const passChildrenWhenCloningPersistedNodes: boolean = false;
 export const renameElementSymbol: boolean = true;
 export const retryLaneExpirationMs = 5000;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 0f62f7b92ced2..eb02b6a1807a1 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -32,7 +32,7 @@ export const disableTextareaChildren: boolean = false;
 export const enableSuspenseAvoidThisFallback: boolean = false;
 export const enableCPUSuspense: boolean = false;
 export const enableNoCloningMemoCache: boolean = false;
-export const enableUseEffectEventHook: boolean = false;
+export const enableUseEffectEventHook: boolean = true;
 export const enableLegacyFBSupport: boolean = false;
 export const enableMoveBefore: boolean = false;
 export const enableHiddenSubtreeInsertionEffectCleanup: boolean = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js
index ad89e9b9b1aec..768ab592d2c50 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js
@@ -50,7 +50,7 @@ export const enableTaint = true;
 export const enableTransitionTracing = false;
 export const enableTrustedTypesIntegration = false;
 export const enableUpdaterTracking = false;
-export const enableUseEffectEventHook = false;
+export const enableUseEffectEventHook = true;
 export const passChildrenWhenCloningPersistedNodes = false;
 export const renameElementSymbol = false;
 export const retryLaneExpirationMs = 5000;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 00c5d057eb34e..c0c788db52652 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -34,7 +34,7 @@ export const disableTextareaChildren: boolean = false;
 export const enableSuspenseAvoidThisFallback: boolean = true;
 export const enableCPUSuspense: boolean = false;
 export const enableNoCloningMemoCache: boolean = false;
-export const enableUseEffectEventHook: boolean = false;
+export const enableUseEffectEventHook: boolean = true;
 export const enableLegacyFBSupport: boolean = false;
 export const enableMoveBefore: boolean = false;
 export const enableHiddenSubtreeInsertionEffectCleanup: boolean = true;