facebook · tyao1 · Oct 11, 2022 · Oct 11, 2022 · Jun 9, 2022 · Jun 15, 2022
diff --git a/packages/jest-react/src/internalAct.js b/packages/jest-react/src/internalAct.js
@@ -144,6 +144,10 @@ function flushActWork(resolve, reject) {
   // $FlowFixMe: Flow doesn't know about global Jest object
   jest.runOnlyPendingTimers();
   if (Scheduler.unstable_hasPendingWork()) {
+    // Flush scheduled rAF.
+    if (global.flushRequestAnimationFrameQueue) {
+      global.flushRequestAnimationFrameQueue();
+    }
     // Committing a fallback scheduled additional work. Continue flushing.
     flushActWork(resolve, reject);
     return;

diff --git a/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js b/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js
@@ -78,6 +78,7 @@ import {DefaultEventPriority} from 'react-reconciler/src/ReactEventPriorities';
 
 // TODO: Remove this deep import when we delete the legacy root API
 import {ConcurrentMode, NoMode} from 'react-reconciler/src/ReactTypeOfMode';
+import * as Scheduler from 'scheduler';
 
 import {
   prepareToRenderResources,
@@ -393,6 +394,11 @@ const localRequestAnimationFrame =
   typeof requestAnimationFrame === 'function'
     ? requestAnimationFrame
     : scheduleTimeout;
+const localCancelAnimationFrame =
+  typeof window !== 'undefined' &&
+  typeof window.cancelAnimationFrame === 'function'
+    ? window.cancelAnimationFrame
+    : cancelTimeout;
 // -------------------
 //     Microtasks
 // -------------------
@@ -408,6 +414,60 @@ export const scheduleMicrotask: any =
           .catch(handleErrorInNextTick)
     : scheduleTimeout; // TODO: Determine the best fallback here.
 
+export const supportsFrameAlignedTask = true;
+
+type FrameAlignedTask = {|
+  rafNode: AnimationFrameID,
+  schedulerNode: number,
+  task: function,
+|};
+
+let currentTask: FrameAlignedTask | null = null;
+function performFrameAlignedWork() {
+  const constCurrentTask = currentTask;
+  if (constCurrentTask != null) {
+    const task = constCurrentTask.task;
+    localCancelAnimationFrame(constCurrentTask.rafNode);
+    Scheduler.unstable_cancelCallback(constCurrentTask.schedulerNode);
+    currentTask = null;
+    if (task != null) {
+      task();
+    }
+  }
+}
+
+export function scheduleFrameAlignedTask(task: any): any {
+  if (currentTask === null) {
+    const rafNode = localRequestAnimationFrame(performFrameAlignedWork);
+
+    const schedulerNode = Scheduler.unstable_scheduleCallback(
+      Scheduler.unstable_NormalPriority,
+      performFrameAlignedWork,
+    );
+
+    currentTask = {
+      rafNode,
+      schedulerNode,
+      task,
+    };
+  } else {
+    currentTask.task = task;
+    currentTask.schedulerNode = Scheduler.unstable_scheduleCallback(
+      Scheduler.unstable_NormalPriority,
+      performFrameAlignedWork,
+    );
+  }
+
+  return currentTask;
+}
+
+export function cancelFrameAlignedTask(task: any) {
+  Scheduler.unstable_cancelCallback(task.schedulerNode);
+  // We don't cancel the rAF in case it gets re-used later.
+  // But clear the task so if it fires and shouldn't run, it won't.
+  task.task = null;
+}
+
 function handleErrorInNextTick(error) {
   setTimeout(() => {
     throw error;