Avoid rerender children element on infinite scroll

gephi · Jul 10, 2023 · 06c27f8 · 06c27f8
1 parent 7bc11a1
commit 06c27f8
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/src/components/InfiniteScroll.tsx b/src/components/InfiniteScroll.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, useCallback, useState, useEffect } from "react";
+import { ReactNode, useCallback, useState, useEffect, useMemo } from "react";
 import InfiniteScrollComponent from "react-infinite-scroll-component";
 
 import { LoaderFill } from "./Loader";
@@ -27,9 +27,11 @@ export function InfiniteScroll<T>({ data, renderItem, pageSize, scrollableTarget
   }, [data, pageSize]);
 
   useEffect(() => {
-    setItems(data.slice(0, pageSize || DEFAULT_PAGE_SIZE));
+    setItems(data.length > 0 ? data.slice(0, pageSize || DEFAULT_PAGE_SIZE) : []);
   }, [data, pageSize]);
 
+  const visibleItems = useMemo(() => items.map((data) => renderItem(data)), [renderItem, items]);
+
   return (
     <InfiniteScrollComponent
       scrollableTarget={scrollableTarget}
@@ -38,7 +40,7 @@ export function InfiniteScroll<T>({ data, renderItem, pageSize, scrollableTarget
       loader={<LoaderFill />}
       next={next}
     >
-      {items.map((data) => renderItem(data))}
+      {visibleItems}
     </InfiniteScrollComponent>
   );
 }