useEffect not producing data in console.log in sequence

Question

i am a begginer to react i am learning the useEffect hook currently i am a little bit confused over the sequence at which the data in console.log is printed , please explain it in steps , thanks

initailly i see b and c printed but then i see a ,b ,c after each second why is that ? code

 const [count, setCount] = useState(0);


 const tick = () => {

   setCount(count + 1)
 }

 useEffect(() => {
   console.log("b")

   const intervel = setInterval(tick, 1000)

   console.log("c")
   return () => {
     console.log("a")
     clearInterval(intervel)

   }
 }, [count]);

gmoniava · Accepted Answer · 2021-09-11 18:08:47Z

1

The function inside which you print a is called a cleanup function. React calls that function before applying the next effects. That is why you see afterwards a printed each time count is changed. It is a cleanup being called from the previous render before applying effect for this render. From the docs:

When exactly does React clean up an effect? React performs the cleanup when the component unmounts. However, as we learned earlier, effects run for every render¹ and not just once. This is why React also cleans up effects from the previous render before running the effects next time. We’ll discuss why this helps avoid bugs and how to opt out of this behavior in case it creates performance issues later below.

¹ That part of docs didn't talk about dependencies yet, hence it mentions effects running on each render.

edited Sep 11, 2021 at 18:08

answered Sep 11, 2021 at 17:56

gmoniava

28.9k9 gold badges61 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

NickC · Accepted Answer · 2021-09-11 18:12:26Z

0

The function you are returning at the end of useEffect()

return () => {
     console.log("a")
     clearInterval(intervel)
   }

is not run the first time the component renders. That is called a cleanup function. You are returning that anonymous function to the top of the execution queue on the next render.

Knowing that, we can see that your render cycle will look something like this

Render 1:

console.log("b")

wait 1 second

console.log("c")

return console.log("a") to next render

Render 2:

console.log("a")

console.log("b")

wait 1 second

console.log("c")

return console.log("a") to next render

answered Sep 11, 2021 at 18:12

NickC

3974 silver badges18 bronze badges

1 Comment

nodeDev Over a year ago

thanks a lot maan , also i dont't think there will be one second wait for b or c but there will be wait one second wait and then the useEffect runs again because its setInterval(tick,1000) it will call tick function after 1 second which increase the count by 1 , i am not sure but i think its like that , share anything if you knoq , again thanks.

Omar Khaled · Accepted Answer · 2021-09-11 17:55:18Z

0

you set that useEffect depend on [count]

it means that you ask useEffect to recall everytime count change and call returned function (

return ()=>{
console.log("a")
clearInterval(intervel)

}

) after count change so

first component render after render useEffect call this function

   console.log("b")

   const intervel = setInterval(tick, 1000)

   console.log("c")

but tick change count every 1s and useEffect depend on it so after 1s useEffect will clear because count changed so interval will stop

and will call again so it will create a new interval and start again again again

answered Sep 11, 2021 at 17:55

Omar Khaled

5092 gold badges5 silver badges19 bronze badges

Collectives™ on Stack Overflow

useEffect not producing data in console.log in sequence

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related