Merge pull request #904 from InseeFrLab/fix-rerender-issue

Do not cause rerender when fromNowText has not changed

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 };
 }