[Flight] Schedule work in a microtask

Flight pings much more often than Fizz because async function components will always take at least a microtask to resolve
. Rather than scheduling this work as a new macrotask Flight now schedules pings in a microtask. This allows more microta
sks to ping before actually doing a work flush but doesn't force the vm to sping up a new task which is quite common give
n the nature of Server Components

Author: gnoff

packages/react-dom-bindings/src/server/ReactDOMLegacyServerStreamConfig.js

@@ -16,6 +16,14 @@ export opaque type PrecomputedChunk = string;
 export opaque type Chunk = string;
 export opaque type BinaryChunk = string;
 
+export function scheduleMicrotask(callback: () => void) {
+  // While this defies the method name the legacy builds have special
+  // overrides that make work scheduling sync. At the moment scheduleMicrotask
+  // isn't used by any legacy APIs so this is somewhat academic but if they
+  // did in the future we'd probably want to have this be in sync with scheduleWork
+  callback();
+}
+
 export function scheduleWork(callback: () => void) {
   callback();
 }

packages/react-noop-renderer/src/ReactNoopFlightServer.js

@@ -25,6 +25,9 @@ type Destination = Array<Uint8Array>;
 const textEncoder = new TextEncoder();
 
 const ReactNoopFlightServer = ReactFlightServer({
+  scheduleMicrotask(callback: () => void) {
+    callback();
+  },
   scheduleWork(callback: () => void) {
     callback();
   },

packages/react-noop-renderer/src/ReactNoopServer.js

@@ -74,6 +74,9 @@ function write(destination: Destination, buffer: Uint8Array): void {
 }
 
 const ReactNoopServer = ReactFizzServer({
+  scheduleMicrotask(callback: () => void) {
+    callback();
+  },
   scheduleWork(callback: () => void) {
     callback();
   },

packages/react-server/src/ReactFlightServer.js

@@ -26,6 +26,7 @@ import {enableFlightReadableStream} from 'shared/ReactFeatureFlags';
 
 import {
   scheduleWork,
+  scheduleMicrotask,
   flushBuffered,
   beginWriting,
   writeChunkAndReturn,
@@ -1517,7 +1518,7 @@ function pingTask(request: Request, task: Task): void {
   pingedTasks.push(task);
   if (pingedTasks.length === 1) {
     request.flushScheduled = request.destination !== null;
-    scheduleWork(() => performWork(request));
+    scheduleMicrotask(() => performWork(request));
   }
 }
 

packages/react-server/src/ReactServerStreamConfigBrowser.js

@@ -13,6 +13,19 @@ export type PrecomputedChunk = Uint8Array;
 export opaque type Chunk = Uint8Array;
 export type BinaryChunk = Uint8Array;
 
+function handleErrorInNextTick(error: any) {
+  setTimeout(() => {
+    throw error;
+  });
+}
+
+export const scheduleMicrotask: (callback: () => void) => void =
+  typeof queueMicrotask === 'function'
+    ? queueMicrotask
+    : callback => {
+        Promise.resolve(null).then(callback).catch(handleErrorInNextTick);
+      };
+
 const LocalMessageChannel =
   typeof MessageChannel === 'function' ? MessageChannel : undefined;
 export const scheduleWork: (callback: () => void) => void =

packages/react-server/src/ReactServerStreamConfigBun.js

@@ -21,6 +21,8 @@ export type PrecomputedChunk = string;
 export opaque type Chunk = string;
 export type BinaryChunk = $ArrayBufferView;
 
+export const scheduleMicrotask = queueMicrotask;
+
 export function scheduleWork(callback: () => void) {
   setImmediate(callback);
 }

packages/react-server/src/ReactServerStreamConfigEdge.js

@@ -13,6 +13,19 @@ export type PrecomputedChunk = Uint8Array;
 export opaque type Chunk = Uint8Array;
 export type BinaryChunk = Uint8Array;
 
+function handleErrorInNextTick(error: any) {
+  setTimeout(() => {
+    throw error;
+  });
+}
+
+export const scheduleMicrotask: (callback: () => void) => void =
+  typeof queueMicrotask === 'function'
+    ? queueMicrotask
+    : callback => {
+        Promise.resolve(null).then(callback).catch(handleErrorInNextTick);
+      };
+
 export function scheduleWork(callback: () => void) {
   setTimeout(callback, 0);
 }

packages/react-server/src/ReactServerStreamConfigNode.js

@@ -22,6 +22,8 @@ export type PrecomputedChunk = Uint8Array;
 export opaque type Chunk = string;
 export type BinaryChunk = Uint8Array;
 
+export const scheduleMicrotask = queueMicrotask;
+
 export function scheduleWork(callback: () => void) {
   setImmediate(callback);
 }

packages/react-server/src/forks/ReactServerStreamConfig.custom.js

@@ -30,6 +30,7 @@ export opaque type PrecomputedChunk = mixed; // eslint-disable-line no-undef
 export opaque type Chunk = mixed; // eslint-disable-line no-undef
 export opaque type BinaryChunk = mixed; // eslint-disable-line no-undef
 
+export const scheduleMicrotask = $$$config.scheduleMicrotask;
 export const scheduleWork = $$$config.scheduleWork;
 export const beginWriting = $$$config.beginWriting;
 export const writeChunk = $$$config.writeChunk;

packages/react-server/src/forks/ReactServerStreamConfig.dom-fb-experimental.js

@@ -42,6 +42,19 @@ export interface Destination {
   onError(error: mixed): void;
 }
 
+function handleErrorInNextTick(error: any) {
+  setTimeout(() => {
+    throw error;
+  });
+}
+
+export const scheduleMicrotask: (callback: () => void) => void =
+  typeof queueMicrotask === 'function'
+    ? queueMicrotask
+    : callback => {
+        Promise.resolve(null).then(callback).catch(handleErrorInNextTick);
+      };
+
 export function scheduleWork(callback: () => void) {
   setTimeout(callback, 0);
 }