[@mantine/carousel] Fix onSlideChange using stale props values (#6393)

mantinedev · Jun 28, 2024 · 831041b · 831041b
1 parent 0c5e3bb
commit 831041b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/packages/@mantine/carousel/src/Carousel.story.tsx b/packages/@mantine/carousel/src/Carousel.story.tsx
@@ -1,4 +1,5 @@
-import { useRef, useState } from 'react';
+/* eslint-disable no-console */
+import { useCallback, useRef, useState } from 'react';
 import Autoplay from 'embla-carousel-autoplay';
 import type { EmblaCarouselType } from 'embla-carousel-react';
 import { Button, Modal } from '@mantine/core';
@@ -17,9 +18,14 @@ const slides = (
 );
 
 export function Usage() {
+  const [value, setValue] = useState(0);
+  const log = useCallback((index: any) => console.log({ value, index }), [value]);
   return (
     <div style={{ padding: 40, maxWidth: 500 }}>
-      <Carousel slideSize={70} slideGap="md" height={200} withIndicators>
+      <button type="button" onClick={() => setValue(Math.random())}>
+        random
+      </button>
+      <Carousel slideGap="md" height={200} withIndicators onSlideChange={log}>
         {slides}
       </Carousel>
     </div>

diff --git a/packages/@mantine/carousel/src/Carousel.tsx b/packages/@mantine/carousel/src/Carousel.tsx
@@ -263,8 +263,8 @@ export const Carousel = factory<CarouselFactory>((_props, ref) => {
     if (!embla) return;
     const slide = embla.selectedScrollSnap();
     setSelected(slide);
-    onSlideChange?.(slide);
-  }, [embla, setSelected]);
+    slide !== selected && onSlideChange?.(slide);
+  }, [embla, setSelected, onSlideChange, selected]);
 
   const handlePrevious = useCallback(() => {
     embla?.scrollPrev();
@@ -306,7 +306,7 @@ export const Carousel = factory<CarouselFactory>((_props, ref) => {
     }
 
     return undefined;
-  }, [embla, slidesToScroll]);
+  }, [embla, slidesToScroll, handleSelect]);
 
   useEffect(() => {
     if (embla) {