I would like to create a timer that displays the time in a real-time by referring to the link below.


When managing the count value to be displayed with state,
Will performance fall?
I want to render every second and change the state.
I would like advice if there is the best way.

Learn more

①Registration date is registered in DB
②When mounting, save the deadline in state
③Count value is managed by state
④ The counting function is part of the website, so there are other rendering timings
⑤ Scheduled to count down every second using setInterval

For example,
・ Current: 2019-12-01 23:50:00
(1) Time limit stored in DB: 2019-12-02 00:00:00
② Deadline of state: 2019-12-02 00:00:00
③Display: Remaining 0 days 0 hours 10 minutes 0 seconds




【About the decrease in performance】
The browser displays slowly or
Whether or not the operation such as transition to the link destination is slow.

Seen when you use a lot of images, etc.
It is an image with the browser becoming heavier and slower.

  • Answer # 1

    It's hard to answer because the definition of "decreasing performance" is not clear.

    I have experience in making timers using react-redux, but it doesn't stick to CPU100%.

  • Answer # 2

    I implemented it by changing the state every second as planned.
    It works normally without slowing down.
    Thank you very much.

Related articles