Delete server rendered content when props change before hydration completes

Author: sebmarkbage

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

@@ -190,4 +190,139 @@ describe('ReactDOMServerPartialHydration', () => {
 
     expect(container.firstChild.children[1].textContent).toBe('After');
   });
+
+  it('regenerates the content if props have changed before hydration completes', async () => {
+    let suspend = false;
+    let resolve;
+    let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    let ref = React.createRef();
+
+    function Child({text}) {
+      if (suspend) {
+        throw promise;
+      } else {
+        return text;
+      }
+    }
+
+    function App({text, className}) {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <span ref={ref} className={className}>
+              <Child text={text} />
+            </span>
+          </Suspense>
+        </div>
+      );
+    }
+
+    suspend = false;
+    let finalHTML = ReactDOMServer.renderToString(
+      <App text="Hello" className="hello" />,
+    );
+    let container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    let span = container.getElementsByTagName('span')[0];
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    let root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    root.render(<App text="Hello" className="hello" />);
+    jest.runAllTimers();
+
+    expect(ref.current).toBe(null);
+    expect(span.textContent).toBe('Hello');
+
+    // Render an update, which will be higher or the same priority as pinging the hydration.
+    root.render(<App text="Hi" className="hi" />);
+
+    // At the same time, resolving the promise so that rendering can complete.
+    suspend = false;
+    resolve();
+    await promise;
+
+    // Flushing both of these in the same batch won't be able to hydrate so we'll
+    // probably throw away the existing subtree.
+    jest.runAllTimers();
+
+    // Pick up the new span. In an ideal implementation this might be the same span
+    // but patched up. At the time of writing, this will be a new span though.
+    span = container.getElementsByTagName('span')[0];
+
+    // We should now have fully rendered with a ref on the new span.
+    expect(ref.current).toBe(span);
+    expect(span.textContent).toBe('Hi');
+    // If we ended up hydrating the existing content, we won't have properly
+    // patched up the tree, which might mean we haven't patched the className.
+    expect(span.className).toBe('hi');
+  });
+
+  it('shows the fallback if props have changed before hydration completes and is still suspended', async () => {
+    let suspend = false;
+    let resolve;
+    let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    let ref = React.createRef();
+
+    function Child({text}) {
+      if (suspend) {
+        throw promise;
+      } else {
+        return text;
+      }
+    }
+
+    function App({text, className}) {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <span ref={ref} className={className}>
+              <Child text={text} />
+            </span>
+          </Suspense>
+        </div>
+      );
+    }
+
+    suspend = false;
+    let finalHTML = ReactDOMServer.renderToString(
+      <App text="Hello" className="hello" />,
+    );
+    let container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    let root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    root.render(<App text="Hello" className="hello" />);
+    jest.runAllTimers();
+
+    expect(ref.current).toBe(null);
+
+    // Render an update, but leave it still suspended.
+    root.render(<App text="Hi" className="hi" />);
+
+    // Flushing now should delete the existing content and show the fallback.
+    jest.runAllTimers();
+
+    expect(container.getElementsByTagName('span').length).toBe(0);
+    expect(ref.current).toBe(null);
+    expect(container.textContent).toBe('Loading...');
+
+    // Unsuspending shows the content.
+    suspend = false;
+    resolve();
+    await promise;
+
+    jest.runAllTimers();
+
+    let span = container.getElementsByTagName('span')[0];
+    expect(span.textContent).toBe('Hi');
+    expect(span.className).toBe('hi');
+    expect(ref.current).toBe(span);
+    expect(container.textContent).toBe('Hi');
+  });
 });

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -44,6 +44,7 @@ import {
   DidCapture,
   Update,
   Ref,
+  Deletion,
 } from 'shared/ReactSideEffectTags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
@@ -1622,14 +1623,48 @@ function updateDehydratedSuspenseComponent(
     workInProgress.expirationTime = workInProgress.childExpirationTime = Never;
     return null;
   }
+  const prevProps = current.memoizedProps;
+  const nextProps = workInProgress.pendingProps;
+  if (prevProps !== nextProps) {
+    // This boundary has changed since the first render. This means that we are now unable to
+    // hydrate it. We might still be able to hydrate it using an earlier expiration time but
+    // during this render we can't. Instead, we're going to delete the whole subtree and
+    // instead inject a new real Suspense boundary to take its place, which may render content
+    // or fallback. The real Suspense boundary will suspend for a while so we have some time
+    // to ensure it can produce real content, but all state and pending events will be lost.
+
+    // Detach from the current dehydrated boundary.
+    current.alternate = null;
+    workInProgress.alternate = null;
+
+    // Insert a deletion in the effect list.
+    let returnFiber = workInProgress.return;
+    invariant(
+      returnFiber !== null,
+      'Suspense boundaries are never on the root. ' +
+        'This is probably a bug in React.',
+    );
+    const last = returnFiber.lastEffect;
+    if (last !== null) {
+      last.nextEffect = current;
+      returnFiber.lastEffect = current;
+    } else {
+      returnFiber.firstEffect = returnFiber.lastEffect = current;
+    }
+    current.nextEffect = null;
+    current.effectTag = Deletion;
+
+    // Upgrade this work in progress to a real Suspense component.
+    workInProgress.tag = SuspenseComponent;
+    workInProgress.stateNode = null;
+    workInProgress.memoizedState = null;
+    // This is now an insertion.
+    workInProgress.effectTag |= Placement;
+    // Retry as a real Suspense component.
+    return updateSuspenseComponent(null, workInProgress, renderExpirationTime);
+  }
   if ((workInProgress.effectTag & DidCapture) === NoEffect) {
     // This is the first attempt.
-    const prevProps = current.memoizedProps;
-    const nextProps = workInProgress.pendingProps;
-    if (prevProps !== nextProps) {
-      // TODO: Delete children and upgrade to a regular suspense component without
-      // hydrating.
-    }
     reenterHydrationStateFromDehydratedSuspenseInstance(workInProgress);
     const nextChildren = nextProps.children;
     workInProgress.child = mountChildFibers(