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.

CodePudding user response：

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)

CodePudding user response：

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!

CodePudding user response：

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

CodePudding user response：

both code is working fine please check again or restart the app