Bug: Wrong calculation of the initial state when the responsive options are provided.

[ivan-reutenko-finsight]

Code

Screen.Recording.2025-08-28.at.09.45.17.mov

[jayden-leuciuc]

I had this same issue. I downgraded to 0.30.2 and #2333 (comment) seemed to fix it.

[divyeshsachan]

faced same issue in 0.31.0, had to downgrade to 0.30.3.

[marcinincreo]

+1

[Dominys]

Hi! I also have to downgrade to 0.30.3. Interesting that for me responsive design worked fine in desktop browser but it did not work on mobile so looks like it some kind of issue that is related to mobile only.

[Manvel-M]

Same here. Fixed after downgrade.

[branislavblazek]

same, fixed downgrade to 0.30.3 and everything works fine

[niksonjr]

+1 I use AntDesign v6 which has its own wrapper for react-slick and I have the same issue.

[mrkpatchaa]

This is how I fixed it :
remove the responsive prop entirely and replicate its logic yourself using useSyncExternalStore to track window.innerWidth.

// Module-level stable references — avoids the Object.is infinite loop (if you use `useEffect` + `useState` or return inline object literals from the snapshots, you'll hit an infinite loop because `useSyncExternalStore` compares snapshots with `Object.is`. Snapshots must be **stable references**)
const SLIDES = {
  xs: { slidesToShow: 2.5, slidesToScroll: 2 },
  sm: { slidesToShow: 3.5, slidesToScroll: 2 },
  md: { slidesToShow: 5,   slidesToScroll: 3 },
  lg: { slidesToShow: 6,   slidesToScroll: 5 },
} as const

function getResponsiveSlides(width: number) {
  if (width < 480) return SLIDES.xs
  if (width < 640) return SLIDES.sm
  if (width < 1024) return SLIDES.md
  return SLIDES.lg
}

const subscribeToResize = (callback: () => void) => {
  window.addEventListener('resize', callback)
  return () => window.removeEventListener('resize', callback)
}

function useResponsiveSlides() {
  return useSyncExternalStore(
    subscribeToResize,
    () => getResponsiveSlides(window.innerWidth),
    () => SLIDES.lg, // SSR fallback
  )
}

// Then in your component:
const responsiveSlides = useResponsiveSlides()

<Slider {...baseSettings} {...responsiveSlides} />

Adjust the breakpoint values to match your original responsive array. The subscribeToResize and SLIDES constants must be defined at module scope (outside the component/hook) to stay stable across renders.