From 2e40ffb57cf9c86757e3b83ab707e46c43a503f1 Mon Sep 17 00:00:00 2001
From: "dylan.zeng" <dylan.zeng@bybit.com>
Date: Tue, 22 Mar 2022 17:51:45 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=90=9Efix(carousel):=20=20hooks=20can?=
 =?UTF-8?q?not=20use=20in=20conditions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/carousel/index.tsx | 41 +++++++++++++++----------------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/components/carousel/index.tsx b/src/components/carousel/index.tsx
index e4aa1cb..cdb27c4 100644
--- a/src/components/carousel/index.tsx
+++ b/src/components/carousel/index.tsx
@@ -52,28 +52,27 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
 	const autoSwipeTimer = useRef<number>();
 	const isNavigation = typeof props.navigation === 'function';
 
-	if (props.dynamic) {
-		useEffect(() => {
-			const newItems = updateNodes(
-				itemsRef.current,
-				props.children,
-				prevChildren,
-				props.slide,
-				props.infinite,
-			);
+	useEffect(() => {
+		if (props.dynamic) return 
+		const newItems = updateNodes(
+			itemsRef.current,
+			props.children,
+			prevChildren,
+			props.slide,
+			props.infinite,
+		);
 
-			setItems(newItems);
-			itemsRef.current = newItems;
-			if (
-				page < props.pageCount &&
-				prevChildren &&
-				prevChildren?.length < props.children.length
-			) {
-				slide(SlideDirection.Right);
-				setPage(page + 1);
-			}
-		}, [props.children]);
-	}
+		setItems(newItems);
+		itemsRef.current = newItems;
+		if (
+			page < props.pageCount &&
+			prevChildren &&
+			prevChildren?.length < props.children.length
+		) {
+			slide(SlideDirection.Right);
+			setPage(page + 1);
+		}
+	}, [props.children]);
 
 	useEffect(() => {
 		autoSwipe();

From b0bdb7ccbb61437578742559a5f17af7a078db1b Mon Sep 17 00:00:00 2001
From: "dylan.zeng" <dylan.zeng@bybit.com>
Date: Wed, 23 Mar 2022 21:02:18 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=90=9Efix(carousel):=20update=20useEf?=
 =?UTF-8?q?fect=20dependencies=20and=20use=20function=20dispatcher=20in=20?=
 =?UTF-8?q?setPage=20state?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/carousel/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/carousel/index.tsx b/src/components/carousel/index.tsx
index cdb27c4..d5f22a2 100644
--- a/src/components/carousel/index.tsx
+++ b/src/components/carousel/index.tsx
@@ -70,9 +70,9 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
 			prevChildren?.length < props.children.length
 		) {
 			slide(SlideDirection.Right);
-			setPage(page + 1);
+			setPage((page: number) => page + 1);
 		}
-	}, [props.children]);
+	}, [ props.dynamic, props.children, props.slide, props.infinite, props.pageCount ]);
 
 	useEffect(() => {
 		autoSwipe();