Fix ViewTransition null stateNode with SuspenseList

packages/react-dom/src/__tests__/ReactDOMViewTransition-test.js

@@ -0,0 +1,179 @@
+/**
+ * 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.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ReactDOMClient;
+let Suspense;
+let SuspenseList;
+let ViewTransition;
+let act;
+let assertLog;
+let Scheduler;
+let textCache;
+
+describe('ReactDOMViewTransition', () => {
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    assertLog = require('internal-test-utils').assertLog;
+    Suspense = React.Suspense;
+    ViewTransition = React.ViewTransition;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.unstable_SuspenseList;
+    }
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    textCache = new Map();
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  function resolveText(text) {
+    const record = textCache.get(text);
+    if (record === undefined) {
+      const newRecord = {
+        status: 'resolved',
+        value: text,
+      };
+      textCache.set(text, newRecord);
+    } else if (record.status === 'pending') {
+      const thenable = record.value;
+      record.status = 'resolved';
+      record.value = text;
+      thenable.pings.forEach(t => t());
+    }
+  }
+
+  function readText(text) {
+    const record = textCache.get(text);
+    if (record !== undefined) {
+      switch (record.status) {
+        case 'pending':
+          Scheduler.log(`Suspend! [${text}]`);
+          throw record.value;
+        case 'rejected':
+          throw record.value;
+        case 'resolved':
+          return record.value;
+      }
+    } else {
+      Scheduler.log(`Suspend! [${text}]`);
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.set(text, newRecord);
+
+      throw thenable;
+    }
+  }
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  function AsyncText({text}) {
+    readText(text);
+    Scheduler.log(text);
+    return text;
+  }
+
+  // @gate enableSuspenseList
+  it('handles ViewTransition wrapping Suspense inside SuspenseList', async () => {
+    function Card({id}) {
+      return (
+        <div>
+          <AsyncText text={`Card ${id}`} />
+        </div>
+      );
+    }
+
+    function CardSkeleton({n}) {
+      return <Text text={`Skeleton ${n}`} />;
+    }
+
+    function App() {
+      return (
+        <div>
+          <SuspenseList revealOrder="together">
+            <ViewTransition>
+              <Suspense fallback={<CardSkeleton n={1} />}>
+                <Card id={1} />
+              </Suspense>
+            </ViewTransition>
+            <ViewTransition>
+              <Suspense fallback={<CardSkeleton n={2} />}>
+                <Card id={2} />
+              </Suspense>
+            </ViewTransition>
+            <ViewTransition>
+              <Suspense fallback={<CardSkeleton n={3} />}>
+                <Card id={3} />
+              </Suspense>
+            </ViewTransition>
+          </SuspenseList>
+        </div>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+
+    // Initial render - all cards should suspend
+    await act(() => {
+      root.render(<App />);
+    });
+
+    assertLog([
+      'Suspend! [Card 1]',
+      'Skeleton 1',
+      'Suspend! [Card 2]',
+      'Skeleton 2',
+      'Suspend! [Card 3]',
+      'Skeleton 3',
+      'Skeleton 1',
+      'Skeleton 2',
+      'Skeleton 3',
+    ]);
+
+    await act(() => {
+      resolveText('Card 1');
+      resolveText('Card 2');
+      resolveText('Card 3');
+    });
+
+    assertLog(['Card 1', 'Card 2', 'Card 3']);
+
+    // All cards should be visible
+    expect(container.textContent).toContain('Card 1');
+    expect(container.textContent).toContain('Card 2');
+    expect(container.textContent).toContain('Card 3');
+  });
+});

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -46,6 +46,7 @@ import type {
 import type {UpdateQueue} from './ReactFiberClassUpdateQueue';
 import type {RootState} from './ReactFiberRoot';
 import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent';
+import type {ViewTransitionState} from './ReactFiberViewTransitionComponent';
 
 import {
   markComponentRenderStarted,
@@ -3566,6 +3567,18 @@ function updateViewTransition(
   workInProgress: Fiber,
   renderLanes: Lanes,
 ) {
+  if (workInProgress.stateNode === null) {
+    // We previously reset the work-in-progress.
+    // We need to create a new ViewTransitionState instance.
+    const instance: ViewTransitionState = {
+      autoName: null,
+      paired: null,
+      clones: null,
+      ref: null,
+    };
+    workInProgress.stateNode = instance;
+  }
+
   const pendingProps: ViewTransitionProps = workInProgress.pendingProps;
   if (pendingProps.name != null && pendingProps.name !== 'auto') {
     // Explicitly named boundary. We track it so that we can pair it up with another explicit