Regression: Calling setState on parent component causes ReactSwipe to always render the first item

[dim882]

Description

I'm using the callback option to set state in my parent component. Whenever I flip to the next item, it gets called, but then ReactSwipe then rerenders with the first item visible again. This looks like a regression in 6.x. I was able to downgrade to 5.1.1 and the issue wasn't present.

Demo link

https://codesandbox.io/s/5x1vzx1l9x

[shanehandley]

Hi,

You can use the startSlide option so that when the component re-renders, it starts on the index in state.

Note that using transitionEnd rather than callback looks much better because it won't execute until the slide transition is complete.

https://codesandbox.io/s/wo0vxx0znk

[YIYIYI1205]

var option={
auto:2000,
startSlide:this.state.index,
transitionEnd:index=>{
this.setState({
index
})
}
}

[stianlp]

When setting state and re-rendering the swiper, I get some unexpected behavior. The swiper sometimes jumps back to the previous index right after (or almost during) swiping. It happens very rarely, and you have to swipe quite fast.

Try for yourselves by swiping the example above. Not sure if it's possible to reproduce by clicking next/prev. Think you have to swipe.

[imouto2005-zz]

I was having the same issue as mrdanimal and tried shanehandley's solution by using startSlide and transitionEnd but unfortunately it did not work for me. I eventually downgraded to 5.1.1 too and it solved the problem.

[Cyberlane]

The described issue is most likely due to this line, which was not present in 5.1.1

When you update the state of the parent component, you force a re-render of the children, and that would of course reset entire component. If you want to preserve the index position, you should keep it in your own state and pass it down via the startSlide prop.

If this does not work for you though, I would like to know.

[jahe]

I just migrated from version 5.1.1 to 6.0.4 and also had this problem.

Setting the startSlide in swipeOptions prop worked for me like:

handleTransitionEnd = thumbnailIndex => {
  this.setState({
    activeThumbnailIndex: thumbnailIndex
  })
}

<ReactSwipe
  className="carousel"
  swipeOptions={{ transitionEnd: this.handleTransitionEnd, startSlide: this.state.activeThumbnailIndex }}
  ref={reactSwipe => (this.reactSwipe = reactSwipe)}
>
  ...
</ReactSwipe>

[guodaStatham999]

把callback写在外面就可以了

[bentong95923]

I have the same issue after changing slides (using .next(), prev() or .slide(index, duration)) in an onclick callback. React swipe jumps right back to the first slide without even calling the transitionEnd callback if I call the props.somecallbackfunction (from the parent) in transitionEnd callback function. I have to ditch the transitionEnd callback and find a workaround solution. I hope you understand what I meant.

[bondom]

@Cyberlane @mrdanimal I found a real cause of this issue: swipe-js-iso library updates options passed to Swipe constructor(it is our swipeOptions props) with continuous: true if it is not presented. So when componentDidUpdate is called, new props(without continuous prop) and prev props(with continuos prop added by swipe-js-iso library) are compared, they are not equal, so component is updated

https://github.com/voronianski/swipe-js-iso/blob/master/swipe.js#L54

[bondom]

@bentong95923 If you wanna fix your issue, just add continuous: true prop to swipeOptions prop of ReactSwipe component