[Fiber] Replay events between commits

fixtures/ssr/src/components/Page.js

@@ -11,10 +11,17 @@ const autofocusedInputs = [
 ];
 
 export default class Page extends Component {
-  state = {active: false};
+  state = {active: false, value: ''};
   handleClick = e => {
     this.setState({active: true});
   };
+  handleChange = e => {
+    this.setState({value: e.target.value});
+  };
+  componentDidMount() {
+    // Rerender on mount
+    this.setState({mounted: true});
+  }
   render() {
     const link = (
       <a className="link" onClick={this.handleClick}>
@@ -30,6 +37,10 @@ export default class Page extends Component {
           <p>Autofocus on page load: {autofocusedInputs}</p>
           <p>{!this.state.active ? link : 'Thanks!'}</p>
           {this.state.active && <p>Autofocus on update: {autofocusedInputs}</p>}
+          <p>
+            Controlled input:{' '}
+            <input value={this.state.value} onChange={this.handleChange} />
+          </p>
         </Suspend>
       </div>
     );

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-dom/src/__tests__/ReactDOMServerIntegrationUserInteraction-test.js

@@ -52,6 +52,12 @@ describe('ReactDOMServerIntegrationUserInteraction', () => {
         }
         this.setState({value: event.target.value});
       }
+      componentDidMount() {
+        if (this.props.cascade) {
+          // Trigger a cascading render immediately upon hydration which rerenders the input.
+          this.setState({cascade: true});
+        }
+      }
       render() {
         return (
           <input
@@ -73,6 +79,12 @@ describe('ReactDOMServerIntegrationUserInteraction', () => {
         }
         this.setState({value: event.target.value});
       }
+      componentDidMount() {
+        if (this.props.cascade) {
+          // Trigger a cascading render immediately upon hydration which rerenders the textarea.
+          this.setState({cascade: true});
+        }
+      }
       render() {
         return (
           <textarea
@@ -93,6 +105,12 @@ describe('ReactDOMServerIntegrationUserInteraction', () => {
         }
         this.setState({value: event.target.checked});
       }
+      componentDidMount() {
+        if (this.props.cascade) {
+          // Trigger a cascading render immediately upon hydration which rerenders the checkbox.
+          this.setState({cascade: true});
+        }
+      }
       render() {
         return (
           <input
@@ -114,6 +132,12 @@ describe('ReactDOMServerIntegrationUserInteraction', () => {
         }
         this.setState({value: event.target.value});
       }
+      componentDidMount() {
+        if (this.props.cascade) {
+          // Trigger a cascading render immediately upon hydration which rerenders the select.
+          this.setState({cascade: true});
+        }
+      }
       render() {
         return (
           <select
@@ -361,5 +385,60 @@ describe('ReactDOMServerIntegrationUserInteraction', () => {
         gate(flags => flags.enableHydrationChangeEvent) ? 1 : 0,
       );
     });
+
+    // @gate enableHydrationChangeEvent
+    it('should not blow away user-entered text cascading hydration to a controlled input', async () => {
+      let changeCount = 0;
+      await testUserInteractionBeforeClientRender(
+        <ControlledInput onChange={() => changeCount++} cascade={true} />,
+      );
+      expect(changeCount).toBe(1);
+    });
+
+    // @gate enableHydrationChangeEvent
+    it('should not blow away user-interaction cascading hydration to a controlled range input', async () => {
+      let changeCount = 0;
+      await testUserInteractionBeforeClientRender(
+        <ControlledInput
+          type="range"
+          initialValue="0.25"
+          onChange={() => changeCount++}
+          cascade={true}
+        />,
+        '0.25',
+        '1',
+      );
+      expect(changeCount).toBe(1);
+    });
+
+    // @gate enableHydrationChangeEvent
+    it('should not blow away user-entered text cascading hydration to a controlled checkbox', async () => {
+      let changeCount = 0;
+      await testUserInteractionBeforeClientRender(
+        <ControlledCheckbox onChange={() => changeCount++} cascade={true} />,
+        true,
+        false,
+        'checked',
+      );
+      expect(changeCount).toBe(1);
+    });
+
+    // @gate enableHydrationChangeEvent
+    it('should not blow away user-entered text cascading hydration to a controlled textarea', async () => {
+      let changeCount = 0;
+      await testUserInteractionBeforeClientRender(
+        <ControlledTextArea onChange={() => changeCount++} cascade={true} />,
+      );
+      expect(changeCount).toBe(1);
+    });
+
+    // @gate enableHydrationChangeEvent
+    it('should not blow away user-selected value cascading hydration to an controlled select', async () => {
+      let changeCount = 0;
+      await testUserInteractionBeforeClientRender(
+        <ControlledSelect onChange={() => changeCount++} cascade={true} />,
+      );
+      expect(changeCount).toBe(1);
+    });
   });
 });

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,12 @@ 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.
+  if (supportsHydration) {
+    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 =