Queue discrete events in microtask

Author: rickhanlonii

packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js

@@ -730,8 +730,15 @@ describe('ChangeEventPlugin', () => {
 
       // Flush callbacks.
       // Now the click update has flushed.
-      expect(Scheduler).toFlushAndYield(['render: ']);
-      expect(input.value).toBe('');
+      if (gate(flags => flags.enableDiscreteEventMicroTasks)) {
+        // Flush microtask queue.
+        await null;
+        expect(Scheduler).toHaveYielded(['render: ']);
+        expect(input.value).toBe('');
+      } else {
+        expect(Scheduler).toFlushAndYield(['render: ']);
+        expect(input.value).toBe('');
+      }
     });
 
     // @gate experimental

packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js

@@ -470,11 +470,24 @@ describe('SimpleEventPlugin', function() {
         'High-pri count: 7, Low-pri count: 0',
       ]);
 
-      // At the end, both counters should equal the total number of clicks
-      expect(Scheduler).toFlushAndYield([
-        'High-pri count: 8, Low-pri count: 0',
-        'High-pri count: 8, Low-pri count: 8',
-      ]);
+      if (gate(flags => flags.enableDiscreteEventMicroTasks)) {
+        // Flush the microtask queue
+        await null;
+
+        // At the end, both counters should equal the total number of clicks
+        expect(Scheduler).toHaveYielded([
+          'High-pri count: 8, Low-pri count: 0',
+
+          // TODO: with cancellation, this required another flush?
+          'High-pri count: 8, Low-pri count: 8',
+        ]);
+      } else {
+        // At the end, both counters should equal the total number of clicks
+        expect(Scheduler).toFlushAndYield([
+          'High-pri count: 8, Low-pri count: 0',
+          'High-pri count: 8, Low-pri count: 8',
+        ]);
+      }
       expect(button.textContent).toEqual('High-pri count: 8, Low-pri count: 8');
     });
   });

packages/react-reconciler/src/ReactFiberWorkLoop.new.js

@@ -91,6 +91,7 @@ import {
   warnsIfNotActing,
   afterActiveInstanceBlur,
   clearContainer,
+  queueMicrotask,
 } from './ReactFiberHostConfig';
 
 import {
@@ -214,6 +215,7 @@ import {
   syncNestedUpdateFlag,
 } from './ReactProfilerTimer.new';
 
+import {enableDiscreteEventMicroTasks} from 'shared/ReactFeatureFlags';
 // DEV stuff
 import getComponentName from 'shared/getComponentName';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.new';
@@ -726,6 +728,13 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
       ImmediateSchedulerPriority,
       performSyncWorkOnRoot.bind(null, root),
     );
+  } else if (
+    enableDiscreteEventMicroTasks &&
+    queueMicrotask != null &&
+    newCallbackPriority === InputDiscreteLanePriority
+  ) {
+    queueMicrotask(performSyncWorkOnRoot.bind(null, root));
+    newCallbackNode = null;
   } else {
     const schedulerPriorityLevel = lanePriorityToSchedulerPriority(
       newCallbackPriority,

packages/shared/ReactFeatureFlags.js

@@ -143,3 +143,5 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 
 export const disableSchedulerTimeoutInWorkLoop = false;
+
+export const enableDiscreteEventMicroTasks = false;

packages/shared/forks/ReactFeatureFlags.native-fb.js

@@ -57,6 +57,7 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
+export const enableDiscreteEventMicroTasks = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars

packages/shared/forks/ReactFeatureFlags.native-oss.js

@@ -56,6 +56,7 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
+export const enableDiscreteEventMicroTasks = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars

packages/shared/forks/ReactFeatureFlags.test-renderer.js

@@ -56,6 +56,7 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
+export const enableDiscreteEventMicroTasks = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars

packages/shared/forks/ReactFeatureFlags.test-renderer.native.js

@@ -56,6 +56,7 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
+export const enableDiscreteEventMicroTasks = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars

packages/shared/forks/ReactFeatureFlags.test-renderer.www.js

@@ -56,6 +56,7 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
+export const enableDiscreteEventMicroTasks = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars

packages/shared/forks/ReactFeatureFlags.testing.js

@@ -56,6 +56,7 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
+export const enableDiscreteEventMicroTasks = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars