How can I use more than one setTimeOut in a single react component?

Question

Using useState and setTimeout, I am trying to run one timer for 4 seconds, and a second one for an additional 4 seconds (totaling 8 seconds on the second one). But when I use 2 setTimeOut's in a single react control, I get a strange behavior where it appears the second setTimeout is looping itself.

I've tried:

setTimeout(()=>{
   setReadinessCheckStatus('Checking');
}, 4000);

setTimeout(()=>{
   setReadinessCheckStatus('Checked');
}, 8000);

following other documentation I found on stack overflow (Effective way to running multiple setTimeout at the same time in React Native)

let loop1 = setTimeout(()=>{
   setReadinessCheckStatus('Checking');
}, 4000);

let loop2 = setTimeout(()=>{
   setReadinessCheckStatus('Checked');
}, 8000);

and even nested loops.

let loop1 = setTimeout(()=>{
   setReadinessCheckStatus('Checking');

   setTimeout(()=>{
        setReadinessCheckStatus('Checked');
   }, 2000);
}, 4000);

Please provide enough code so others can better understand or reproduce the problem. — Community, Jun 29 '22 at 05:14

score 0 · Answer 1 · answered Jun 29 '22 at 04:14

0

You should show all your component code. Did you write setTimeout in useEffect?

answered Jun 29 '22 at 04:14

Zotille

113
8

How can I use more than one setTimeOut in a single react component?

1 Answers1