This piece of code works fine and increments the count every second.
import React, { useEffect, useState } from 'react'
function IntervalHookCounter() {
const [count, setCount] = useState(0)
const tick = () => {
console.log("Called tick")
setCount(prevCount => prevCount+1)
}
useEffect(() => {
const interval = setInterval(tick, 1000)
return () => {
clearInterval(interval)
}
}, [])
return (
<div>
<h1>{count}</h1>
</div>
)
}
export default IntervalHookCounter
But this piece of code only goes up 1 count and then stops
import React, { useEffect, useState } from 'react'
function IntervalHookCounter() {
const [count, setCount] = useState(0)
const tick = () => {
console.log("Called tick")
setCount(count+1)
}
useEffect(() => {
const interval = setInterval(tick, 1000)
return () => {
clearInterval(interval)
}
}, [])
return (
<div>
<h1>{count}</h1>
</div>
)
}
export default IntervalHookCounter
Any idea why this might be the case. Please help this is getting really confusing.
The first code block - is using the previous state to increment the count, i.e. Take the previous value and increment by 1. Prev state is updated in the callback
In your second code block, - setCount(count+1) doesn't have access to the new count value in the subsequent render because the useEffect() is not invoked the second time. count always has the value of 0 within the setInterval callback, (0 is the default state)
This line screws you over:
setCount(count+1)
cause count is constant from outer scope and it is always 0 (even if it was let you never reassign it) so effectively you end up always with 0+1 in 2nd example
cheers!
this has to do with closures.
In short the first tick make sure that we add 1 to the previous state each second.
the Second add 1 to count and for the function tick the count is always 0 (the first value of the count) so the function is fired every second but count + 1 is always 1 because count is always 0 for the tick function