Home>

I would like to create a timer that displays the time in a real-time by referring to the link below.
https://www.nishishi.com/javascript-tips/realtime-countdown-deadline.html

Questions/concerns

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

Environment

react
redux
router
MySQL
Laravel

Supplement

【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.