Flush event replaying at the end of the commit

Outside the Commit execution context and before passive effects.

Author: sebmarkbage

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -99,7 +99,10 @@ import {
   DOCUMENT_FRAGMENT_NODE,
 } from './HTMLNodeType';
 
-import {retryIfBlockedOn} from '../events/ReactDOMEventReplaying';
+import {
+  flushEventReplaying,
+  retryIfBlockedOn,
+} from '../events/ReactDOMEventReplaying';
 
 import {
   enableCreateEventHandleAPI,
@@ -3655,6 +3658,12 @@ export function commitHydratedSuspenseInstance(
   retryIfBlockedOn(suspenseInstance);
 }
 
+export function flushHydrationEvents(): void {
+  if (enableHydrationChangeEvent) {
+    flushEventReplaying();
+  }
+}
+
 export function shouldDeleteUnhydratedTailInstances(
   parentType: string,
 ): boolean {

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

@@ -472,12 +472,19 @@ function replayUnblockedEvents() {
   }
 }
 
+export function flushEventReplaying(): void {
+  // Synchronously flush any event replaying so that it gets observed before
+  // any new updates are applied.
+  if (hasScheduledReplayAttempt) {
+    replayUnblockedEvents();
+  }
+}
+
 export function queueChangeEvent(target: EventTarget): void {
   if (enableHydrationChangeEvent) {
     queuedChangeEventTargets.push(target);
     if (!hasScheduledReplayAttempt) {
       hasScheduledReplayAttempt = true;
-      scheduleCallback(NormalPriority, replayUnblockedEvents);
     }
   }
 }
@@ -490,10 +497,12 @@ function scheduleCallbackIfUnblocked(
     queuedEvent.blockedOn = null;
     if (!hasScheduledReplayAttempt) {
       hasScheduledReplayAttempt = true;
-      // Schedule a callback to attempt replaying as many events as are
-      // now unblocked. This first might not actually be unblocked yet.
-      // We could check it early to avoid scheduling an unnecessary callback.
-      scheduleCallback(NormalPriority, replayUnblockedEvents);
+      if (!enableHydrationChangeEvent) {
+        // Schedule a callback to attempt replaying as many events as are
+        // now unblocked. This first might not actually be unblocked yet.
+        // We could check it early to avoid scheduling an unnecessary callback.
+        scheduleCallback(NormalPriority, replayUnblockedEvents);
+      }
     }
   }
 }

packages/react-reconciler/src/ReactFiberConfigWithNoHydration.js

@@ -50,6 +50,7 @@ export const commitHydratedInstance = shim;
 export const commitHydratedContainer = shim;
 export const commitHydratedActivityInstance = shim;
 export const commitHydratedSuspenseInstance = shim;
+export const flushHydrationEvents = shim;
 export const clearActivityBoundary = shim;
 export const clearSuspenseBoundary = shim;
 export const clearActivityBoundaryFromContainer = shim;

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -109,6 +109,7 @@ import {
   startGestureTransition,
   stopViewTransition,
   createViewTransitionInstance,
+  flushHydrationEvents,
 } from './ReactFiberConfig';
 
 import {createWorkInProgress, resetWorkInProgress} from './ReactFiber';
@@ -3859,6 +3860,10 @@ function flushSpawnedWork(): void {
     }
   }
 
+  // Eagerly flush any event replaying that we unblocked within this commit.
+  // This ensures that those are observed before we render any new changes.
+  flushHydrationEvents();
+
   // If layout work was scheduled, flush it now.
   flushSyncWorkOnAllRoots();
 

packages/react-reconciler/src/forks/ReactFiberConfig.custom.js

@@ -228,6 +228,7 @@ export const commitHydratedActivityInstance =
 export const commitHydratedSuspenseInstance =
   $$$config.commitHydratedSuspenseInstance;
 export const finalizeHydratedChildren = $$$config.finalizeHydratedChildren;
+export const flushHydrationEvents = $$$config.flushHydrationEvents;
 export const clearActivityBoundary = $$$config.clearActivityBoundary;
 export const clearSuspenseBoundary = $$$config.clearSuspenseBoundary;
 export const clearActivityBoundaryFromContainer =