Why is useEffect not being triggered?

Question

I have a functional component that is supposed to be a running clock:

import React,{useState,useEffect} from 'react';
import 'materialize-css/dist/css/materialize.min.css';
import { parseTime } from '../../Utils/utils'

const MainClock = (props) => {
    const [timeString, setTimeString] = useState(parseTime(new Date(), true));
    function tick(){
        console.log("TICK:" + timeString)
        setTimeString(parseTime(new Date(), true));
    };

    useEffect(()=>{console.log("rendered!");setTimeout(tick,500);},[timeString]);
    return (
        <div>
            <h5 className="center-align mainclock">{timeString}</h5>
        </div>        
    );
}
 
export default MainClock;

But for some reason it is only being rendered twice and the console output is:

rendered!
TICK:14:56:21
rendered!
TICK:14:56:22

Why isn't useeffect being called after the second render?

Any help is welcomed!

Edit: If it helps, this is parseTime:

const parseTime = (timeDate, withSeconds=false) =>{
    let time = timeDate.getHours()<10 ? `0${timeDate.getHours()}`:`${timeDate.getHours()}`;
    time+=":";
    time+= timeDate.getMinutes()<10 ? `0${timeDate.getMinutes()}`:`${timeDate.getMinutes()}`;
    if(withSeconds){
        time+=":";
        time+=timeDate.getSeconds()<10 ? `0${timeDate.getSeconds()}`:`${timeDate.getSeconds()}`;
    }
    return time;
}

whta's wrong here? i expect "rendered! TICK: ..." will be displayed per 500ms continuously. — wangdev87, Nov 03 '20 at 13:21
@WilliamWang That's the problem. It's not displaying "rendered! TICK: ..." continuously but only twice. — Maor Magori, Nov 03 '20 at 13:24
@WilliamWang `parseTime` returns a formatted hh:mm:ss string to a given Date object. I'm really not sure what is going on if you say it works properly for you. Does your console output continuously prints new "TICK!..."? — Maor Magori, Nov 03 '20 at 13:32
can you attach your whole codebase into the jsfiddle so that i can see your wrong result? — wangdev87, Nov 03 '20 at 13:37
ah, i found the error, just try to update the setTimeout interval not 500. — wangdev87, Nov 03 '20 at 13:39
@WilliamWang I'm afraid not since it's private project. I've added parseTime since he's somehow the culprit. — Maor Magori, Nov 03 '20 at 13:40

Yousaf · Accepted Answer · 2020-11-04T09:53:41.910

4

Problem is the use of setTimeout and the use of low delay, i.e 500ms for the timeout. If you log the return value of parseTime, you will notice that between the two calls, it returns the same time string, so state never updates, leading to the component never re-rendering and hence useEffect never executes again to set another setTimeout.

Solution

Increase the timeout delay or check the return value of the parseTime function and if its the same as the one in the state, call this function again.

Moreover, its more appropriate to use setInterval here instead of setTimeout because setInterval will only need to be called once and it will call the tick function repeatedly until the interval is cancelled. If you use setTimeout, then you will need to call setTimeout again and again to schedule a new tick function call.

edited Nov 04 '20 at 09:53

answered Nov 03 '20 at 13:13

Yousaf

27,861
6
44
69

Wouldn't using `setInterval` create multiple stacking Intervals after every render? And why would I need to add tick to the dependency array if tick is updating a variable that's already in the dependency array? – Maor Magori Nov 03 '20 at 13:21
I think setTimeout is correct rather than setInterval because setInterval always repeatedly call the tick function. – wangdev87 Nov 03 '20 at 13:23
@MaorMagori share the code of `parseTime` and i will add more explanation of why the problems occurs and how it can be solved or share a reproducible example on codesandbox. – Yousaf Nov 03 '20 at 13:30
@Yousaf Added. Is parseTime what's causing the problem? – Maor Magori Nov 03 '20 at 13:35

wangdev87 · Answer 2 · 2020-11-03T14:18:03.487

2

As I indicated above, it is the problem of the short setTimeout timing value - 500ms. To make it work, you need to use setInterval

const MainClock = (props) => {
    const [timeString, setTimeString] = useState(parseTime(new Date(), true));
    function tick(){
        console.log("TICK:" + timeString)
        setTimeString(parseTime(new Date(), true));
    };

    useEffect(() => {
      setInterval(tick, 500);
    }, []);
    useEffect(()=>{console.log("rendered!");},[timeString]);
    return (
        <div>
            <h5 className="center-align mainclock">{timeString}</h5>
        </div>        
    );
}

edited Nov 03 '20 at 14:18

answered Nov 03 '20 at 13:54

wangdev87

8,611
3
8
31

1

You missed the dependency array of `useEffect` hook. You only want the `useEffect` to run only once and you should also use the cleanup function to cancel the `setInterval`. – Yousaf Nov 03 '20 at 14:16

Why is useEffect not being triggered?

2 Answers2

Solution