trying to create a clock in nextjs , silly code is not working
Unanswered
Blanc de Hotot posted this in #help-forum
Blanc de HototOP
i'm using client side component but still facing same
38 Replies
@Blanc de Hotot i'm using client side component but still facing same
does it work in normal react project?
Blanc de HototOP
didn't tried
i have set sec and min as dependency, now it working
but i'm not able to understaand
@Blanc de Hotot i'm using client side component but still facing same
i think the
if logic shouldn't be in the setIntervalit should be in a different useeffect
maybe the
if logic inside your useEffect [] is only capturing the hr, min and sec at initial, as closures.Blanc de HototOP
ohh yes yes
i have decalred , these with let
might be it is locally avaiable
never used let for usestate before :/ always used
const for usestate :/Blanc de HototOP
but value will be changed
new reference will be created
but it is working
well
i think you still need to separate the useeffect
i dont think setInterval everytime the sec/min value changed is a good idea ðŸ«
so only at the first
Blanc de HototOP
so what i can do ,
should i go with two effects
Blanc de HototOP
how to distribute code , for two effects
need hint
next time send the code using code block please
```ts
paste code here
```
paste code here
```
Blanc de HototOP
const [hr, setHr] = useState(0);
const [min, setMin] = useState(0);
const [sec, setSec] = useState(0);
let listRef = useRef(0);
useEffect(() => {
const interval = setInterval(() => {
if (sec < 59) {
setSec(prevSec => prevSec + 1);
} else if (sec == 59 && min < 59) {
setSec(0);
setMin(prevMin => prevMin + 1);
} else if (sec === 59 && min === 59) {
setSec(0);
setMin(0);
setHr(prevHr => prevHr + 1);
}
}, 1000);
return () => {
clearInterval(interval);
};
}, [sec, min]);
const [min, setMin] = useState(0);
const [sec, setSec] = useState(0);
let listRef = useRef(0);
useEffect(() => {
const interval = setInterval(() => {
if (sec < 59) {
setSec(prevSec => prevSec + 1);
} else if (sec == 59 && min < 59) {
setSec(0);
setMin(prevMin => prevMin + 1);
} else if (sec === 59 && min === 59) {
setSec(0);
setMin(0);
setHr(prevHr => prevHr + 1);
}
}, 1000);
return () => {
clearInterval(interval);
};
}, [sec, min]);
try again
Blanc de HototOP
const [hr, setHr] = useState(0);
const [min, setMin] = useState(0);
const [sec, setSec] = useState(0);
let listRef = useRef(0);
useEffect(() => {
const interval = setInterval(() => {
if (sec < 59) {
setSec(prevSec => prevSec + 1);
} else if (sec == 59 && min < 59) {
setSec(0);
setMin(prevMin => prevMin + 1);
} else if (sec === 59 && min === 59) {
setSec(0);
setMin(0);
setHr(prevHr => prevHr + 1);
}
}, 1000);
return () => {
clearInterval(interval);
};
}, [sec, min]);
const [min, setMin] = useState(0);
const [sec, setSec] = useState(0);
let listRef = useRef(0);
useEffect(() => {
const interval = setInterval(() => {
if (sec < 59) {
setSec(prevSec => prevSec + 1);
} else if (sec == 59 && min < 59) {
setSec(0);
setMin(prevMin => prevMin + 1);
} else if (sec === 59 && min === 59) {
setSec(0);
setMin(0);
setHr(prevHr => prevHr + 1);
}
}, 1000);
return () => {
clearInterval(interval);
};
}, [sec, min]);
use the code block xD
use this format
```ts
paste code here
```
```ts
paste code here
```
Blanc de HototOP
js const [hr, setHr] = useState(0);
const [min, setMin] = useState(0);
const [sec, setSec] = useState(0);
let listRef = useRef(0);
useEffect(() => {
const interval = setInterval(() => {
if (sec < 59) {
setSec(prevSec => prevSec + 1);
} else if (sec == 59 && min < 59) {
setSec(0);
setMin(prevMin => prevMin + 1);
} else if (sec === 59 && min === 59) {
setSec(0);
setMin(0);
setHr(prevHr => prevHr + 1);
}
}, 1000);
return () => {
clearInterval(interval);
};
}, [sec, min]); thats better
Blanc de HototOP
i'm new to discord , so 
useEffect(() => {
// this wil be run at the first time
const interval = setInterval(() => {
setSec(prev => prev + 1)
}, 1000);
return () => {
// this will be run when component dissapear
clearInterval(interval);
};
}, []);
useEffect(()=>{
// this will be called everytime sec state is changed
if(sec > 59) {
// what happen if sec value goes over 59
}
},[sec])
useEffect(()=>{
// this will be called everytime min state is changed
if(min > 59) {
// what happen if min value goes over 59
}
},[min])here is the hint sir
Blanc de HototOP
thanks bro