Increaese the priority to user blocking for every next discrete boundary

Author: sebmarkbage

packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js

@@ -166,7 +166,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     container.innerHTML = finalHTML;
 
-    let span = container.getElementsByTagName('span')[3];
+    let spanD = container.getElementsByTagName('span')[3];
 
     suspend = true;
 
@@ -179,7 +179,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
     expect(Scheduler).toHaveYielded([]);
 
     // This click target cannot be hydrated yet because it's suspended.
-    let result = dispatchClickEvent(span);
+    let result = dispatchClickEvent(spanD);
 
     expect(Scheduler).toHaveYielded(['App']);
 
@@ -198,4 +198,96 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     document.body.removeChild(container);
   });
+
+  it('hydrates at higher pri for secondary discrete events', async () => {
+    let suspend = false;
+    let resolve;
+    let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+    function Child({text}) {
+      if ((text === 'A' || text === 'D') && suspend) {
+        throw promise;
+      }
+      Scheduler.unstable_yieldValue(text);
+      return (
+        <span
+          onClick={e => {
+            e.preventDefault();
+            Scheduler.unstable_yieldValue('Clicked ' + text);
+          }}>
+          {text}
+        </span>
+      );
+    }
+
+    function App() {
+      Scheduler.unstable_yieldValue('App');
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Child text="A" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child text="B" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child text="C" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child text="D" />
+          </Suspense>
+        </div>
+      );
+    }
+
+    let finalHTML = ReactDOMServer.renderToString(<App />);
+
+    expect(Scheduler).toHaveYielded(['App', 'A', 'B', 'C', 'D']);
+
+    let container = document.createElement('div');
+    // We need this to be in the document since we'll dispatch events on it.
+    document.body.appendChild(container);
+
+    container.innerHTML = finalHTML;
+
+    let spanA = container.getElementsByTagName('span')[0];
+    let spanC = container.getElementsByTagName('span')[2];
+    let spanD = container.getElementsByTagName('span')[3];
+
+    suspend = true;
+
+    // A and D will be suspended. We'll click on D which should take
+    // priority, after we unsuspend.
+    let root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    root.render(<App />);
+
+    // Nothing has been hydrated so far.
+    expect(Scheduler).toHaveYielded([]);
+
+    // This click target cannot be hydrated yet because the first is Suspended.
+    dispatchClickEvent(spanA);
+    dispatchClickEvent(spanC);
+    dispatchClickEvent(spanD);
+
+    expect(Scheduler).toHaveYielded(['App']);
+
+    suspend = false;
+    resolve();
+    await promise;
+
+    // After the click, we should prioritize D and the Click first,
+    // and only after that render A and C.
+    expect(Scheduler).toFlushAndYield([
+      'A',
+      'Clicked A',
+      'C',
+      'Clicked C',
+      'D',
+      'Clicked D',
+      // B should render last since it wasn't clicked.
+      'B',
+    ]);
+
+    document.body.removeChild(container);
+  });
 });

packages/react-dom/src/client/ReactDOM.js

@@ -40,7 +40,7 @@ import {
   flushPassiveEffects,
   IsThisRendererActing,
   attemptSynchronousHydration,
-  attemptHydration,
+  attemptUserBlockingHydration,
 } from 'react-reconciler/inline.dom';
 import {createPortal as createPortalImpl} from 'shared/ReactPortal';
 import {canUseDOM} from 'shared/ExecutionEnvironment';
@@ -78,7 +78,7 @@ import {restoreControlledState} from './ReactDOMComponent';
 import {dispatchEvent} from '../events/ReactDOMEventListener';
 import {
   setAttemptSynchronousHydration,
-  setAttemptHydration,
+  setAttemptUserBlockingHydration,
 } from '../events/ReactDOMEventReplaying';
 import {eagerlyTrapReplayableEvents} from '../events/ReactDOMEventReplaying';
 import {
@@ -90,7 +90,7 @@ import {
 import {ROOT_ATTRIBUTE_NAME} from '../shared/DOMProperty';
 
 setAttemptSynchronousHydration(attemptSynchronousHydration);
-setAttemptHydration(attemptHydration);
+setAttemptUserBlockingHydration(attemptUserBlockingHydration);
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 

packages/react-dom/src/events/ReactDOMEventReplaying.js

@@ -37,10 +37,10 @@ export function setAttemptSynchronousHydration(fn: (fiber: Object) => void) {
   attemptSynchronousHydration = fn;
 }
 
-let attemptHydration: (fiber: Object) => void;
+let attemptUserBlockingHydration: (fiber: Object) => void;
 
-export function setAttemptHydration(fn: (fiber: Object) => void) {
-  attemptHydration = fn;
+export function setAttemptUserBlockingHydration(fn: (fiber: Object) => void) {
+  attemptUserBlockingHydration = fn;
 }
 
 // TODO: Upgrade this definition once we're on a newer version of Flow that
@@ -442,6 +442,12 @@ function replayUnblockedEvents() {
     let nextDiscreteEvent = queuedDiscreteEvents[0];
     if (nextDiscreteEvent.blockedOn !== null) {
       // We're still blocked.
+      // Increase the priority of this boundary to unblock
+      // the next discrete event.
+      let fiber = getInstanceFromNode(nextDiscreteEvent.blockedOn);
+      if (fiber !== null) {
+        attemptUserBlockingHydration(fiber);
+      }
       break;
     }
     let nextBlockedOn = attemptToDispatchEvent(

packages/react-reconciler/src/ReactFiberReconciler.js

@@ -78,7 +78,7 @@ import {
   current as ReactCurrentFiberCurrent,
 } from './ReactCurrentFiber';
 import {StrictMode} from './ReactTypeOfMode';
-import {Sync} from './ReactFiberExpirationTime';
+import {Sync, computeInteractiveExpiration} from './ReactFiberExpirationTime';
 import {requestCurrentSuspenseConfig} from './ReactFiberSuspenseConfig';
 import {
   scheduleRefresh,
@@ -384,7 +384,8 @@ export function attemptSynchronousHydration(fiber: Fiber): void {
       // If we're still blocked after this, we need to increase
       // the priority of any promises resolving within this
       // boundary so that they next attempt also has higher pri.
-      markRetryTimeIfNotHydrated(fiber, Sync);
+      let retryExpTime = computeInteractiveExpiration(requestCurrentTime());
+      markRetryTimeIfNotHydrated(fiber, retryExpTime);
       break;
   }
 }
@@ -407,15 +408,17 @@ function markRetryTimeIfNotHydrated(fiber: Fiber, retryTime: ExpirationTime) {
   }
 }
 
-export function attemptHydration(fiber: Fiber): void {
+export function attemptUserBlockingHydration(fiber: Fiber): void {
   if (fiber.tag !== SuspenseComponent) {
     // We ignore HostRoots here because we can't increase
     // their priority and they should not suspend on I/O,
     // since you have to wrap anything that might suspend in
     // Suspense.
     return;
   }
-  // TODO
+  let expTime = computeInteractiveExpiration(requestCurrentTime());
+  scheduleWork(fiber, expTime);
+  markRetryTimeIfNotHydrated(fiber, expTime);
 }
 
 export {findHostInstance};