@shopify/flash-list 2.0.0-rc.2 → 2.0.0-rc.4

package/src/recyclerview/RecyclerView.tsx

@@ -116,13 +116,17 @@ const RecyclerViewComponent = <T,>(
   // Initialize core RecyclerView manager and content offset management
   const { recyclerViewManager, velocityTracker } =
     useRecyclerViewManager(props);
-  const { applyContentOffset, applyInitialScrollIndex, handlerMethods } =
-    useRecyclerViewController(
-      recyclerViewManager,
-      ref,
-      scrollViewRef,
-      scrollAnchorRef
-    );
+  const {
+    applyOffsetCorrection,
+    computeFirstVisibleIndexForOffsetCorrection,
+    applyInitialScrollIndex,
+    handlerMethods,
+  } = useRecyclerViewController(
+    recyclerViewManager,
+    ref,
+    scrollViewRef,
+    scrollAnchorRef
+  );
 
   // Initialize view holder collection ref
   const viewHolderCollectionRef = useRef<ViewHolderCollectionRef>(null);
@@ -211,7 +215,7 @@ const RecyclerViewComponent = <T,>(
       setRenderId((prev) => prev + 1);
     } else {
       viewHolderCollectionRef.current?.commitLayout();
-      applyContentOffset();
+      applyOffsetCorrection();
     }
   });
 
@@ -247,6 +251,7 @@ const RecyclerViewComponent = <T,>(
           }
 
           if (isMomentumEnd) {
+            computeFirstVisibleIndexForOffsetCorrection();
             if (!recyclerViewManager.isOffsetProjectionEnabled) {
               return;
             }
@@ -272,6 +277,7 @@ const RecyclerViewComponent = <T,>(
     },
     [
       checkBounds,
+      computeFirstVisibleIndexForOffsetCorrection,
       horizontal,
       isHorizontalRTL,
       recyclerViewManager,
@@ -439,6 +445,18 @@ const RecyclerViewComponent = <T,>(
     );
   }, [horizontal, shouldRenderFromBottom, adjustmentMinHeight]);
 
+  const scrollAnchor = useMemo(() => {
+    if (shouldMaintainVisibleContentPosition) {
+      return (
+        <ScrollAnchor
+          horizontal={Boolean(horizontal)}
+          scrollAnchorRef={scrollAnchorRef}
+        />
+      );
+    }
+    return null;
+  }, [horizontal, shouldMaintainVisibleContentPosition]);
+
   // console.log("render", recyclerViewManager.getRenderStack());
 
   // Render the main RecyclerView structure
@@ -485,12 +503,7 @@ const RecyclerViewComponent = <T,>(
           {...overrideProps}
         >
           {/* Scroll anchor for maintaining content position */}
-          {maintainVisibleContentPositionInternal && (
-            <ScrollAnchor
-              horizontal={Boolean(horizontal)}
-              scrollAnchorRef={scrollAnchorRef}
-            />
-          )}
+          {scrollAnchor}
           {isHorizontalRTL && viewToMeasureBoundedSize}
           {renderHeader}
           {!isHorizontalRTL && viewToMeasureBoundedSize}

package/src/recyclerview/RecyclerViewManager.ts

@@ -304,6 +304,12 @@ export class RecyclerViewManager<T> {
     return this.updateScrollOffset(this.getAbsoluteLastScrollOffset());
   }
 
+  restoreIfNeeded() {
+    if (this._isDisposed) {
+      this._isDisposed = false;
+    }
+  }
+
   dispose() {
     this._isDisposed = true;
     this.itemViewabilityManager.dispose();

package/src/recyclerview/RenderStackManager.ts

@@ -26,6 +26,8 @@ export class RenderStackManager {
   // Counter for generating unique sequential keys
   private keyCounter: number;
 
+  private unProcessedIndices: Set<number>;
+
   /**
    * @param maxItemsInRecyclePool - Maximum number of items that can be in the recycle pool
    */
@@ -35,6 +37,7 @@ export class RenderStackManager {
     this.keyMap = new Map();
     this.stableIdMap = new Map();
     this.keyCounter = 0;
+    this.unProcessedIndices = new Set();
   }
 
   /**
@@ -57,6 +60,7 @@ export class RenderStackManager {
     dataLength: number
   ) {
     this.clearRecyclePool();
+    this.unProcessedIndices.clear();
 
     // Recycle keys for items that are no longer valid or visible
     this.keyMap.forEach((keyInfo, key) => {
@@ -65,6 +69,9 @@ export class RenderStackManager {
         this.recycleKey(key);
         return;
       }
+      if (!this.disableRecycling) {
+        this.unProcessedIndices.add(index);
+      }
       if (!engagedIndices.includes(index)) {
         this.recycleKey(key);
         return;
@@ -114,7 +121,7 @@ export class RenderStackManager {
     }
 
     // Clean up stale items and manage the recycle pool size
-    this.cleanup(getStableId, engagedIndices, dataLength);
+    this.cleanup(getStableId, getItemType, engagedIndices, dataLength);
   }
 
   /**
@@ -131,6 +138,7 @@ export class RenderStackManager {
    */
   private cleanup(
     getStableId: (index: number) => string,
+    getItemType: (index: number) => string,
     engagedIndices: ConsecutiveNumbers,
     dataLength: number
   ) {
@@ -139,11 +147,27 @@ export class RenderStackManager {
     // Remove items that are no longer in the dataset
     for (const [key, keyInfo] of this.keyMap.entries()) {
       const { index, itemType, stableId } = keyInfo;
-      if (index >= dataLength || getStableId(index) !== stableId) {
-        // TODO: Find a way to reusue the key, instead of deleting it
-        this.deleteKeyFromRecyclePool(itemType, key);
-        this.stableIdMap.delete(stableId);
-        itemsToDelete.push(key);
+      const indexOutOfBounds = index >= dataLength;
+      const hasStableIdChanged =
+        !indexOutOfBounds && getStableId(index) !== stableId;
+
+      if (indexOutOfBounds || hasStableIdChanged) {
+        const nextIndex = this.unProcessedIndices.values().next().value;
+        let shouldDeleteKey = true;
+
+        if (nextIndex !== undefined) {
+          const nextItemType = getItemType(nextIndex);
+          const nextStableId = getStableId(nextIndex);
+          if (itemType === nextItemType) {
+            this.syncItem(nextIndex, nextItemType, nextStableId);
+            shouldDeleteKey = false;
+          }
+        }
+        if (shouldDeleteKey) {
+          this.deleteKeyFromRecyclePool(itemType, key);
+          this.stableIdMap.delete(stableId);
+          itemsToDelete.push(key);
+        }
       }
     }
 
@@ -215,6 +239,8 @@ export class RenderStackManager {
       this.getKeyFromRecyclePool(itemType) ||
       this.generateKey();
 
+    this.unProcessedIndices.delete(index);
+
     const keyInfo = this.keyMap.get(newKey);
     if (keyInfo) {
       // Update an existing key's metadata

package/src/recyclerview/helpers/RenderTimeTracker.ts

@@ -26,6 +26,10 @@ export class RenderTimeTracker {
     }
   }
 
+  getRawValue() {
+    return this.renderTimeAvgWindow.currentValue;
+  }
+
   getAverageRenderTime() {
     if (!PlatformConfig.trackAverageRenderTimeForOffsetProjection) {
       return this.defaultRenderTime;

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]
   );