@shopify/flash-list 2.0.0-alpha.2 → 2.0.0-alpha.21

package/src/recyclerview/hooks/useBoundDetection.ts

@@ -1,9 +1,10 @@
-import { useCallback, useEffect, useMemo } from "react";
-import { useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+
 import { RecyclerViewManager } from "../RecyclerViewManager";
-import { RecyclerViewProps } from "../RecyclerViewProps";
 import { CompatScroller } from "../components/CompatScroller";
 
+import { useUnmountAwareAnimationFrame } from "./useUnmountAwareCallbacks";
+
 /**
  * Hook to detect when the scroll position reaches near the start or end of the list
  * and trigger the appropriate callbacks. This hook is responsible for:
@@ -17,7 +18,6 @@ import { CompatScroller } from "../components/CompatScroller";
  */
 export function useBoundDetection<T>(
   recyclerViewManager: RecyclerViewManager<T>,
-  props: RecyclerViewProps<T>,
   scrollViewRef: React.RefObject<CompatScroller>
 ) {
   // Track whether we've already triggered the end reached callback to prevent duplicate calls
@@ -26,22 +26,48 @@ export function useBoundDetection<T>(
   const pendingStartReached = useRef(false);
   // Track whether we should auto-scroll to bottom when new content is added
   const pendingAutoscrollToBottom = useRef(false);
-  const { horizontal, data, maintainVisibleContentPosition } = props;
+
+  const lastCheckBoundsTime = useRef(Date.now());
+
+  const { data } = recyclerViewManager.props;
+  const { requestAnimationFrame } = useUnmountAwareAnimationFrame();
+
+  const windowHeight = recyclerViewManager.hasLayout()
+    ? recyclerViewManager.getWindowSize().height
+    : 0;
+
+  const contentHeight = recyclerViewManager.hasLayout()
+    ? recyclerViewManager.getChildContainerDimensions().height
+    : 0;
+
+  const windowWidth = recyclerViewManager.hasLayout()
+    ? recyclerViewManager.getWindowSize().width
+    : 0;
+
+  const contentWidth = recyclerViewManager.hasLayout()
+    ? recyclerViewManager.getChildContainerDimensions().width
+    : 0;
 
   /**
    * Checks if the scroll position is near the start or end of the list
    * and triggers appropriate callbacks if configured.
    */
   const checkBounds = useCallback(() => {
+    lastCheckBoundsTime.current = Date.now();
+
+    const {
+      onEndReached,
+      onStartReached,
+      maintainVisibleContentPosition,
+      horizontal,
+      onEndReachedThreshold: onEndReachedThresholdProp,
+      onStartReachedThreshold: onStartReachedThresholdProp,
+    } = recyclerViewManager.props;
     // Skip all calculations if neither callback is provided and autoscroll is disabled
     const autoscrollToBottomThreshold =
       maintainVisibleContentPosition?.autoscrollToBottomThreshold ?? -1;
 
-    if (
-      !props.onEndReached &&
-      !props.onStartReached &&
-      autoscrollToBottomThreshold < 0
-    ) {
+    if (!onEndReached && !onStartReached && autoscrollToBottomThreshold < 0) {
       return;
     }
 
@@ -50,7 +76,7 @@ export function useBoundDetection<T>(
         recyclerViewManager.getAbsoluteLastScrollOffset();
       const contentSize = recyclerViewManager.getChildContainerDimensions();
       const windowSize = recyclerViewManager.getWindowSize();
-      const isHorizontal = props.horizontal === true;
+      const isHorizontal = horizontal === true;
 
       // Calculate dimensions based on scroll direction
       const visibleLength = isHorizontal ? windowSize.width : windowSize.height;
@@ -59,8 +85,8 @@ export function useBoundDetection<T>(
         recyclerViewManager.firstItemOffset;
 
       // Check if we're near the end of the list
-      if (props.onEndReached) {
-        const onEndReachedThreshold = props.onEndReachedThreshold ?? 0.5;
+      if (onEndReached) {
+        const onEndReachedThreshold = onEndReachedThresholdProp ?? 0.5;
         const endThresholdDistance = onEndReachedThreshold * visibleLength;
 
         const isNearEnd =
@@ -69,27 +95,27 @@ export function useBoundDetection<T>(
 
         if (isNearEnd && !pendingEndReached.current) {
           pendingEndReached.current = true;
-          props.onEndReached();
+          onEndReached();
         }
         pendingEndReached.current = isNearEnd;
       }
 
       // Check if we're near the start of the list
-      if (props.onStartReached) {
-        const onStartReachedThreshold = props.onStartReachedThreshold ?? 0.2;
+      if (onStartReached) {
+        const onStartReachedThreshold = onStartReachedThresholdProp ?? 0.2;
         const startThresholdDistance = onStartReachedThreshold * visibleLength;
 
         const isNearStart = lastScrollOffset <= startThresholdDistance;
 
         if (isNearStart && !pendingStartReached.current) {
           pendingStartReached.current = true;
-          props.onStartReached();
+          onStartReached();
         }
         pendingStartReached.current = isNearStart;
       }
 
       // Handle auto-scrolling to bottom for vertical lists
-      if (!horizontal) {
+      if (!isHorizontal && autoscrollToBottomThreshold >= 0) {
         const autoscrollToBottomThresholdDistance =
           autoscrollToBottomThreshold * visibleLength;
 
@@ -104,22 +130,45 @@ export function useBoundDetection<T>(
         }
       }
     }
-  }, [recyclerViewManager, props]);
+  }, [recyclerViewManager]);
+
+  const runAutoScrollToBottomCheck = useCallback(() => {
+    if (pendingAutoscrollToBottom.current) {
+      pendingAutoscrollToBottom.current = false;
+      requestAnimationFrame(() => {
+        const shouldAnimate =
+          recyclerViewManager.props.maintainVisibleContentPosition
+            ?.animateAutoScrollToBottom ?? true;
+        scrollViewRef.current?.scrollToEnd({
+          animated: shouldAnimate,
+        });
+      });
+    }
+  }, [requestAnimationFrame, scrollViewRef, recyclerViewManager]);
 
   // Reset end reached state when data changes
   useMemo(() => {
     pendingEndReached.current = false;
+    // needs to run only when data changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data]);
 
   // Auto-scroll to bottom when new content is added and we're near the bottom
   useEffect(() => {
-    if (pendingAutoscrollToBottom.current) {
-      requestAnimationFrame(() => {
-        scrollViewRef.current?.scrollToEnd();
-        pendingAutoscrollToBottom.current = false;
-      });
+    runAutoScrollToBottomCheck();
+  }, [data, runAutoScrollToBottomCheck, windowHeight, windowWidth]);
+
+  // Since content changes frequently, we try and avoid doing the auto scroll during active scrolls
+  useEffect(() => {
+    if (Date.now() - lastCheckBoundsTime.current >= 100) {
+      runAutoScrollToBottomCheck();
     }
-  }, [data]);
+  }, [
+    contentHeight,
+    contentWidth,
+    recyclerViewManager.firstItemOffset,
+    runAutoScrollToBottomCheck,
+  ]);
 
   return {
     checkBounds,

package/src/recyclerview/hooks/useLayoutState.ts

@@ -2,6 +2,13 @@ import { useState, useCallback } from "react";
 
 import { useRecyclerViewContext } from "../RecyclerViewContextProvider";
 
+export type LayoutStateSetter<T> = (
+  newValue: T | ((prevValue: T) => T),
+  skipParentLayout?: boolean
+) => void;
+
+export type LayoutStateInitialValue<T> = T | (() => T);
+
 /**
  * Custom hook that combines state management with RecyclerView layout updates.
  * This hook provides a way to manage state that affects the layout of the RecyclerView,
@@ -13,8 +20,8 @@ import { useRecyclerViewContext } from "../RecyclerViewContextProvider";
  *   - A setter function that updates the state and triggers a layout recalculation
  */
 export function useLayoutState<T>(
-  initialState: T | (() => T)
-): [T, (newValue: T | ((prevValue: T) => T)) => void] {
+  initialState: LayoutStateInitialValue<T>
+): [T, LayoutStateSetter<T>] {
   // Initialize state with the provided initial value
   const [state, setState] = useState<T>(initialState);
   // Get the RecyclerView context for layout management
@@ -28,16 +35,18 @@ export function useLayoutState<T>(
    * @param newValue - Either a new state value or a function that receives the previous state
    *                   and returns the new state
    */
-  const setLayoutState = useCallback(
-    (newValue: T | ((prevValue: T) => T)) => {
+  const setLayoutState: LayoutStateSetter<T> = useCallback(
+    (newValue, skipParentLayout) => {
       // Update the state using either the new value or the result of the updater function
       setState((prevValue) =>
         typeof newValue === "function"
           ? (newValue as (prevValue: T) => T)(prevValue)
           : newValue
       );
-      // Trigger a layout recalculation in the RecyclerView
-      recyclerViewContext?.layout();
+      if (!skipParentLayout) {
+        // Trigger a layout recalculation in the RecyclerView
+        recyclerViewContext?.layout();
+      }
     },
     [recyclerViewContext]
   );

package/src/recyclerview/hooks/useMappingHelper.ts

@@ -0,0 +1,20 @@
+import { useCallback } from "react";
+
+import { useRecyclerViewContext } from "../RecyclerViewContextProvider";
+
+/**
+ * Returns a function that can help create a mapping key for the items.
+ * Useful when doing .map on items to create a list of components.
+ * Using this ensures that performance is optimal for FlashList
+ */
+export const useMappingHelper = () => {
+  const recyclerViewContext = useRecyclerViewContext();
+  const getMappingKey = useCallback(
+    (itemKey: string | number | bigint, index: number) => {
+      return recyclerViewContext ? index : itemKey;
+    },
+    [recyclerViewContext]
+  );
+
+  return { getMappingKey };
+};

package/src/recyclerview/hooks/useOnLoad.ts

@@ -1,7 +1,9 @@
 import { useEffect, useMemo, useRef, useState } from "react";
+
 import { RecyclerViewManager } from "../RecyclerViewManager";
-import { useUnmountFlag } from "./useUnmountFlag";
-//import { ToastAndroid } from "react-native";
+
+import { useUnmountAwareAnimationFrame } from "./useUnmountAwareCallbacks";
+// import { ToastAndroid } from "react-native";
 
 /**
  * Hook to track when the RecyclerView has loaded its items and notify when loading is complete.
@@ -19,8 +21,8 @@ export const useOnListLoad = <T>(
   const loadStartTimeRef = useRef<number>(Date.now());
   const [isLoaded, setIsLoaded] = useState<boolean>(false);
   const dataLength = recyclerViewManager.getDataLength();
-  //const dataCollector = useRef<number[]>([]);
-  const isUnmounted = useUnmountFlag();
+  // const dataCollector = useRef<number[]>([]);
+  const { requestAnimationFrame } = useUnmountAwareAnimationFrame();
   // Track render cycles by collecting elapsed time on each render
   // useEffect(() => {
   //   const elapsedTimeInMs = Date.now() - loadStartTimeRef.current;
@@ -29,6 +31,7 @@ export const useOnListLoad = <T>(
 
   useMemo(() => {
     loadStartTimeRef.current = Date.now();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dataLength]);
 
   useOnLoad(recyclerViewManager, () => {
@@ -42,13 +45,11 @@ export const useOnListLoad = <T>(
     //   `onLoad called after ${dataCollectorString}`,
     //   ToastAndroid.SHORT
     // );
-    //console.log("----------> dataCollector", dataCollectorString);
-    //console.log("----------> elapsedTimeInMs", elapsedTimeInMs);
+    // console.log("----------> dataCollector", dataCollectorString);
+    // console.log("----------> FlashList v2 load in", `${elapsedTimeInMs} ms`);
     requestAnimationFrame(() => {
-      if (!isUnmounted.current) {
-        onLoad?.({ elapsedTimeInMs });
-        setIsLoaded(true);
-      }
+      onLoad?.({ elapsedTimeInMs });
+      setIsLoaded(true);
     });
   });