Hari ini saya menemukan cara memperbaiki bug aneh di React Slick ketika infinite diset ke false dan initialSlide > 1.

Di proyek saya, slider yang tidak “infinite” dan dimulai dari slide ke-2 atau ke-3 ternyata tampil tidak sesuai. Slide yang muncul salah, dan posisinya seperti tidak sinkron.

Setelah mencari tahu, saya menemukan issue di GitHub yang menjelaskan bug ini. Solusinya sederhana tapi efektif: panggil slickGoTo() secara manual sekali saat komponen pertama kali di-render.

Changing slide works incorrect when infinite is false and initialSlide > 1 · Issue #1946 · akiran/react-slick

Changing slide when initialSlide > 1 and infinite is false works wrong. When I swipe right I expect to see next slide(initial + 1), but I always see second slide as next, when I swipe left, I alway…

GitHubserhii-hrushun-empeek

Berikut versi TypeScript-nya yang saya pakai:

import * as React from 'react';
import {default as SlickSlider} from 'react-slick';

interface Props extends React.ComponentProps<typeof SlickSlider> {
  ref?: React.MutableRefObject<SlickSlider | null>;
}

const Slider = (props: Props) => {
  const {initialSlide} = props;
  const fallbackSliderRef = React.useRef<SlickSlider | null>(null);
  const sliderRef = props.ref || fallbackSliderRef;

  const hasSetPosition = React.useRef<boolean>(false);

  /**
   * workaround for issue changing slide works incorrect when infinite is false and initialSlide > 1
   * https://github.com/akiran/react-slick/issues/1946#issuecomment-768935762
   */
  React.useEffect(() => {
    if (
      sliderRef.current &&
      !hasSetPosition.current &&
      typeof initialSlide === 'number'
    ) {
      sliderRef.current.slickGoTo(initialSlide);
      hasSetPosition.current = true;
    }
    // run on first render only
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return <SlickSlider {...props} ref={sliderRef} />;
};

export default React.memo(Slider);

Masalah kecil, tapi solusinya terasa memuaskan.
Kadang yang paling penting saat menghadapi bug di library pihak ketiga adalah tahu “di mana harus menyentuhnya”.

React slick typescript workaround for issue changing slide works incorrect when infinite is false and initialSlide > 1

React slick typescript workaround for issue changing slide works incorrect when infinite is false and initialSlide > 1 - SlickSlider.tsx

Gist262588213843476