You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have verified that I use latest version of all @mantine/* packages
What version of @mantine/* packages do you have in package.json?
7.10.2
What package has an issue?
@mantine/carousel
What framework do you use?
Next.js
In which browsers you can reproduce the issue?
Chrome
Describe the bug
I am using the Carousel component. The onSlideChange method of the Carousel becomes stale due to the implementation within the library. When I examined the source code, I understood the reason, but I couldn't run the source code in a dev environment. That's why I'm opening this issue.
Here is the method I provide as a callback:
consthandleSlideChange=(index: number)=>{if(pages){// if is unnecessary for this issueconstcurrentPage=pages[index];constpreviousPage=pages[slideIndex];// slideIndex is a stateif(index+1===totalPageCount&&!isReachedEnd){// isReachedEnd is a statesetIsReachedEnd(true);onReachEnd?.(currentPage,index);// callback inside parent component}setSlideIndex(index);if(currentPage){onPageChange(currentPage,index,previousPage);}}};
As you can see, I am trying to call the onPageChange method in the parent with the previous page. However, due to the stale closure issue inside Carousel.tsx, the "slideIndex" within the handler never sees the current value(it always sees the value which comes at very first time). But I confirm that slideIndex in my component is set and changes everytime.
Another example is the usage of isReachedEnd state. If I reach the last slide, I want to call the onReachedEnd method in the parent component, and I want it to happen only once. That's why I wrote an if statement: if isReachedEnd is false, set it to true and notify the parent. Unfortunately, this also doesn't work because, due to the stale closure issue, the method keeps reading the "false" value from the initial render. My expectation is I should not have to define a state then use "useEffect" to handle my business.
The reason is this useEffect and handleSelect method in mantine/Carousel.tsx:
// Carousel.tsxconsthandleSelect=useCallback(()=>{if(!embla)return;constslide=embla.selectedScrollSnap();setSelected(slide);onSlideChange?.(slide);},[embla,setSelected]);// =>> here is the issue, onSlideChange isn't covered in deps array
and the useEffect
// Carousel.tsxuseEffect(()=>{if(embla){getEmblaApi?.(embla);handleSelect();setSlidesCount(embla.scrollSnapList().length);embla.on('select',handleSelect);return()=>{embla.off('select',handleSelect);};}returnundefined;},[embla,slidesToScroll]);// ==>> handleSelect isnt covered in deps array
Because it is not included in the dependency arrays, the callback is cached as it was first passed, and I can never create the updated callback in the current render.
This is the cause of the issue, but I'm not sure how to fix it in mantine Carousel.tsx because I couldn't run in dev mode.
However, after making these adjustments in the source code within the node_modules, I saw that the stale closure problem was resolved. But this time, I noticed that the render was triggered twice, which led to another issue.
I will read contributor article very soon, but I dont have so much time because I have freelence work, so If I can do before you, I will
If possible, include a link to a codesandbox with a minimal reproduction
Dependencies check up
What version of @mantine/* packages do you have in package.json?
7.10.2
What package has an issue?
@mantine/carousel
What framework do you use?
Next.js
In which browsers you can reproduce the issue?
Chrome
Describe the bug
I am using the Carousel component. The
onSlideChange
method of the Carousel becomes stale due to the implementation within the library. When I examined the source code, I understood the reason, but I couldn't run the source code in a dev environment. That's why I'm opening this issue.Here is the method I provide as a callback:
As you can see, I am trying to call the onPageChange method in the parent with the previous page. However, due to the stale closure issue inside Carousel.tsx, the "slideIndex" within the handler never sees the current value(it always sees the value which comes at very first time). But I confirm that
slideIndex
in my component is set and changes everytime.Another example is the usage of
isReachedEnd
state. If I reach the last slide, I want to call the onReachedEnd method in the parent component, and I want it to happen only once. That's why I wrote an if statement: if isReachedEnd is false, set it to true and notify the parent. Unfortunately, this also doesn't work because, due to the stale closure issue, the method keeps reading the "false" value from the initial render. My expectation is I should not have to define a state then use "useEffect" to handle my business.The reason is this useEffect and handleSelect method in mantine/Carousel.tsx:
and the useEffect
Because it is not included in the dependency arrays, the callback is cached as it was first passed, and I can never create the updated callback in the current render.
This is the cause of the issue, but I'm not sure how to fix it in mantine Carousel.tsx because I couldn't run in dev mode.
However, after making these adjustments in the source code within the node_modules, I saw that the stale closure problem was resolved. But this time, I noticed that the render was triggered twice, which led to another issue.
I will read contributor article very soon, but I dont have so much time because I have freelence work, so If I can do before you, I will
If possible, include a link to a codesandbox with a minimal reproduction
https://codesandbox.io/p/sandbox/mantine-react-template-forked-ptfj7y?file=%2Fsrc%2FChild.tsx%3A49%2C37
Possible fix
No response
Self-service
The text was updated successfully, but these errors were encountered: