title: react-slick, slickNext fires automatically after re-render when invoked on previous render
body: <p>Below is my code, on dropdown item click, after this.slickNext() invoked, an update event will be fired and this class compoent will be re-rendered. 
  But slickNext method seems to be carried over to the re-render without click, hence, automatically show the second slide in order. </p>
  
  <p>Can I get some help on this please? Thank you.</p>
  
  <pre><code>class CategorySlider extends Component {
  constructor(props) {
      super(props);
  }
  
  next() {
      this.slider.slickNext();
  }
  previous() {
      this.slider.slickPrev();
  }
  render() {
      const categorySlide = (slide,markNotRequired) =&gt;
      (
          &lt;Dropdown
              trigger={trigger}
              icon={null}
              &gt;
              &lt;Dropdown.Menu&gt;
                  &lt;Dropdown.Item text="Not required" onClick={() =&gt; { this.next(); }}/&gt;
                  &lt;Dropdown.Item text="Done" /&gt;
              &lt;/Dropdown.Menu&gt;
              &lt;/Dropdown&gt;
      );
  
      const settings = {
      prevArrow: &lt;PrevArrow /&gt;,
      nextArrow: &lt;NextArrow /&gt;,
      slidesToShow: 1,
      slidesToScroll: 1,
      easing: 'linear'
      };
  
      return (
          &lt;div&gt;
          &lt;Slider ref={slider =&gt; (this.slider = slider)} {...settings}&gt;
              {
              _.map(_.filter(_.values(this.props.slidesVM.slides), slide =&gt; slide.isRequired), (slide,markNotRequired) =&gt; categorySlide(slide, this.props.markNotRequired))
              }
          &lt;/Slider&gt;
          &lt;/div &gt;
      )}
  
  }
  </code></pre>