diff --git a/web/src/ui/shared/formattedDate/useFormattedDate.ts b/web/src/ui/shared/formattedDate/useFormattedDate.ts index 4d376dd33..e7d6d2d7a 100644 --- a/web/src/ui/shared/formattedDate/useFormattedDate.ts +++ b/web/src/ui/shared/formattedDate/useFormattedDate.ts @@ -1,4 +1,4 @@ -import { useMemo, useEffect, useReducer } from "react"; +import { useMemo, useEffect, useState } from "react"; import { useLang } from "ui/i18n"; import { getFormattedDate } from "./getFormattedDate"; import { fromNow } from "./dateTimeFormatter"; @@ -15,23 +15,27 @@ export function useFormattedDate(params: { time: number }): string { export function useFromNow(params: { dateTime: number }) { const { dateTime } = params; - const [trigger, forceUpdate] = useReducer(n => n + 1, 0); + const { lang } = useLang(); + + const [fromNowText, setFromNowText] = useState(() => fromNow({ dateTime })); useEffect(() => { - const timer = setInterval(() => forceUpdate(), 1000); + const updateText = () => { + const newText = fromNow({ dateTime }); - return () => { - clearTimeout(timer); + if (fromNowText !== newText) { + setFromNowText(newText); + } }; - }, []); - const { lang } = useLang(); + updateText(); - const fromNowText = useMemo( - () => fromNow({ dateTime }), + const timer = setInterval(updateText, 1000); - [lang, trigger, dateTime] - ); + return () => { + clearInterval(timer); + }; + }, [dateTime, lang]); return { fromNowText }; }