CODEWITHSUNDEEP
javascriptnode.jsreactjs
user13345902
user13345902

Reputation: 1

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

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.

Upvotes: 0

Views: 51

Answers (3)

gaa
gaa

Reputation: 1162

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!

Upvotes: 1

Tushar Gupta
Tushar Gupta

Reputation: 15923

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)

Upvotes: 3

free bug coding
free bug coding

Reputation: 234

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

Upvotes: 0

Related Questions