Reduce number of setState calls when lists are nested

Author: naqvitalha

src/recyclerview/RecyclerView.tsx

@@ -227,6 +227,17 @@ const RecyclerViewComponent = <T,>(
       viewHolderCollectionRef.current?.commitLayout();
       applyOffsetCorrection();
     }
+
+    if (
+      horizontal &&
+      recyclerViewManager.hasLayout() &&
+      recyclerViewManager.getWindowSize().height > 0
+    ) {
+      // We want the parent FlashList to continue rendering the next batch of items as soon as height is available.
+      // Waiting for each horizontal list to finish might cause too many setState calls.
+      // This will help avoid "Maximum update depth exceeded" error.
+      parentRecyclerViewContext?.unmarkChildLayoutAsPending(recyclerViewId);
+    }
   });
 
   /**

src/recyclerview/RecyclerViewManager.ts

@@ -38,6 +38,7 @@ export class RecyclerViewManager<T> {
 
   public firstItemOffset = 0;
   public ignoreScrollEvents = false;
+  public isFirstPaintOnUiComplete = false;
 
   public get animationOptimizationsEnabled() {
     return this._animationOptimizationsEnabled;
@@ -263,6 +264,9 @@ export class RecyclerViewManager<T> {
       return true;
     }
     if (this.hasRenderedProgressively) {
+      if (!this.isFirstPaintOnUiComplete) {
+        return false;
+      }
       return this.recomputeEngagedIndices() !== undefined;
     } else {
       this.renderProgressively();

src/recyclerview/hooks/useOnLoad.ts

@@ -48,6 +48,7 @@ export const useOnListLoad = <T>(
     // console.log("----------> dataCollector", dataCollectorString);
     // console.log("----------> FlashList v2 load in", `${elapsedTimeInMs} ms`);
     requestAnimationFrame(() => {
+      recyclerViewManager.isFirstPaintOnUiComplete = true;
       onLoad?.({ elapsedTimeInMs });
       setIsLoaded(true);
     });