Bug with React 18, (infinity, cellSpacing, flicker)

[daxamayac]

Bugs and Questions

Prerequisites

• [x] I've searched open issues to make sure I'm not opening a duplicate issue
• [x] I have read through the docs before asking a question
• [x] I am using the latest version of nuka-carousel

Describe Your Environment

• What version of nuka-carousel are you using? 5.0.10
• What version of React are you using? 18.0.0
• What browser are you using? Brave

Describe the Problem

Multiple Problems

1. Infinity mode: the carousel goes blank after a while, (work if remove in _app)
2. When remove work infinity mode, but there is a flicker in the transition.
3. cellSpacing: create double row (click in prev button)

Sandbox: https://codesandbox.io/s/nuka-carousel-react-18-3oelyx

Expected behavior: infinity mode without flicker and with cellSpacing Actual behavior: infinity mode no work, flicker in transition, and cellSpacing crete double row

[vmjaramillo1]

I also have the same problem, after updating my project to react 18 the carousel started to fail with Infinity mode and show white sliders

[ValGeorgiev]

Hey @daxamayac, thanks for raising this with us. I am able to reproduce the bugs with the StrictMode. I will try to ship a fix asap.

[ValGeorgiev]

I found the root cause of this issue. it's caused by React new behaviour under StrictMode. React will unmount and remount the component. This should be fixed now with v5.0.11.

About the cellSpacing property. We really consider removing this property, cause sounds useless. If developer want cell spacing, they can easily wrap their image (for example) in a div with padding: 0 50px. We are doing the same thing, here is a sandbox example . I cannot reproduce the issue with cellSpacing locally. Here is an example with Next.js and cellSpacing link.

About the flickering, can you collaborate more. Recorded video will do the job. Thank you.

[daxamayac]

Hi...

All problems are resolved.

Thanks..