Как отобразить точное время (конкретно секунды) в react компоненте?

Question

[Марат Шакиров]

Мне нужно отобразить точное время (часы:минуты:секунды) на странице рядом с точным временем, которое прилетает с сервера. У меня есть компонент:

export const TimerFrontend = memo(() => {
  const [date, setDate] = useState(new Date());


  useEffect(() => {
    const animationId = requestAnimationFrame(() => setDate(new Date()));

    return () => {
      cancelAnimationFrame(animationId);
    };
  }, [date]);

  return (
    <>
      <span className="timer__name">Frontend</span>
      <div>{date?.toLocaleTimeString()} </div>
    </>
  );
});

Происходит постоянный мгновенный ререндер компонента из-за использования requestAnimationFrame, я его использую, потому что, если взять setInterval, то там секунды будут с задержкой, а requestAnimationFrame решает эту проблему и создает другую (описал вначале). Если есть идеи или кейсы, буду рад узнать!

Comments

[Retrabaud]

Проблема с мгновенным ререндером вашего компонента вызвана тем, что requestAnimationFrame вызывается на каждом кадре анимации, что приводит к постоянным перерисовкам. Вместо этого вы можете использовать setTimeout с задержкой в 1000 миллисекунд (1 секунда) для обновления времени.

useEffect(() => {
const timerId = setInterval(() => {
setDate(new Date());
}, 1000); // Обновление каждую секунду
return () => {
clearInterval(timerId); // Очистка интервала при размонтировании компонента
};
}, []);

Я бы попробовал пойти таким путем, если правильно понял вашу проблему.

[Марат Шакиров]

Retrabaud, спасибо за ответ! Но я в описании указал, что если использовать интервал, то секунды будут отставать от реального времени

[szQocks]

Марат Шакиров, проверяй внутри requestAnimationFrame секунды, если они отличаются от тех что в date - то только тогда изменяй стейт, нет смысла на каждый тик обновлять стейт

правда в этом случае я вижу минус из того что в useEffect придётся прокидывать date ( хотя он и сейчас у тебя там ), либо сделать через 2 useEffect либо сделать через один но ещё при помощи useRef хука, в который бы записывалось значение date, когда ты обновляешь date , в current - просто хранишь это значение , и его отслеживаешь в useEffect ( это нужно для того что бы не прокидывать date в useEffect ), пробуй

[Kentavr16]

может проще использовать воркер для этого?

[WbICHA]

Марат Шакиров, потому что надо использовать не интервал, а таймаут. И каждый раз высчитывать сколько осталось до следующей секунды, создавая новый таймер.

[Марат Шакиров]

Kentavr16, я, к сожалению, не работал с воркерами, понятия не имею)

[Марат Шакиров]

WbICHA, могу вас попросить продемонстрировать реализацию вашей идеи?

[WbICHA]

Марат Шакиров,

const now = Date.now()
setTimeout(() => {
  // ...
}, now % 1000);

[szQocks]

WbICHA, и почему я до этого не додумался, бррр

наверное потому что я мыслил холстом canvas и анимациями...

[WbICHA]

szQocks, понимаю.) Сам порой излишне сложные решения ищу.
Впрочем, если надо серверное время отображать, то задачка становится не столь тривиальной, ведь надо учитывать разницу между фронтом и беком в миллисекундах, иначе можно получить рассинхрон вплоть до 999мс.

[szQocks]

WbICHA, согласен

[Марат Шакиров]

WbICHA, у меня этот вариант работает так же с опозданием секунд

[WbICHA]

Марат Шакиров, естественно. Это базовое решение.

Answer 1

[szQocks]

https://codesandbox.io/s/beautiful-tdd-ww9g64?file...

https://codesandbox.io/s/zen-merkle-dn2jyl?file=/s...

Comments

[Марат Шакиров]

Спасибо, завтра на работе проверю и отвечу Вам!

[Марат Шакиров]

первый вариант сработал, спасибо!