Resizing Handling

Slider.js

const autoPlayRef = useRef()
const transitionRef = useRef()
const resizeRef = useRef()

useEffect(() => {
  autoPlayRef.current = nextSlide
  transitionRef.current = smoothTransition
  resizeRef.current = handleResize
})

useEffect(() => {
  const play = () => {
    autoPlayRef.current()
  }

  const smooth = () => {
    transitionRef.current()
  }

  const resize = () => {
    resizeRef.current()
  }

  const interval = setInterval(play, props.autoPlay * 1000)
  const transitionEnd = window.addEventListener('transitionend', smooth)
  const onResize = window.addEventListener('resize', resize)

  return () => {
    clearInterval(interval)
    window.removeEventListener('transitionend', transitionEnd)
    window.removeEventListener('resize', onResize)
  }
}, [])

const handleResize = () => {
  setState({ ...state, translate: getWidth(), transition: 0 })
}