Transition Ref and Listener

Slider.js

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

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

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

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

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

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