title: How to use setInterval inside useEffect to update the state?
body: <p>I'm pretty new to javascript, and I have never used <code>setInterval()</code> before. I am trying to make an automatic slide show. Currently, my slideshow will run once and then stop. How do I get it to continually run? I would really appreciate any help or advice on how to get this to work. Thank you!</p>
  <p>Code specific to <code>setInterval()</code></p>
  <pre><code>const [slideIndex, setSlideIndex] = useState(0)
  const timeout =  React.useRef(null);
  
  useEffect(() =&gt; {
    const nextSlide = () =&gt; {
      setSlideIndex(current =&gt; (current === Carousel.length - 1 ? 0 : current + 1))
    }
    timeout.current  = setInterval(nextSlide, 3000)
  
  }, [slideIndex])
  
  </code></pre>
  <p>Full Code</p>
  <pre><code>import React, {useState, useEffect} from 'react'
  import './Slider.css'
  import BtnSlider from './BtnSlider'
  import CarouselData from './CarouselData'
  
  
  export default function Carousel() {
  
        
  const [slideIndex, setSlideIndex] = useState(0)
  const timeout =  React.useRef(null);
  
  useEffect(() =&gt; {
    const nextSlide = () =&gt; {
      setSlideIndex(current =&gt; (current === Carousel.length - 1 ? 0 : current + 1))
    }
    timeout.current  = setInterval(nextSlide, 3000)
  
  }, [slideIndex])
        
      
     
      const nextSlide = () =&gt; {
          if(slideIndex !== CarouselData.length){
              setSlideIndex(slideIndex + 1)
          } 
          else if (slideIndex === CarouselData.length){
              setSlideIndex(1)
          }
      }
  
      const prevSlide = () =&gt; {
          if(slideIndex !== 1){
              setSlideIndex(slideIndex - 1)
          }
          else if (slideIndex === 1){
              setSlideIndex(CarouselData.length)
          }
      }
  
      const moveDot = index =&gt; {
          setSlideIndex(index)
      }
  
      
  
      return (
          &lt;div className=&quot;container-slider&quot;&gt;
              {CarouselData.map((obj, index) =&gt; {
                  return (
                      &lt;div
                      key={obj.id}
                      className={slideIndex === index + 1 ? &quot;slide active-anim&quot; : &quot;slide&quot;}
                      &gt;
                          &lt;img 
                          src={process.env.PUBLIC_URL + `/Imgs/img${index + 1}.jpg`} 
                          alt=&quot;images&quot;/&gt;
                      &lt;/div&gt;
                  )
              })}
              &lt;BtnSlider moveSlide={nextSlide} direction={&quot;next&quot;} /&gt;
              &lt;BtnSlider moveSlide={prevSlide} direction={&quot;prev&quot;}/&gt;
  
              &lt;div className=&quot;container-dots&quot;&gt;
                  {Array.from({length: 3}).map((item, index) =&gt; (
                      &lt;div 
                      onClick={() =&gt; moveDot(index + 1)}
                      className={slideIndex === index + 1 ? &quot;dot active&quot; : &quot;dot&quot;}
                      &gt;&lt;/div&gt;
                  ))}
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  
  </code></pre>
  <p>CarouselData.js</p>
  <pre><code>import { v4 as uuidv4 } from &quot;uuid&quot;;
  
  const CarouselData = [
    {
      id: uuidv4(),
      title: &quot;Lorem ipsum&quot;,
      subTitle: &quot;Lorem&quot;
    },
    {
      id: uuidv4(),
      title: &quot;Lorem ipsum&quot;,
      subTitle: &quot;Lorem&quot;
    },
    {
      id: uuidv4(),
      title: &quot;Lorem ipsum&quot;,
      subTitle: &quot;Lorem&quot;
    },
  ];
  
  export default CarouselData;
  
  </code></pre>