@shopify/flash-list 2.0.0-alpha.8 → 2.0.0-rc.1

package/src/recyclerview/hooks/useRecyclerViewController.tsx

@@ -8,66 +8,22 @@ import {
 } from "react";
 import { I18nManager } from "react-native";
 
-import { RecyclerViewProps } from "../RecyclerViewProps";
+import {
+  ScrollToOffsetParams,
+  ScrollToIndexParams,
+  ScrollToItemParams,
+  ScrollToEdgeParams,
+  FlashListRef,
+} from "../../FlashListRef";
 import { CompatScroller } from "../components/CompatScroller";
 import { RecyclerViewManager } from "../RecyclerViewManager";
 import { adjustOffsetForRTL } from "../utils/adjustOffsetForRTL";
 import { RVLayout } from "../layout-managers/LayoutManager";
 import { ScrollAnchorRef } from "../components/ScrollAnchor";
+import { PlatformConfig } from "../../native/config/PlatformHelper";
 
 import { useUnmountFlag } from "./useUnmountFlag";
-import { useUnmountAwareCallbacks } from "./useUnmountAwareCallbacks";
-
-/**
- * Parameters for scrolling to a specific position in the list.
- * Extends ScrollToEdgeParams to include view positioning options.
- */
-export interface ScrollToParams extends ScrollToEdgeParams {
-  /** Position of the target item relative to the viewport (0 = top, 0.5 = center, 1 = bottom) */
-  viewPosition?: number;
-  /** Additional offset to apply after viewPosition calculation */
-  viewOffset?: number;
-}
-
-/**
- * Parameters for scrolling to a specific offset in the list.
- * Used when you want to scroll to an exact pixel position.
- */
-export interface ScrollToOffsetParams extends ScrollToParams {
-  /** The pixel offset to scroll to */
-  offset: number;
-  /**
-   * If true, the first item offset will not be added to the offset calculation.
-   * First offset represents header size or top padding.
-   */
-  skipFirstItemOffset?: boolean;
-}
-
-/**
- * Parameters for scrolling to a specific index in the list.
- * Used when you want to scroll to a specific item by its position in the data array.
- */
-export interface ScrollToIndexParams extends ScrollToParams {
-  /** The index of the item to scroll to */
-  index: number;
-}
-
-/**
- * Parameters for scrolling to a specific item in the list.
- * Used when you want to scroll to a specific item by its data value.
- */
-export interface ScrollToItemParams<T> extends ScrollToParams {
-  /** The item to scroll to */
-  item: T;
-}
-
-/**
- * Base parameters for scrolling to the edges of the list.
- */
-export interface ScrollToEdgeParams {
-  /** Whether the scroll should be animated */
-  animated?: boolean;
-}
+import { useUnmountAwareTimeout } from "./useUnmountAwareCallbacks";
 
 /**
  * Comprehensive hook that manages RecyclerView scrolling behavior and provides
@@ -87,61 +43,22 @@ export interface ScrollToEdgeParams {
  */
 export function useRecyclerViewController<T>(
   recyclerViewManager: RecyclerViewManager<T>,
-  ref: React.Ref<any>,
+  ref: React.Ref<FlashListRef<T>>,
   scrollViewRef: RefObject<CompatScroller>,
-  scrollAnchorRef: React.RefObject<ScrollAnchorRef>,
-  props: RecyclerViewProps<T>
+  scrollAnchorRef: React.RefObject<ScrollAnchorRef>
 ) {
-  const { horizontal, data } = props;
   const isUnmounted = useUnmountFlag();
   const [_, setRenderId] = useState(0);
-  const pauseAdjustRef = useRef(false);
+  const pauseOffsetCorrection = useRef(false);
   const initialScrollCompletedRef = useRef(false);
-  const lastDataLengthRef = useRef(data?.length ?? 0);
-  const { setTimeout } = useUnmountAwareCallbacks();
+  const lastDataLengthRef = useRef(recyclerViewManager.props.data?.length ?? 0);
+  const { setTimeout } = useUnmountAwareTimeout();
 
   // Track the first visible item for maintaining scroll position
   const firstVisibleItemKey = useRef<string | undefined>(undefined);
   const firstVisibleItemLayout = useRef<RVLayout | undefined>(undefined);
   const pendingScrollResolves = useRef<(() => void)[]>([]);
 
-  const applyInitialScrollIndex = useCallback(() => {
-    const initialScrollIndex =
-      recyclerViewManager.getInitialScrollIndex() ?? -1;
-    const dataLength = props.data?.length ?? 0;
-    if (
-      initialScrollIndex >= 0 &&
-      initialScrollIndex < dataLength &&
-      !initialScrollCompletedRef.current &&
-      recyclerViewManager.getIsFirstLayoutComplete()
-    ) {
-      // Use setTimeout to ensure that we keep trying to scroll on first few renders
-      setTimeout(() => {
-        initialScrollCompletedRef.current = true;
-        pauseAdjustRef.current = false;
-      }, 100);
-
-      pauseAdjustRef.current = true;
-
-      const offset = horizontal
-        ? recyclerViewManager.getLayout(initialScrollIndex).x
-        : recyclerViewManager.getLayout(initialScrollIndex).y;
-      handlerMethods.scrollToOffset({
-        offset,
-        animated: false,
-        skipFirstItemOffset: false,
-      });
-
-      setTimeout(() => {
-        handlerMethods.scrollToOffset({
-          offset,
-          animated: false,
-          skipFirstItemOffset: false,
-        });
-      }, 0);
-    }
-  }, [recyclerViewManager, props.data]);
-
   // Handle initial scroll position when the list first loads
   //   useOnLoad(recyclerViewManager, () => {
 
@@ -172,19 +89,19 @@ export function useRecyclerViewController<T>(
    * the user's current view position when new messages are added.
    */
   const applyContentOffset = useCallback(async () => {
+    const { horizontal, data, keyExtractor } = recyclerViewManager.props;
     // Resolve all pending scroll updates from previous calls
     const resolves = pendingScrollResolves.current;
     pendingScrollResolves.current = [];
     resolves.forEach((resolve) => resolve());
 
-    const currentDataLength = props.data?.length ?? 0;
+    const currentDataLength = data?.length ?? 0;
 
     if (
-      !props.horizontal &&
       recyclerViewManager.getIsFirstLayoutComplete() &&
-      props.keyExtractor &&
+      keyExtractor &&
       currentDataLength > 0 &&
-      props.maintainVisibleContentPosition?.disabled !== true
+      recyclerViewManager.shouldMaintainVisibleContentPosition()
     ) {
       const hasDataChanged = currentDataLength !== lastDataLengthRef.current;
       // If we have a tracked first visible item, maintain its position
@@ -194,28 +111,46 @@ export function useRecyclerViewController<T>(
             .getEngagedIndices()
             .findValue(
               (index) =>
-                props.keyExtractor?.(props.data![index], index) ===
+                keyExtractor?.(data![index], index) ===
                 firstVisibleItemKey.current
             ) ??
           (hasDataChanged
-            ? props.data?.findIndex(
+            ? data?.findIndex(
                 (item, index) =>
-                  props.keyExtractor?.(item, index) ===
-                  firstVisibleItemKey.current
+                  keyExtractor?.(item, index) === firstVisibleItemKey.current
               )
             : undefined);
 
-        if (currentIndexOfFirstVisibleItem !== undefined) {
+        if (
+          currentIndexOfFirstVisibleItem !== undefined &&
+          currentIndexOfFirstVisibleItem >= 0
+        ) {
           // Calculate the difference in position and apply the offset
-          const diff =
-            recyclerViewManager.getLayout(currentIndexOfFirstVisibleItem).y -
-            firstVisibleItemLayout.current!.y;
+          const diff = horizontal
+            ? recyclerViewManager.getLayout(currentIndexOfFirstVisibleItem).x -
+              firstVisibleItemLayout.current!.x
+            : recyclerViewManager.getLayout(currentIndexOfFirstVisibleItem).y -
+              firstVisibleItemLayout.current!.y;
           firstVisibleItemLayout.current = {
             ...recyclerViewManager.getLayout(currentIndexOfFirstVisibleItem),
           };
-          if (diff !== 0 && !pauseAdjustRef.current) {
+          if (diff !== 0 && !pauseOffsetCorrection.current) {
             // console.log("diff", diff, firstVisibleItemKey.current);
-            scrollAnchorRef.current?.scrollBy(diff);
+            if (PlatformConfig.supportsOffsetCorrection) {
+              // console.log("scrollBy", diff);
+              scrollAnchorRef.current?.scrollBy(diff);
+            } else {
+              const scrollToParams = horizontal
+                ? {
+                    x: recyclerViewManager.getAbsoluteLastScrollOffset() + diff,
+                    animated: false,
+                  }
+                : {
+                    y: recyclerViewManager.getAbsoluteLastScrollOffset() + diff,
+                    animated: false,
+                  };
+              scrollViewRef.current?.scrollTo(scrollToParams);
+            }
             if (hasDataChanged) {
               updateScrollOffsetAsync(
                 recyclerViewManager.getAbsoluteLastScrollOffset() + diff
@@ -232,11 +167,11 @@ export function useRecyclerViewController<T>(
       // Update the tracked first visible item
       const firstVisibleIndex = Math.max(
         0,
-        recyclerViewManager.getVisibleIndices().startIndex
+        recyclerViewManager.computeVisibleIndices().startIndex
       );
       if (firstVisibleIndex !== undefined && firstVisibleIndex >= 0) {
-        firstVisibleItemKey.current = props.keyExtractor(
-          props.data![firstVisibleIndex],
+        firstVisibleItemKey.current = keyExtractor(
+          data![firstVisibleIndex],
           firstVisibleIndex
         );
         firstVisibleItemLayout.current = {
@@ -244,12 +179,20 @@ export function useRecyclerViewController<T>(
         };
       }
     }
-    lastDataLengthRef.current = props.data?.length ?? 0;
-  }, [props.data, props.keyExtractor, recyclerViewManager, setTimeout]);
-
-  const handlerMethods = useMemo(() => {
+    lastDataLengthRef.current = data?.length ?? 0;
+  }, [
+    recyclerViewManager,
+    scrollAnchorRef,
+    scrollViewRef,
+    setTimeout,
+    updateScrollOffsetAsync,
+  ]);
+
+  const handlerMethods: FlashListRef<T> = useMemo(() => {
     return {
-      props,
+      get props() {
+        return recyclerViewManager.props;
+      },
       /**
        * Scrolls the list to a specific offset position.
        * Handles RTL layouts and first item offset adjustments.
@@ -259,6 +202,7 @@ export function useRecyclerViewController<T>(
         animated,
         skipFirstItemOffset = true,
       }: ScrollToOffsetParams) => {
+        const { horizontal } = recyclerViewManager.props;
         if (scrollViewRef.current) {
           // Adjust offset for RTL layouts in horizontal mode
           if (I18nManager.isRTL && horizontal) {
@@ -287,6 +231,9 @@ export function useRecyclerViewController<T>(
           });
         }
       },
+      clearLayoutCacheOnUpdate: () => {
+        recyclerViewManager.markLayoutManagerDirty();
+      },
 
       // Expose native scroll view methods
       flashScrollIndicators: () => {
@@ -306,13 +253,16 @@ export function useRecyclerViewController<T>(
        * Scrolls to the end of the list.
        */
       scrollToEnd: async ({ animated }: ScrollToEdgeParams = {}) => {
+        const { data } = recyclerViewManager.props;
         if (data && data.length > 0) {
           await handlerMethods.scrollToIndex({
             index: data.length - 1,
             animated,
           });
         }
-        scrollViewRef.current!.scrollToEnd({ animated });
+        setTimeout(() => {
+          scrollViewRef.current!.scrollToEnd({ animated });
+        }, 0);
       },
 
       /**
@@ -335,8 +285,15 @@ export function useRecyclerViewController<T>(
         viewPosition,
         viewOffset,
       }: ScrollToIndexParams) => {
-        if (scrollViewRef.current && data && data.length > index) {
-          pauseAdjustRef.current = true;
+        const { horizontal } = recyclerViewManager.props;
+        if (
+          scrollViewRef.current &&
+          index >= 0 &&
+          index < recyclerViewManager.getDataLength()
+        ) {
+          // Pause the scroll offset adjustments
+          pauseOffsetCorrection.current = true;
+          recyclerViewManager.setOffsetProjectionEnabled(false);
 
           const getFinalOffset = () => {
             const layout = recyclerViewManager.getLayout(index);
@@ -360,74 +317,104 @@ export function useRecyclerViewController<T>(
                 finalOffset += viewOffset;
               }
             }
-            return finalOffset;
+            return finalOffset + recyclerViewManager.firstItemOffset;
           };
-          let lastScrollOffset = recyclerViewManager.getLastScrollOffset();
-          let finalOffset = getFinalOffset();
+          const lastAbsoluteScrollOffset =
+            recyclerViewManager.getAbsoluteLastScrollOffset();
           const bufferForScroll = horizontal
             ? recyclerViewManager.getWindowSize().width
             : recyclerViewManager.getWindowSize().height;
 
           const bufferForCompute = bufferForScroll * 2;
 
-          if (finalOffset > lastScrollOffset) {
-            lastScrollOffset = Math.max(
-              finalOffset - bufferForCompute,
-              lastScrollOffset
-            );
-            recyclerViewManager.setScrollDirection("forward");
-          } else {
-            lastScrollOffset = Math.min(
-              finalOffset + bufferForCompute,
-              lastScrollOffset
-            );
-            recyclerViewManager.setScrollDirection("backward");
-          }
+          const getStartScrollOffset = () => {
+            let lastScrollOffset = lastAbsoluteScrollOffset;
+            const finalOffset = getFinalOffset();
 
-          if (animated) {
-            // go from finalOffset to lastScrollOffset in 5 steps
-            for (let i = 0; i < 5; i++) {
-              if (isUnmounted.current) {
-                return;
-              }
-              await updateScrollOffsetAsync(
-                finalOffset + (lastScrollOffset - finalOffset) * (i / 4)
+            if (finalOffset > lastScrollOffset) {
+              lastScrollOffset = Math.max(
+                finalOffset - bufferForCompute,
+                lastScrollOffset
               );
-            }
-          } else {
-            // go from lastScrollOffset to finalOffset in 5 steps
-            for (let i = 0; i < 5; i++) {
-              if (isUnmounted.current) {
-                return;
-              }
-              await updateScrollOffsetAsync(
-                lastScrollOffset + (finalOffset - lastScrollOffset) * (i / 4)
+              recyclerViewManager.setScrollDirection("forward");
+            } else {
+              lastScrollOffset = Math.min(
+                finalOffset + bufferForCompute,
+                lastScrollOffset
               );
+              recyclerViewManager.setScrollDirection("backward");
+            }
+            return lastScrollOffset;
+          };
+          let initialTargetOffset = getFinalOffset();
+          let initialStartScrollOffset = getStartScrollOffset();
+          let finalOffset = initialTargetOffset;
+          let startScrollOffset = initialStartScrollOffset;
+
+          const steps = 5;
+          // go from finalOffset to startScrollOffset in 5 steps for animated
+          // otherwise go from startScrollOffset to finalOffset in 5 steps
+          for (let i = 0; i < steps; i++) {
+            if (isUnmounted.current) {
+              return;
+            }
+            const nextOffset = animated
+              ? finalOffset +
+                (startScrollOffset - finalOffset) * (i / (steps - 1))
+              : startScrollOffset +
+                (finalOffset - startScrollOffset) * (i / (steps - 1));
+            await updateScrollOffsetAsync(nextOffset);
+
+            // In case some change happens in the middle of this operation
+            // and the index is out of bounds, scroll to the end
+            if (index >= recyclerViewManager.getDataLength()) {
+              handlerMethods.scrollToEnd({ animated });
+              return;
+            }
+
+            const newFinalOffset = getFinalOffset();
+            if (
+              (newFinalOffset < initialTargetOffset &&
+                newFinalOffset < initialStartScrollOffset) ||
+              (newFinalOffset > initialTargetOffset &&
+                newFinalOffset > initialStartScrollOffset)
+            ) {
+              finalOffset = newFinalOffset;
+              startScrollOffset = getStartScrollOffset();
+              initialTargetOffset = newFinalOffset;
+              initialStartScrollOffset = startScrollOffset;
+              i = -1; // Restart compute loop
             }
           }
+
           finalOffset = getFinalOffset();
           const maxOffset = recyclerViewManager.getMaxScrollOffset();
 
           if (finalOffset > maxOffset) {
             finalOffset = maxOffset;
           }
+
           if (animated) {
-            // We don't need to add firstItemOffset here as it will be added in scrollToOffset
+            // We don't need to add firstItemOffset here as it's already added
             handlerMethods.scrollToOffset({
-              offset: lastScrollOffset,
+              offset: startScrollOffset,
               animated: false,
-              skipFirstItemOffset: false,
+              skipFirstItemOffset: true,
             });
           }
           handlerMethods.scrollToOffset({
             offset: finalOffset,
             animated,
-            skipFirstItemOffset: false,
+            skipFirstItemOffset: true,
           });
 
-          setTimeout(() => {
-            pauseAdjustRef.current = false;
-          }, 200);
+          setTimeout(
+            () => {
+              pauseOffsetCorrection.current = false;
+              recyclerViewManager.setOffsetProjectionEnabled(true);
+            },
+            animated ? 300 : 200
+          );
         }
       },
 
@@ -441,11 +428,10 @@ export function useRecyclerViewController<T>(
         viewPosition,
         viewOffset,
       }: ScrollToItemParams<T>) => {
+        const { data } = recyclerViewManager.props;
         if (scrollViewRef.current && data) {
           // Find the index of the item in the data array
-          const index = Array.from(data).findIndex(
-            (dataItem) => dataItem === item
-          );
+          const index = data.findIndex((dataItem) => dataItem === item);
           if (index >= 0) {
             handlerMethods.scrollToIndex({
               index,
@@ -465,7 +451,7 @@ export function useRecyclerViewController<T>(
         return recyclerViewManager.getWindowSize();
       },
       getLayout: (index: number) => {
-        return recyclerViewManager.getLayout(index);
+        return recyclerViewManager.tryGetLayout(index);
       },
       getAbsoluteLastScrollOffset: () => {
         return recyclerViewManager.getAbsoluteLastScrollOffset();
@@ -476,11 +462,11 @@ export function useRecyclerViewController<T>(
       recordInteraction: () => {
         recyclerViewManager.recordInteraction();
       },
-      getVisibleIndices: () => {
-        return recyclerViewManager.getVisibleIndices();
+      computeVisibleIndices: () => {
+        return recyclerViewManager.computeVisibleIndices();
       },
       getFirstVisibleIndex: () => {
-        return recyclerViewManager.getVisibleIndices().startIndex;
+        return recyclerViewManager.computeVisibleIndices().startIndex;
       },
       recomputeViewableItems: () => {
         recyclerViewManager.recomputeViewableItems();
@@ -489,10 +475,55 @@ export function useRecyclerViewController<T>(
        * Disables item recycling in preparation for layout animations.
        */
       prepareForLayoutAnimationRender: () => {
-        recyclerViewManager.disableRecycling = true;
+        recyclerViewManager.disableRecycling(true);
       },
     };
-  }, [horizontal, data, recyclerViewManager]);
+  }, [
+    recyclerViewManager,
+    scrollViewRef,
+    setTimeout,
+    isUnmounted,
+    updateScrollOffsetAsync,
+  ]);
+
+  const applyInitialScrollIndex = useCallback(() => {
+    const { horizontal, data } = recyclerViewManager.props;
+
+    const initialScrollIndex =
+      recyclerViewManager.getInitialScrollIndex() ?? -1;
+    const dataLength = data?.length ?? 0;
+    if (
+      initialScrollIndex >= 0 &&
+      initialScrollIndex < dataLength &&
+      !initialScrollCompletedRef.current &&
+      recyclerViewManager.getIsFirstLayoutComplete()
+    ) {
+      // Use setTimeout to ensure that we keep trying to scroll on first few renders
+      setTimeout(() => {
+        initialScrollCompletedRef.current = true;
+        pauseOffsetCorrection.current = false;
+      }, 100);
+
+      pauseOffsetCorrection.current = true;
+
+      const offset = horizontal
+        ? recyclerViewManager.getLayout(initialScrollIndex).x
+        : recyclerViewManager.getLayout(initialScrollIndex).y;
+      handlerMethods.scrollToOffset({
+        offset,
+        animated: false,
+        skipFirstItemOffset: false,
+      });
+
+      setTimeout(() => {
+        handlerMethods.scrollToOffset({
+          offset,
+          animated: false,
+          skipFirstItemOffset: false,
+        });
+      }, 0);
+    }
+  }, [handlerMethods, recyclerViewManager, setTimeout]);
 
   // Expose imperative methods through the ref
   useImperativeHandle(
@@ -500,8 +531,8 @@ export function useRecyclerViewController<T>(
     () => {
       return { ...scrollViewRef.current, ...handlerMethods };
     },
-    [handlerMethods]
+    [handlerMethods, scrollViewRef]
   );
 
-  return { applyContentOffset, applyInitialScrollIndex };
+  return { applyContentOffset, applyInitialScrollIndex, handlerMethods };
 }

package/src/recyclerview/hooks/useRecyclerViewManager.ts

@@ -2,15 +2,20 @@ import { useEffect, useMemo, useState } from "react";
 
 import { RecyclerViewProps } from "../RecyclerViewProps";
 import { RecyclerViewManager } from "../RecyclerViewManager";
+import { VelocityTracker } from "../helpers/VelocityTracker";
 
 export const useRecyclerViewManager = <T>(props: RecyclerViewProps<T>) => {
   const [recyclerViewManager] = useState<RecyclerViewManager<T>>(
     () => new RecyclerViewManager(props)
   );
+  const [velocityTracker] = useState(() => new VelocityTracker());
+
   const { data } = props;
 
   useMemo(() => {
     recyclerViewManager.updateProps(props);
+    // used to update props so rule can be disabled
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props]);
 
   /**
@@ -18,13 +23,18 @@ export const useRecyclerViewManager = <T>(props: RecyclerViewProps<T>) => {
    */
   useMemo(() => {
     recyclerViewManager.processDataUpdate();
+    // used to process data update so rule can be disabled
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data]);
 
   useEffect(() => {
     return () => {
       recyclerViewManager.dispose();
+      velocityTracker.cleanUp();
     };
+    // needs to run only on unmount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  return { recyclerViewManager };
+  return { recyclerViewManager, velocityTracker };
 };

package/src/recyclerview/hooks/useSecondaryProps.tsx

@@ -105,7 +105,7 @@ export function useSecondaryProps<T>(props: RecyclerViewProps<T>) {
       const ForwardedScrollComponent = React.forwardRef((_props, ref) =>
         (renderScrollComponent as any)({ ..._props, ref } as any)
       );
-      ForwardedScrollComponent.displayName = "CompatScrollView";
+      ForwardedScrollComponent.displayName = "CustomScrollView";
       scrollComponent = ForwardedScrollComponent as any;
     } else if (renderScrollComponent) {
       scrollComponent = renderScrollComponent;

package/src/recyclerview/hooks/useUnmountAwareCallbacks.ts

@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useState } from "react";
 
 /**
- * Hook that provides callbacks which are aware of component unmount state.
- * Any timeouts created with these callbacks will be automatically cleared when the component unmounts.
+ * Hook that provides a setTimeout which is aware of component unmount state.
+ * Any timeouts created with this hook will be automatically cleared when the component unmounts.
  */
-export function useUnmountAwareCallbacks() {
+export function useUnmountAwareTimeout() {
   // Store active timeout IDs in a Set for more efficient add/remove operations
   const [timeoutIds] = useState<Set<NodeJS.Timeout>>(() => new Set());
 
@@ -35,3 +35,39 @@ export function useUnmountAwareCallbacks() {
     setTimeout,
   };
 }
+
+/**
+ * Hook that provides a requestAnimationFrame which is aware of component unmount state.
+ * Any animation frames requested with this hook will be automatically canceled when the component unmounts.
+ */
+export function useUnmountAwareAnimationFrame() {
+  // Store active animation frame request IDs in a Set for more efficient add/remove operations
+  const [requestIds] = useState<Set<number>>(() => new Set());
+
+  // Cancel all animation frame requests on unmount
+  useEffect(() => {
+    return () => {
+      requestIds.forEach((id) => cancelAnimationFrame(id));
+      requestIds.clear();
+    };
+  }, [requestIds]);
+
+  // Create a safe requestAnimationFrame that will be canceled on unmount
+  const requestAnimationFrame = useCallback(
+    (callback: FrameRequestCallback): void => {
+      const id = global.requestAnimationFrame((timestamp) => {
+        // Remove this request ID from the tracking set
+        requestIds.delete(id);
+        callback(timestamp);
+      });
+
+      // Track this request ID
+      requestIds.add(id);
+    },
+    [requestIds]
+  );
+
+  return {
+    requestAnimationFrame,
+  };
+}