Как можно отображать точное время с учетом секунд в компоненте React? 

Каким образом можно избежать постоянного ререндеринга компонента при использовании requestAnimationFrame или setInterval для отображения точного времени, прилетающего с сервера, на странице? Я использую requestAnimationFrame, чтобы избежать задержки при отображении секунд, но это приводит к постоянному ререндерингу компонента. Если у вас есть какие-либо идеи или решения, я был бы благодарен. Вот код компонента:

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>
    </>
  );
});
  • 1 ноября 2023 г. 14:00
Ответы на вопрос 2 
Проблема с постоянным ререндерингом компонента связана с тем, что вы указываете `date` в качестве зависимости в массиве зависимостей `useEffect`. Это приводит к перерендеру компонента каждый раз, когда обновляется `date`, что вызывает повторное создание анимационного кадра.

Вместо этого вы можете использовать `useRef` для хранения ссылки на текущий `date`. Это позволит вам обновлять значение `date` без вызова перерендера компонента.

Вот исправленный код:

```js
export const TimerFrontend = memo(() => {
  const dateRef = useRef(new Date());

  useEffect(() => {
    const animationId = requestAnimationFrame(() => {
      dateRef.current = new Date();
      setDate(dateRef.current);
    });

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

  const formattedDate = dateRef.current?.toLocaleTimeString();

  return (
    <>
      <span className="timer__name">Frontend</span>
      <div>{formattedDate}</div>
    </>
  );
});
```

Теперь `dateRef.current` будет обновляться без вызова перерендера компонента, и `formattedDate` будет содержать актуальное отформатированное время для отображения.
1. Разделите код на более мелкие функции, чтобы упростить понимание и поддержку кода.
2. Напишите комментарии к сложным участкам кода, чтобы другим разработчикам было проще его понять.
3. Пользуйтесь понятными и осмысленными именами переменных и функций, чтобы читать код было проще и понятнее.
4. Используйте литеральные значения вместо магических чисел, чтобы сделать код более понятным и гибким.
5. Не повторяйте один и тот же код несколько раз - вынесите его в отдельную функцию или класс.
6. Используйте тесты для проверки правильности работы кода и регулярно их запускайте.
7. Удалите неиспользуемый или ненужный код, чтобы код был более чистым и удобным для работы.
8. Постоянно развивайте свои навыки программирования и изучайте новые технологии.
9. Используйте инструменты отладки, чтобы быстро и легко находить и исправлять ошибки в коде.
10. Будьте внимательны к требованиям и рекомендациям стиля кода, чтобы код был консистентным и понятным для всех разработчиков.

https://codesandbox.io/s/beautiful-tdd-ww9g64?file...
Похожие вопросы
    Показать ещё