Почему не срабатывает clearInterval?

Question

[Svetlana_Ilina]

Подскажите, пожалуйста, что делаю не так, внутри элемента завожу интервал на смену индекса, чтобы по индексу выводились разные картинки, интервал работает, но changeGifClickHandler не отрабатывает как надо

const Post = (props) => {
  const { body, title, gifs } = props
  const [indexOfGif, setIndexOfGif] = useState(0)
  const [gifIntervalId, setGifIntervalId] = useState(null)
  const postRef = useRef(null)

  useEffect(() => {
    startGifInterval()

    function changeGifClickHandler() {
      if (!gifIntervalId) {
        clearInterval(gifIntervalId)
        setGifIntervalId(null)
      }
    }

    postRef.current.addEventListener('click', changeGifClickHandler)

    return () => {
      postRef.current.removeEventListener('click', changeGifClickHandler)
      clearInterval(gifIntervalId)
    }
  }, [gifs])

  function startGifInterval() {
    if (!gifIntervalId) {
      const intervalId = setInterval(() => {
        setIndexOfGif((prevInd) => (prevInd + 1) % gifs.length)
      }, 1000)
      setGifIntervalId(intervalId)
    }
  }

  return (
    <div className={styles.post} ref={postRef}>
      <div className={styles.gifContainer}>
        <img className={styles.gif} src={gifs[indexOfGif]} alt={'homer'} />
      </div>
      <h2 className={styles.title}>{title}</h2>
    </div>
  )
}

export default Post

Answer 1

[Даша Циклаури]

потому что у тебя в зависимостях useEffect нет меняющегося стэйта gifIntervalId. как он его увидит?
замени gifIntervalId на useRef вместо useState. Плюс у тебя неправильная проверка в changeGifClickHandler, проверяешь если интервал не выставлен

const { gifs } = props
  const [indexOfGif, setIndexOfGif] = useState(0)
  const gifIntervalId = useRef(null)
  const postRef = useRef(null)

  useEffect(() => {
    startGifInterval()

    function changeGifClickHandler() {
      if (gifIntervalId.current) {
        clearInterval(gifIntervalId.current)
      }
    }

    postRef.current.addEventListener('click', changeGifClickHandler)

    return () => {
      postRef.current.removeEventListener('click', changeGifClickHandler)
      clearInterval(gifIntervalId.current)
    }
  }, [gifs])

  function startGifInterval() {
    if (!gifIntervalId.current) {
      gifIntervalId.current = setInterval(() => {
        setIndexOfGif((prevInd) => (prevInd + 1) % gifs.length)
      }, 1000)
    }
  }