Prevent infinite render loop (#1826)

* Convert maximum depth exceeded error to warning

* v2.0.2

Author: naqvitalha

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/flash-list",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "keywords": [
     "react-native",
     "recyclerview",

src/errors/WarningMessages.ts

@@ -1,4 +1,7 @@
 export const WarningMessages = {
   keyExtractorNotDefinedForAnimation:
     "keyExtractor is not defined. This might cause the animations to not work as expected.",
+  exceededMaxRendersWithoutCommit:
+    "Exceeded max renders without commit. This might mean that you have duplicate keys in your keyExtractor output or your list is nested in a ScrollView causing a lot of items to render at once. " +
+    "If it's none of those and is causing a real issue or error, consider reporing this on FlashList Github",
 };

src/recyclerview/RecyclerView.tsx

@@ -21,6 +21,7 @@ import {
 
 import { FlashListRef } from "../FlashListRef";
 import { ErrorMessages } from "../errors/ErrorMessages";
+import { WarningMessages } from "../errors/WarningMessages";
 
 import { RVDimension } from "./layout-managers/LayoutManager";
 import {
@@ -209,8 +210,16 @@ const RecyclerViewComponent = <T,>(
       return { index, dimensions: layout };
     });
 
+    const hasExceededMaxRendersWithoutCommit =
+      renderTimeTracker.hasExceededMaxRendersWithoutCommit();
+
+    if (hasExceededMaxRendersWithoutCommit) {
+      console.warn(WarningMessages.exceededMaxRendersWithoutCommit);
+    }
+
     if (
-      recyclerViewManager.modifyChildrenLayout(layoutInfo, data?.length ?? 0)
+      recyclerViewManager.modifyChildrenLayout(layoutInfo, data?.length ?? 0) &&
+      !hasExceededMaxRendersWithoutCommit
     ) {
       // Trigger re-render if layout modifications were made
       setRenderId((prev) => prev + 1);

src/recyclerview/helpers/RenderTimeTracker.ts

@@ -6,8 +6,11 @@ export class RenderTimeTracker {
   private lastTimerStartedAt = -1;
   private maxRenderTime = 32; // TODO: Improve this even more
   private defaultRenderTime = 16;
+  private rendersWithoutCommit = 0;
+  private maxRendersWithoutCommit = 40;
 
   startTracking() {
+    this.rendersWithoutCommit++;
     if (!PlatformConfig.trackAverageRenderTimeForOffsetProjection) {
       return;
     }
@@ -17,6 +20,7 @@ export class RenderTimeTracker {
   }
 
   markRenderComplete() {
+    this.rendersWithoutCommit = 0;
     if (!PlatformConfig.trackAverageRenderTimeForOffsetProjection) {
       return;
     }
@@ -26,6 +30,10 @@ export class RenderTimeTracker {
     }
   }
 
+  hasExceededMaxRendersWithoutCommit() {
+    return this.rendersWithoutCommit >= this.maxRendersWithoutCommit;
+  }
+
   getRawValue() {
     return this.renderTimeAvgWindow.currentValue;
   }