It's because it comes from an event, like a click on a button.
React currently will batch state updates if they're triggered from within a React-based event, like a button click or input change. It will not batch updates if they're triggered outside of a React event handler, like an async call.
To be superfluous and point out that performance doesn't matter unless it matters (aka don't optimize before you measure and decide it's a problem based on specs and common sense), in a real world app I'd group seconds and minutes like you did, but keep the counter out and suffer the little performance penalty each second while making everything more readable and naturally fitting the model most of us have in mind when we think about time (seconds, minutes).
I think you can better optimize your code, for example by avoiding multiple re-rendering.
But nice tutorial ! Just don't forget performances!
Thanks for the feedback.
Set state in React will called asynchronously one time, so that this optimization doesn't need at all.
Just console.log, you will see 3 log, because of 3 updates state ;)
Here, we will have only 1 rerender
I checked useState behavoiur and I have 1 render. See example codesandbox.io/s/sweet-star-er91q?...
It's because it comes from an event, like a click on a button.
React currently will batch state updates if they're triggered from within a React-based event, like a button click or input change. It will not batch updates if they're triggered outside of a React event handler, like an async call.
Yea, you're right. I didn't know it. Thanks. But what's reason for work batching only in event handlers?
To be superfluous and point out that performance doesn't matter unless it matters (aka don't optimize before you measure and decide it's a problem based on specs and common sense), in a real world app I'd group seconds and minutes like you did, but keep the counter out and suffer the little performance penalty each second while making everything more readable and naturally fitting the model most of us have in mind when we think about time (seconds, minutes).
Yeah. I tried to avoid making hasty performance optimizations but that's definitely something to consider in a real-world app.