diff --git a/fixtures/view-transition/src/components/Page.js b/fixtures/view-transition/src/components/Page.js
index fbaa9017171..6227e9ebc5f 100644
--- a/fixtures/view-transition/src/components/Page.js
+++ b/fixtures/view-transition/src/components/Page.js
@@ -171,17 +171,20 @@ export default function Page({url, navigate}) {
}}>
{!show ? 'A' + counter : 'B'}
- {show ? (
-
- {a}
- {b}
-
- ) : (
-
- {b}
- {a}
-
- )}
+ {
+ // Using url instead of renderedUrl here lets us only update this on commit.
+ url === '/?b' ? (
+
+ {a}
+ {b}
+
+ ) : (
+
+ {b}
+ {a}
+
+ )
+ }
{show ? (
hello{exclamation}
diff --git a/fixtures/view-transition/src/components/SwipeRecognizer.js b/fixtures/view-transition/src/components/SwipeRecognizer.js
index df4d743e1ba..6d628110237 100644
--- a/fixtures/view-transition/src/components/SwipeRecognizer.js
+++ b/fixtures/view-transition/src/components/SwipeRecognizer.js
@@ -114,16 +114,17 @@ export default function SwipeRecognizer({
);
}
function onGestureEnd(changed) {
- // Reset scroll
- if (changed) {
- // Trigger side-effects
- startTransition(action);
- }
+ // We cancel the gesture before invoking side-effects to allow the gesture lane to fully commit
+ // before scheduling new updates.
if (activeGesture.current !== null) {
const cancelGesture = activeGesture.current;
activeGesture.current = null;
cancelGesture();
}
+ if (changed) {
+ // Trigger side-effects
+ startTransition(action);
+ }
}
function onScrollEnd() {
if (touchTimeline.current) {
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 32745e4b109..7d4220460d9 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -9478,4 +9478,146 @@ 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(async () => {
+ Scheduler.log('client lazy inner initializer');
+ return new Promise(r => {
+ resolveClientInner = () => r({default: });
+ });
+ });
+
+ let resolveClientOuter;
+ const clientLazyOuter = React.lazy(async () => {
+ Scheduler.log('client lazy outer initializer');
+ return new Promise(r => {
+ resolveClientOuter = () =>
+ r({default: });
+ });
+ });
+
+ 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(
+
+
+