Refactor recycling manager to be faster and more efficient

Author: naqvitalha

README.md

@@ -74,7 +74,7 @@ const MyList = () => {
   ```
 
 - `onStartReachedThreshold`: How far from the start the top edge of the list must be to trigger `onStartReached`.
-- `disableRecycling`: If true, the FlashList will not recycle items.
+- `maxItemsInRecyclePool`: Maximum number of items in the recycle pool (Not required unless the number of item types is huge).
 - `style`: Style for the FlashList's parent container. We highly recommend not adding padding which can impact the size of the ScrollView inside. We operate on the assumption that the size of parent view and ScrollView is the same. In most cases, `contentContainerStyle` should be enough so avoid using this.
 - `maintainVisibleContentPosition`: Configuration for maintaining scroll position when content changes:
   - `disabled`: Set to true to disable this feature (enabled by default).

documentation/docs/fundamentals/usage.md

@@ -278,6 +278,13 @@ Enable masonry layout for grid-like interfaces with varying item heights. When u
 />
 ```
 
+### `maxItemsInRecyclePool`
+
+Maximum number of items in the recycle pool. These are the items that are cached in the recycle pool when they are scrolled off the screen. Unless you have a huge number of item types, you shouldn't need to set this.
+
+Setting this to 0, will disable the recycle pool and items will unmount once they are scrolled off the screen.
+There's no limit by default.
+
 ### `numColumns`
 
 Multiple columns can only be rendered with `horizontal={false}` and will zig-zag like a `flexWrap` layout. Items should all be the same height - masonry layouts are not supported.

fixture/react-native/index.js

@@ -3,10 +3,13 @@
  */
 
 import { AppRegistry, I18nManager } from "react-native";
+import { enableNewCore } from "@shopify/flash-list/dist/enableNewCore";
 
 import App from "./src/App";
 import { name as appName } from "./app.json";
 
+enableNewCore(true);
+
 I18nManager.forceRTL(false);
 
 AppRegistry.registerComponent(appName, () => App);

fixture/react-native/src/App.tsx

@@ -8,18 +8,11 @@
 
 import "react-native-gesture-handler";
 import React from "react";
-import { Platform, UIManager } from "react-native";
 
 import { DebugContextProvider } from "./Debug";
 import NavigationTree from "./NavigationTree";
 
 const App = () => {
-  if (Platform.OS === "android") {
-    if (UIManager.setLayoutAnimationEnabledExperimental) {
-      UIManager.setLayoutAnimationEnabledExperimental(true);
-    }
-  }
-
   return (
     <DebugContextProvider>
       <NavigationTree />

fixture/react-native/src/List.tsx

@@ -2,15 +2,14 @@
  Use this component inside your React Native Application.
  A scrollable list with different item type
  */
-import React, { useRef, useState } from "react";
-import {
-  View,
-  Text,
-  Pressable,
-  LayoutAnimation,
-  StyleSheet,
-} from "react-native";
-import { FlashList, RecyclerView } from "@shopify/flash-list";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { View, Text, Pressable, StyleSheet } from "react-native";
+import { RecyclerView, FlashListRef } from "@shopify/flash-list";
+import Animated, {
+  FadeIn,
+  FadeOut,
+  LinearTransition,
+} from "react-native-reanimated";
 
 const generateArray = (size: number) => {
   const arr = new Array(size);
@@ -22,41 +21,44 @@ const generateArray = (size: number) => {
 
 const List = () => {
   const [refreshing, setRefreshing] = useState(false);
-  const [data, setData] = useState(generateArray(100));
+  const [data, setData] = useState(() => generateArray(100));
 
-  const list = useRef<FlashList<number> | null>(null);
+  const list = useRef<FlashListRef<number> | null>(null);
 
-  const removeItem = (item: number) => {
-    setData(
-      data.filter((dataItem) => {
-        return dataItem !== item;
-      })
-    );
+  const removeItem = useCallback((item: number) => {
     list.current?.prepareForLayoutAnimationRender();
-    // after removing the item, we start animation
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-  };
 
-  const renderItem = ({ item }: { item: number }) => {
-    const backgroundColor = item % 2 === 0 ? "#00a1f1" : "#ffbb00";
-    return (
-      <Pressable
-        onPress={() => {
-          removeItem(item);
-        }}
-      >
-        <View
-          style={{
-            ...styles.container,
-            backgroundColor: item > 97 ? "red" : backgroundColor,
-            height: item % 2 === 0 ? 100 : 200,
+    setData((prevData) => {
+      return prevData.filter((dataItem) => {
+        return dataItem !== item;
+      });
+    });
+  }, []);
+
+  const renderItem = useCallback(
+    ({ item }: { item: number }) => {
+      const backgroundColor = item % 2 === 0 ? "#00a1f1" : "#ffbb00";
+      console.log("renderItem", item);
+      return (
+        <Pressable
+          onPress={() => {
+            removeItem(item);
           }}
         >
-          <Text>Cell Id: {item}</Text>
-        </View>
-      </Pressable>
-    );
-  };
+          <View
+            style={{
+              ...styles.container,
+              backgroundColor: item > 97 ? "red" : backgroundColor,
+              height: item % 2 === 0 ? 100 : 200,
+            }}
+          >
+            <Text>Cell Id: {item}</Text>
+          </View>
+        </Pressable>
+      );
+    },
+    [removeItem]
+  );
 
   return (
     <RecyclerView
@@ -68,6 +70,7 @@ const List = () => {
           setRefreshing(false);
         }, 2000);
       }}
+      CellRendererComponent={CellRenderer}
       keyExtractor={(item: number) => {
         return item.toString();
       }}
@@ -82,6 +85,16 @@ const List = () => {
 
 export default List;
 
+const CellRenderer = (props: any) => {
+  return (
+    <Animated.View
+      {...props}
+      layout={LinearTransition}
+      entering={FadeIn}
+      exiting={FadeOut}
+    />
+  );
+};
 const styles = StyleSheet.create({
   container: {
     justifyContent: "space-around",

fixture/web/Grid.tsx

@@ -76,7 +76,7 @@ export function Grid() {
         contentContainerStyle={contentContainerStyle}
         // maintainVisibleContentPosition={{}}
         initialScrollIndex={25}
-        //overrideItemLayout={overrideItemLayout}
+        // overrideItemLayout={overrideItemLayout}
         renderItem={renderItem}
         keyExtractor={keyExtractor}
       />

src/FlashListProps.ts

@@ -340,6 +340,15 @@ export interface FlashListProps<TItem>
    */
   disableAutoLayout?: boolean;
 
+  /**
+   * New arch only
+   * Maximum number of items in the recycle pool. These are the items that are cached in the recycle pool when they are scrolled off the screen.
+   * Unless you have a huge number of item types, you shouldn't need to set this.
+   * Setting this to 0, will disable the recycle pool and items will unmount once they are scrolled off the screen.
+   * There's no limit by default.
+   */
+  maxItemsInRecyclePool?: number;
+
   /**
    * New arch only
    * Enable masonry layout.
@@ -366,12 +375,6 @@ export interface FlashListProps<TItem>
    */
   onStartReachedThreshold?: FlashListProps<TItem>["onEndReachedThreshold"];
 
-  /**
-   * New arch only
-   * If true, the RecyclerView will not recycle items.
-   */
-  disableRecycling?: boolean;
-
   /**
    * New arch only
    * Style for the RecyclerView's parent container.