React-slick: beforeChange() breaks fade

[mcfoton]

Sandbox: https://codesandbox.io/s/2j3onlv9rn
Removing either beforeChange() or fade restores normal behaviour. But I would want to use both :)

NOTE: changing to afterChange() will make slider work, but still mess up the state changes.

[VasiliyBP]

Same issue

[sayedtaqui]

I had the same issue. And what I noticed is that if you setState on beforeChange with fade: true, it breaks the sliders. The kind of hack I used was to delay my setState by 10 milliseconds using setTimeout() and then it works fine.

@akiran Can you give some insight as why it happens?

[engmsilva]

I was having the same problem with the React Hooks fade, I disabled this option in the project and everything went back to normal.

[TianboZ]

I was using react hook, but @sayedtaqui hack doesn't work for me

const [slideState, setSlideState] = useState({
        activeSlide: 0,
        activeSlide2: 0
    });

beforeChange: (current, next) => {
            setTimeout(() =>{
                setSlideState({...slideState, activeSlide: next})

            }, 10)
        },
         afterChange: current => {
                 setSlideState( {...slideState, activeSlide2: current} );
         },

[bichan17]

In my case, the slider would not change slides unless you clicked twice, and beforeChange would get called on the second click.

I was able to work around this bug using setTimeout like so:

beforeChange: (current, next) => { setTimeout(() => onSlideChange(next), 10); }