Attempting to create a countdown timer, but encountering an interesting issue...
This code triggers twice in a row, causing the useEffect function to run twice per second.
'use client'
import {useState, useEffect, useRef} from 'react'
export default function Home() {
const [timer, setTimer] = useState(null)
let intervalId = useRef(null)
const start=()=>{
setTimer(900)
intervalId.current = setInterval(()=>{
setTimer((timer)=>timer-1)
}, 1000)
}
useEffect(()=>{
if (timer < 1 && timer != null) {
setTimer(null)
clearInterval(intervalId.current);
console.log("proccccccccccccc")
}
}, [timer])
useEffect(()=>{
start()
}, [])
return (
<main className="">
{timer}
</main>
)
}
The function executes once per second when removing the condition && timer != null in the useEffect.
'use client'
import {useState, useEffect, useRef} from 'react'
export default function Home() {
const [timer, setTimer] = useState(null)
let intervalId = useRef(null)
const start=()=>{
setTimer(900)
intervalId.current = setInterval(()=>{
setTimer((timer)=>timer-1)
}, 1000)
}
useEffect(()=>{
if (timer < 1) {
setTimer(null)
clearInterval(intervalId.current);
console.log("proccccccccccccc")
}
}, [timer])
useEffect(()=>{
start()
}, [])
return (
<main className="">
{timer}
</main>
)
}
Despite multiple readings, the reason behind this behavior is still unclear...