error handler & optimized component

DimaDemchenko · Jan 16, 2024 · a9ebc77 · a9ebc77
1 parent 6ae1d5c
commit a9ebc77
Showing 1 changed file with 15 additions and 6 deletions.
diff --git a/src/components/infinite-scroll/InfiniteScroll.tsx b/src/components/infinite-scroll/InfiniteScroll.tsx
@@ -20,6 +20,11 @@ export const InfiniteScroll = <T,>({
 
   const observerTarget = useRef<HTMLDivElement>(null)
 
+  useEffect(() => {
+    setItems([])
+    setPage(0)
+  }, [getDataFunc])
+
   useEffect(() => {
     if (
       !observerTarget.current ||
@@ -31,14 +36,18 @@ export const InfiniteScroll = <T,>({
     const fetchData = async () => {
       setIsLoading(true)
 
-      const data = await getDataFunc(page, itemsPerPage)
+      try {
+        const data = await getDataFunc(page, itemsPerPage)
 
-      if (data && data.length > 0) {
-        setPage((prevPage) => prevPage + 1)
-        setItems((prevItems) => [...prevItems, ...data])
+        if (data && data.length > 0) {
+          setPage((prevPage) => prevPage + 1)
+          setItems((prevItems) => [...prevItems, ...data])
+        }
+      } catch (error) {
+        console.error('Error fetching data:', error)
+      } finally {
+        setIsLoading(false)
       }
-
-      setIsLoading(false)
     }
 
     const target = observerTarget.current