Problem rendering the Component that has a function in useEffect

Question

I created in my project a "Slide show" component that has the function below to perform the automatic slide. However, when going to another page using the useHistory push function history.push('/about');, however while doing this, and back to the home screen that has the "Slide Show", this useEffect function ends up being executed again, locking the slide.

How can I fix this?

useEffect(() => {
    var slides = document.querySelectorAll(".baner");
    var imagens = document.querySelectorAll(".bc_img img");
    var btns = document.querySelectorAll(".dots");

    function repeat() {
      let active = document.getElementsByClassName("active");
      let i = 1;
      var repeater = () => {
        console.log(i);
        setTimeout(function () {
          [...active].forEach((activeSlide) => {
            activeSlide.classList.remove("active");
          });

          slides[i].classList.add("active");
          btns[i].classList.add("active");
          imagens[i].classList.add("active");
          i++;

          if (slides.length === i) {
            i = 0;
          }
          if (i >= slides.length) {
            return;
          }
          repeater();
        }, 5000);
      };
      repeater();
    }
    repeat();
  }, []);

Answer 1

The useEffect can be disregarded if you return false. You can include a check at the beginning of useEffect:

useEffect(() => {
  if(codicao) return false
}, [])