CODEWITHSUNDEEP
javascriptreactjsreact-hooksuse-effect
Malloc28
Malloc28

Reputation: 97

setTimeout in useEffect hook

I am attempting to make it so that a different page from an array is displayed every 5 seconds. I currently have it working, except the page isn't always switching every 5 seconds, but sometimes 10 or 15 seconds. I believe this to be because I am not clearing the timeout correctly, any suggestions?

const pages = [
    'screen1', 'screen2'
];

const [displayedPage, setDisplayedPage] = useState(pages[0]);
const [count, setCount] = useState(0);

   useEffect(() => {
    const timer: ReturnType<typeof setTimeout> = setTimeout(() => {
        const randomNumber = pages[Math.floor(Math.random() * pages.length)];

        if (randomNumber === displayedPage) {
            setCount(count + 1);
            clearTimeout(timer);
            return timer;
        }
        setDisplayedPage(randomNumber);
    }, 5000);

    return () => clearTimeout(timer);

});

Upvotes: 1

Views: 1109

Answers (1)

JeanJacquesGourdin
JeanJacquesGourdin

Reputation: 1843

To make everlasting cycles you should use setInterval, to avoid problems with rerenders you can useRef

const pages = [ 'screen1', 'screen2' ];

const [displayedPage, setDisplayedPage] = useState(0);
const [count, setCount] = useState(0);
const timer = useRef()

useEffect(() => {
  const timer.current = setInterval(() => {
    const randomNumber = Math.floor(Math.random() * pages.length);
    setCount(count + 1);
    setDisplayedPage(current => 
      randomNumber == current ? 
        pages[(current+1)%pages.length]
        :
        pages[randomNumber]
    );
  }, 5000);
  return () => clearInterval(timer.current);
});

Upvotes: 1

Related Questions