Why does my setInterval run only once in react hooks?

Question

Why does this code only triggers the setInterval once and then stops...

const MainBar = ()=> {

  const [clock, setClock] = useState("")

  useEffect(() => {
    const interval = setInterval(setClock(clockUpdate()), 1000);
    console.log('Im in useEffect', clock)
  });

...

Whereas passing it into another function makes it work each second like so ?

const MainBar = ()=> {

  const [clock, setClock] = useState("")

  useEffect(() => {
    const interval = setInterval(()=>{setClock(clockUpdate())}, 1000);
    console.log('Im in useEffect', clock)
  });

...

Sorry I'm new to hooks and javascript.

Vahe

Answer 1

setInterval requires a function to be passed for it to execute. It will execute the given function every second in this case. () => { setClock(clockUpdate()) } is actually an anonymous function; a function without a name. If you'd give it a proper name, it'd look like function updater() { setClock(clockUpdate()); }.

setInterval(setClock(clockUpdate()), 1000) doesn't work because setClock(clockUpdate()) is already executed, even before it is passed to setInterval. It cannot schedule it to run again, because it's not a function, it is a result already.

Odense

Thanks but >setClock(clockUpdate()) is already executed I still don't get the big picture, or full understanding of the concept, what further readings do you suggest I should do to fully understand how javascript works, please point me somewhere or guide me what my general approach towards learning javascript should be. – Vahe

I don't have good references readily available, since I learned javascript over a long time myself. What I can recommend, is trying to learn separate things at a time. In the specific case of setInterval(), try to see what it does without react first. In the specific case of functions, try to use named functions first (function abc() { }), then move to function() { ... } and further to () => { } later on. Lastly, combine everything in a single application. The javascript ecosystem isn't easy, it really isn't :) – Odense

Answer 2

You can try this by adding the second parameter in useEffect which means if the clock changes, useEffect will run again

useEffect(() => {
    const interval = setInterval(()=>{setClock(clockUpdate())}, 1000);
    console.log('Im in useEffect', clock)
  }, [clock]);

Counterpane