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

package/src/benchmark/useBenchmark.ts

@@ -199,42 +199,5 @@ function computeSuggestions(
         `Data count is low. Try to increase it to a large number (e.g 200) using the 'useDataMultiplier' hook.`
       );
     }
-    const distanceFromWindow = roundToDecimalPlaces(
-      flashListRef.current.firstItemOffset,
-      0
-    );
-    if (
-      (flashListRef.current.props.estimatedFirstItemOffset || 0) !==
-      distanceFromWindow
-    ) {
-      suggestions.push(
-        `estimatedFirstItemOffset can be set to ${distanceFromWindow}`
-      );
-    }
-    const rlv = flashListRef.current.recyclerlistview_unsafe;
-    const horizontal = flashListRef.current.props.horizontal;
-    if (rlv) {
-      const sizeArray = rlv.props.dataProvider
-        .getAllData()
-        .map((_, index) =>
-          horizontal
-            ? rlv.getLayout?.(index)?.width || 0
-            : rlv.getLayout?.(index)?.height || 0
-        );
-      const averageSize = Math.round(
-        sizeArray.reduce((prev, current) => prev + current, 0) /
-          sizeArray.length
-      );
-      if (
-        Math.abs(
-          averageSize -
-            (flashListRef.current.props.estimatedItemSize ??
-              flashListRef.current.state.layoutProvider
-                .defaultEstimatedItemSize)
-        ) > 5
-      ) {
-        suggestions.push(`estimatedItemSize can be set to ${averageSize}`);
-      }
-    }
   }
 }

package/src/index.ts

@@ -54,6 +54,10 @@ export { default as CellContainer } from "./native/cell-container/CellContainer"
 export { RecyclerView } from "./recyclerview/RecyclerView";
 export { RecyclerViewProps } from "./recyclerview/RecyclerViewProps";
 export { useFlashListContext } from "./recyclerview/RecyclerViewContextProvider";
+export {
+  LayoutCommitObserver,
+  LayoutCommitObserverProps,
+} from "./recyclerview/LayoutCommitObserver";
 
 // @ts-ignore - This is ignored by TypeScript but will be present in the compiled JS
 // In the compiled JS, this will override the previous FlashList export with a conditional one

package/src/recyclerview/LayoutCommitObserver.tsx

@@ -0,0 +1,74 @@
+import React, { useLayoutEffect, useMemo, useRef } from "react";
+
+import {
+  RecyclerViewContext,
+  RecyclerViewContextProvider,
+  useRecyclerViewContext,
+} from "./RecyclerViewContextProvider";
+import { useLayoutState } from "./hooks/useLayoutState";
+
+export interface LayoutCommitObserverProps {
+  children: React.ReactNode;
+  onCommitLayoutEffect?: () => void;
+}
+
+/**
+ * LayoutCommitObserver can be used to observe when FlashList commits a layout.
+ * It is useful when your component has one or more FlashLists somewhere down the tree.
+ * LayoutCommitObserver will trigger `onCommitLayoutEffect` when all of the FlashLists in the tree have finished their first commit.
+ */
+export const LayoutCommitObserver = React.memo(
+  (props: LayoutCommitObserverProps) => {
+    const { children, onCommitLayoutEffect } = props;
+    const parentRecyclerViewContext = useRecyclerViewContext();
+    const [_, setRenderId] = useLayoutState(0);
+    const pendingChildIds = useRef<Set<string>>(new Set()).current;
+
+    useLayoutEffect(() => {
+      if (pendingChildIds.size > 0) {
+        return;
+      }
+      onCommitLayoutEffect?.();
+    });
+
+    // Create context for child components
+    const recyclerViewContext: RecyclerViewContext<unknown> = useMemo(() => {
+      return {
+        layout: () => {
+          setRenderId((prev) => prev + 1);
+        },
+        getRef: () => {
+          return parentRecyclerViewContext?.getRef() ?? null;
+        },
+        getParentRef: () => {
+          return parentRecyclerViewContext?.getParentRef() ?? null;
+        },
+        getParentScrollViewRef: () => {
+          return parentRecyclerViewContext?.getParentScrollViewRef() ?? null;
+        },
+        getScrollViewRef: () => {
+          return parentRecyclerViewContext?.getScrollViewRef() ?? null;
+        },
+        markChildLayoutAsPending: (id: string) => {
+          parentRecyclerViewContext?.markChildLayoutAsPending(id);
+          pendingChildIds.add(id);
+        },
+        unmarkChildLayoutAsPending: (id: string) => {
+          parentRecyclerViewContext?.unmarkChildLayoutAsPending(id);
+          if (pendingChildIds.has(id)) {
+            pendingChildIds.delete(id);
+            recyclerViewContext.layout();
+          }
+        },
+      };
+    }, [parentRecyclerViewContext, pendingChildIds, setRenderId]);
+
+    return (
+      <RecyclerViewContextProvider value={recyclerViewContext}>
+        {children}
+      </RecyclerViewContextProvider>
+    );
+  }
+);
+
+LayoutCommitObserver.displayName = "LayoutCommitObserver";

package/src/recyclerview/RecyclerViewManager.ts

@@ -20,13 +20,14 @@ import {
 import { RenderStackManager } from "./RenderStackManager";
 // Abstracts layout manager, render stack manager and viewability manager and generates render stack (progressively on load)
 export class RecyclerViewManager<T> {
-  private initialDrawBatchSize = 1;
+  private initialDrawBatchSize = 2;
   private engagedIndicesTracker: RVEngagedIndicesTracker;
   private renderStackManager: RenderStackManager;
   private layoutManager?: RVLayoutManager;
   // Map of index to key
   private isFirstLayoutComplete = false;
   private hasRenderedProgressively = false;
+  private progressiveRenderCount = 0;
   private propsRef: RecyclerViewProps<T>;
   private itemViewabilityManager: ViewabilityManager<T>;
   private _isDisposed = false;
@@ -53,8 +54,12 @@ export class RecyclerViewManager<T> {
     return this._isDisposed;
   }
 
+  public get numColumns() {
+    return this.propsRef.numColumns ?? 1;
+  }
+
   constructor(props: RecyclerViewProps<T>) {
-    this.getStableId = this.getStableId.bind(this);
+    this.getDataKey = this.getDataKey.bind(this);
     this.getItemType = this.getItemType.bind(this);
     this.overrideItemLayout = this.overrideItemLayout.bind(this);
     this.propsRef = props;
@@ -68,7 +73,7 @@ export class RecyclerViewManager<T> {
   // updates render stack based on the engaged indices which are sorted. Recycles unused keys.
   private updateRenderStack = (engagedIndices: ConsecutiveNumbers): void => {
     this.renderStackManager.sync(
-      this.getStableId,
+      this.getDataKey,
       this.getItemType,
       engagedIndices,
       this.getDataLength()
@@ -87,11 +92,6 @@ export class RecyclerViewManager<T> {
     this.propsRef = props;
     this.engagedIndicesTracker.drawDistance =
       props.drawDistance ?? this.engagedIndicesTracker.drawDistance;
-    if (this.propsRef.drawDistance === 0) {
-      this.initialDrawBatchSize = 1;
-    } else {
-      this.initialDrawBatchSize = (props.numColumns ?? 1) * 2;
-    }
     this.initialDrawBatchSize =
       this.propsRef.overrideProps?.initialDrawBatchSize ??
       this.initialDrawBatchSize;
@@ -221,7 +221,7 @@ export class RecyclerViewManager<T> {
     }
     const layoutManagerParams: LayoutParams = {
       windowSize,
-      maxColumns: this.propsRef.numColumns ?? 1,
+      maxColumns: this.numColumns,
       horizontal: Boolean(this.propsRef.horizontal),
       optimizeItemArrangement: this.propsRef.optimizeItemArrangement ?? true,
       overrideItemLayout: this.overrideItemLayout,
@@ -298,7 +298,7 @@ export class RecyclerViewManager<T> {
   processDataUpdate() {
     if (this.hasLayout()) {
       this.modifyChildrenLayout([], this.propsRef.data?.length ?? 0);
-      if (!this.recomputeEngagedIndices()) {
+      if (this.hasRenderedProgressively && !this.recomputeEngagedIndices()) {
         // recomputeEngagedIndices will update the render stack if there are any changes in the engaged indices.
         // It's important to update render stack so that elements are assgined right keys incase items were deleted.
         this.updateRenderStack(this.engagedIndicesTracker.getEngagedIndices());
@@ -346,17 +346,28 @@ export class RecyclerViewManager<T> {
     return this.propsRef.data?.length ?? 0;
   }
 
+  hasStableDataKeys() {
+    return Boolean(this.propsRef.keyExtractor);
+  }
+
+  getDataKey(index: number): string {
+    return (
+      this.propsRef.keyExtractor?.(this.propsRef.data![index], index) ??
+      index.toString()
+    );
+  }
+
   private getLayoutManagerClass() {
     // throw errors for incompatible props
     if (this.propsRef.masonry && this.propsRef.horizontal) {
       throw new Error("Masonry and horizontal props are incompatible");
     }
-    if ((this.propsRef.numColumns ?? 1) > 1 && this.propsRef.horizontal) {
+    if (this.numColumns > 1 && this.propsRef.horizontal) {
       throw new Error("numColumns and horizontal props are incompatible");
     }
     return this.propsRef.masonry
       ? RVMasonryLayoutManagerImpl
-      : (this.propsRef.numColumns ?? 1) > 1 && !this.propsRef.horizontal
+      : this.numColumns > 1 && !this.propsRef.horizontal
       ? RVGridLayoutManagerImpl
       : RVLinearLayoutManagerImpl;
   }
@@ -392,6 +403,7 @@ export class RecyclerViewManager<T> {
   }
 
   private renderProgressively() {
+    this.progressiveRenderCount++;
     const layoutManager = this.layoutManager;
     if (layoutManager) {
       this.applyInitialScrollAdjustment();
@@ -407,16 +419,20 @@ export class RecyclerViewManager<T> {
         this.isFirstLayoutComplete = true;
       }
 
+      const batchSize =
+        this.numColumns *
+        this.initialDrawBatchSize ** Math.ceil(this.progressiveRenderCount / 5);
+
       // If everything is measured then render stack will be in sync. The buffer items will get rendered in the next update
       // triggered by the useOnLoad hook.
       !this.hasRenderedProgressively &&
         this.updateRenderStack(
-          // pick first n indices from visible ones and n is size of renderStack
+          // pick first n indices from visible ones based on batch size
           visibleIndices.slice(
             0,
             Math.min(
               visibleIndices.length,
-              this.getRenderStack().size + this.initialDrawBatchSize
+              this.getRenderStack().size + batchSize
             )
           )
         );
@@ -430,19 +446,12 @@ export class RecyclerViewManager<T> {
     ).toString();
   }
 
-  private getStableId(index: number): string {
-    return (
-      this.propsRef.keyExtractor?.(this.propsRef.data![index], index) ??
-      index.toString()
-    );
-  }
-
   private overrideItemLayout(index: number, layout: SpanSizeInfo) {
     this.propsRef?.overrideItemLayout?.(
       layout,
       this.propsRef.data![index],
       index,
-      this.propsRef.numColumns ?? 1,
+      this.numColumns,
       this.propsRef.extraData
     );
   }

package/src/recyclerview/hooks/useRecyclerViewController.tsx

@@ -90,10 +90,9 @@ export function useRecyclerViewController<T>(
   );
 
   const computeFirstVisibleIndexForOffsetCorrection = useCallback(() => {
-    const { data, keyExtractor } = recyclerViewManager.props;
     if (
       recyclerViewManager.getIsFirstLayoutComplete() &&
-      keyExtractor &&
+      recyclerViewManager.hasStableDataKeys() &&
       recyclerViewManager.getDataLength() > 0 &&
       recyclerViewManager.shouldMaintainVisibleContentPosition()
     ) {
@@ -103,10 +102,8 @@ export function useRecyclerViewController<T>(
         recyclerViewManager.computeVisibleIndices().startIndex
       );
       if (firstVisibleIndex !== undefined && firstVisibleIndex >= 0) {
-        firstVisibleItemKey.current = keyExtractor(
-          data![firstVisibleIndex],
-          firstVisibleIndex
-        );
+        firstVisibleItemKey.current =
+          recyclerViewManager.getDataKey(firstVisibleIndex);
         firstVisibleItemLayout.current = {
           ...recyclerViewManager.getLayout(firstVisibleIndex),
         };
@@ -120,7 +117,7 @@ export function useRecyclerViewController<T>(
    * the user's current view position when new messages are added.
    */
   const applyOffsetCorrection = useCallback(() => {
-    const { horizontal, data, keyExtractor } = recyclerViewManager.props;
+    const { horizontal, data } = recyclerViewManager.props;
 
     // Execute all pending callbacks from previous scroll offset updates
     // This ensures any scroll operations that were waiting for render are completed
@@ -132,7 +129,7 @@ export function useRecyclerViewController<T>(
 
     if (
       recyclerViewManager.getIsFirstLayoutComplete() &&
-      keyExtractor &&
+      recyclerViewManager.hasStableDataKeys() &&
       currentDataLength > 0 &&
       recyclerViewManager.shouldMaintainVisibleContentPosition()
     ) {
@@ -144,13 +141,14 @@ export function useRecyclerViewController<T>(
             .getEngagedIndices()
             .findValue(
               (index) =>
-                keyExtractor?.(data![index], index) ===
+                recyclerViewManager.getDataKey(index) ===
                 firstVisibleItemKey.current
             ) ??
           (hasDataChanged
             ? data?.findIndex(
                 (item, index) =>
-                  keyExtractor?.(item, index) === firstVisibleItemKey.current
+                  recyclerViewManager.getDataKey(index) ===
+                  firstVisibleItemKey.current
               )
             : undefined);
 
@@ -281,10 +279,13 @@ export function useRecyclerViewController<T>(
       scrollToEnd: async ({ animated }: ScrollToEdgeParams = {}) => {
         const { data } = recyclerViewManager.props;
         if (data && data.length > 0) {
-          await handlerMethods.scrollToIndex({
-            index: data.length - 1,
-            animated,
-          });
+          const lastIndex = data.length - 1;
+          if (!recyclerViewManager.getEngagedIndices().includes(lastIndex)) {
+            await handlerMethods.scrollToIndex({
+              index: lastIndex,
+              animated,
+            });
+          }
         }
         setTimeout(() => {
           scrollViewRef.current!.scrollToEnd({ animated });