I am not able to figure out why these two pieces of code work differently

Question

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.

They are exactly same code, line by line, have you made an error while pasting the code here? — Tushar Gupta, Mar 22 '22 at 13:48
Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — CherryDT, Mar 22 '22 at 13:54

score 3 · Answer 1 · answered Mar 22 '22 at 13:53

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)

score 1 · Answer 2 · answered Mar 22 '22 at 13:55

1

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!

answered Mar 22 '22 at 13:55

gaa

1,132
11
26

score 0 · Answer 3 · answered Mar 22 '22 at 13:53

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

I am not able to figure out why these two pieces of code work differently

3 Answers3