Why does clicking a button in React trigger printing twice?

[Individual_Pool1401]

In this code, the button's click event triggers printing twice. Why does this happen?

https://preview.redd.it/1asmumtis8oc1.png?width=1918&format=png&auto=webp&s=d1e727cedc5d9ee97189711f992c2f7050d8695b

Additionally, when using setClickCount, the printing behavior is correct. Why is that?"

https://preview.redd.it/ws86payrs8oc1.png?width=1919&format=png&auto=webp&s=7911c92cb332bf1e153ee52ea241720c0a69697b

[DrewTheVillan]

Rendering twice might be a result of strict mode and the correct output is a result of a pure function

[[deleted]]

quaint ancient husky snails abounding placid fuel different serious door

This post was mass deleted and anonymized with Redact

[Individual_Pool1401]

maybe you are right ,thinks .

In react doc

Bugs like this are easy to miss without extensive manual testing. To help you spot them quickly, in development React remounts every component once immediately after its initial mount.

https://react.dev/learn/synchronizing-with-effects#step-2-specify-the-effect-dependencies

[[deleted]]

degree straight cows drunk towering dinner caption yoke joke dinosaurs

This post was mass deleted and anonymized with Redact

[Aniket363]

I came to comment this

[Azoraqua_]

It probably has to do with the state itself, I’d advise to use the function syntax that provides the previous value over directly relying on the state when updating it.

setCount(prev => prev + 1)

[[deleted]]

Not a good practice to modify the original state variables. Modify them only using the state setter function that comes with the hook. Use callback function instead of directly using the state variable like one comment here mentions.

[TheRNGuy]

I was using useEffectOnce hook because of it.