потому что у тебя в зависимостях
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)
}
}