[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

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

@@ -16,6 +16,12 @@ export opaque type PrecomputedChunk = string;
 export opaque type Chunk = string;
 export opaque type BinaryChunk = string;
 
+export function scheduleMicrotask(callback: () => void) {
+ throw new Error(
+ 'Legacy React Server builds should not be using scheduleMicrotask. This is a bug in React.',
+ );
+}
+
 export function 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);
+ };
+
 export function scheduleWork(callback: () => void) {
  callback();
 }

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) {
  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) {
  callback();
 }

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

@@ -9,6 +9,10 @@
 
 export * from '../ReactServerStreamConfigFB';
 
+export function scheduleMicrotask(callback: () => void) {
+ // We don't schedule work in this model, and instead expect performWork to always be called repeatedly.
+}
+
 export function scheduleWork(callback: () => void) {
  // We don't schedule work in this model, and instead expect performWork to always be called repeatedly.
 }

scripts/error-codes/codes.json

@@ -511,5 +511,6 @@
  "523": "The render was aborted due to being postponed.",
  "524": "Values cannot be passed to next() of AsyncIterables passed to Client Components.",
  "525": "A React Element from an older version of React was rendered. This is not supported. It can happen if:\n- Multiple copies of the \"react\" package is used.\n- A library pre-bundled an old copy of \"react\" or \"react/jsx-runtime\".\n- A compiler tries to \"inline\" JSX instead of using the runtime.",
- "526": "Could not reference an opaque temporary reference. This is likely due to misconfiguring the temporaryReferences options on the server."
+ "526": "Could not reference an opaque temporary reference. This is likely due to misconfiguring the temporaryReferences options on the server.",
+ "527": "Legacy React Server builds should not be using scheduleMicrotask. This is a bug in React."
 }