0

After rendering multiple times, even if no settings were changes for the react-slick slider, the slider completely stops working. No button clicks, no swipes work, and the slider is completely stopped. Here is the problem occuring:

var ReactSlickDemo = React.createClass({
    getInitialState: function(){
    return {count: 0};
  },
    componentDidMount: function(){
   var that = this;
    setInterval(function(){
        that.setState({count: that.state.count + 1});
    },800);
  },
  render: function() {
    var settings = {
        dots: true
    }
    return (
        <div className='container'>
        <Slider {...settings}>
            <img src='http://placekitten.com/g/400/200' />
          <img src='http://placekitten.com/g/400/200' />
          <img src='http://placekitten.com/g/400/200' />
          <img src='http://placekitten.com/g/400/200' />
        </Slider>
      </div>
    );
  }
});

ReactDOM.render(
  <ReactSlickDemo />,
  document.getElementById('container')
);

jsfiddle : https://jsfiddle.net/20bumb4g/727/

To reproduce, click the next and/or previous buttons until you notice that nothing is working anymore. All the code is doing is re-rendering the given component about every second.

Expected when rerendering: The react-slider show continue working, including all buttons.

Actual Result: The react-slider stops sliding and no buttons work anymore.

Piyush Dhamecha
  • 1,485
  • 1
  • 13
  • 22
  • what is the purpose of `setInterval` in `componentDidMount`? seems like it causing the issue you're facing – Sagiv b.g Jun 28 '17 at 07:38
  • without setInterval it doen't fit to the container, you can see some gray area in right side. – Piyush Dhamecha Jun 28 '17 at 07:43
  • hmm, i removed to `componentDidMount` completely and it seems to work fine. what are you doing with `count` anyway? – Sagiv b.g Jun 28 '17 at 07:46
  • its just an demo to show that if we use `setInterval` in `componentDidMount` then its stop working. – Piyush Dhamecha Jun 28 '17 at 07:49
  • well, if you set the state every time the component mounts and force it to re:render, thus calling again to componentDidMount + doing that with setinterval that can flood the event loop – Sagiv b.g Jun 28 '17 at 07:53
  • In our page we have multiple controls including 'react-slick', if we call api async and then update the data of slider then also it freeze randomly. – Piyush Dhamecha Jun 28 '17 at 07:59

0 Answers0