From f0fbb0d199c166a634084c66a7cf9486ebb64bc1 Mon Sep 17 00:00:00 2001
From: Josh Story
Date: Thu, 15 Jan 2026 17:27:58 -0800
Subject: [PATCH 1/6] [Fiber] fix useId tracking on replay (#35518)
When Fiber replays work after suspending and resolving in a microtask it
stripped the Forked flag from Fibers because this flag type was not
considered a Static flag. The Forked nature of a Fiber is not render
dependent and should persist after unwinding work. By making this change
the replay correctly generates the necessary tree context.
---
.../src/__tests__/ReactDOMFizzServer-test.js | 155 ++++++++++++++++++
.../react-reconciler/src/ReactFiberFlags.js | 5 +-
2 files changed, 158 insertions(+), 2 deletions(-)
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 32745e4b109..93a16411d9f 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -9478,4 +9478,159 @@ Unfortunately that previous paragraph wasn't quite long enough so I'll continue
,
);
});
+
+ it('useId is consistent for siblings when component suspends with nested lazy', async () => {
+ // Inner component uses useId
+ function InnerComponent() {
+ const id = React.useId();
+ Scheduler.log('InnerComponent id: ' + id);
+ return inner;
+ }
+
+ // Outer component uses useId and renders a lazy inner
+ function OuterComponent({innerElement}) {
+ const id = React.useId();
+ Scheduler.log('OuterComponent id: ' + id);
+ return {innerElement}
;
+ }
+
+ // This sibling also has useId - its ID must be consistent with server
+ function Sibling() {
+ const id = React.useId();
+ Scheduler.log('Sibling id: ' + id);
+ return sibling;
+ }
+
+ // Create fresh lazy components for SERVER (resolve immediately)
+ const serverLazyInner = React.lazy(async () => {
+ Scheduler.log('server lazy inner initializer');
+ return {default: };
+ });
+
+ const serverLazyOuter = React.lazy(async () => {
+ Scheduler.log('server lazy outer initializer');
+ return {
+ default: ,
+ };
+ });
+
+ // Server render with lazy (resolves immediately)
+ await act(() => {
+ const {pipe} = renderToPipeableStream(
+
+
+ <>{serverLazyOuter}
+ <>
+
+
+
+ ,
+ );
+ pipe(writable);
+ });
+
+ expect(getVisibleChildren(document)).toEqual(
+
+
+
+
+ inner
+
+ sibling
+
+ ,
+ );
+
+ assertLog([
+ 'server lazy outer initializer',
+ 'Sibling id: _R_2_',
+ 'OuterComponent id: _R_1_',
+ 'server lazy inner initializer',
+ 'InnerComponent id: _R_5_',
+ ]);
+
+ // Create fresh lazy components for CLIENT
+ let resolveClientInner;
+ const clientLazyInner = React.lazy(() => {
+ Scheduler.log('client lazy inner initializer');
+ const payload = {default: };
+ const promise = new Promise(r => {
+ resolveClientInner = () => {
+ promise.status = 'fulfilled';
+ promise.value = payload;
+ r(payload);
+ };
+ });
+ return promise;
+ });
+
+ let resolveClientOuter;
+ const clientLazyOuter = React.lazy(() => {
+ Scheduler.log('client lazy outer initializer');
+ const payload = {
+ default: ,
+ };
+ const promise = new Promise(r => {
+ resolveClientOuter = () => {
+ promise.status = 'fulfilled';
+ promise.value = payload;
+ r(payload);
+ };
+ });
+ return promise;
+ });
+
+ const hydrationErrors = [];
+
+ // Client hydrates with nested lazy components
+ let root;
+ React.startTransition(() => {
+ root = ReactDOMClient.hydrateRoot(
+ document,
+
+
+ <>{clientLazyOuter}
+ <>
+
+
+
+ ,
+ {
+ onRecoverableError(error) {
+ hydrationErrors.push(error.message);
+ },
+ },
+ );
+ });
+
+ // First suspension on outer lazy
+ await waitFor(['client lazy outer initializer']);
+ resolveClientOuter();
+
+ // Second suspension on inner lazy
+ await waitFor([
+ 'OuterComponent id: _R_1_',
+ 'client lazy inner initializer',
+ ]);
+ resolveClientInner();
+
+ await waitForAll(['InnerComponent id: _R_5_', 'Sibling id: _R_2_']);
+
+ // The IDs should match the server-generated IDs
+ expect(hydrationErrors).toEqual([]);
+
+ expect(getVisibleChildren(document)).toEqual(
+
+
+