fix: hydratation error with age calculation

components/Profile/ProfileList/index.tsx

@@ -5,6 +5,7 @@ import { useMemo } from "react"
 import { useI18n } from "@/i18n/i18n.client"
 import { BIRTH_DATE, BIRTH_DATE_STRING, getAge } from "@/utils/getAge"
 import type { CookiesStore } from "@/utils/constants"
+import { useIsMounted } from "@/hooks/useIsMounted"
 
 import { ProfileItem } from "./ProfileItem"
 
@@ -21,18 +22,22 @@ export const ProfileList = (props: ProfileListProps): JSX.Element => {
     return getAge(BIRTH_DATE)
   }, [])
 
+  const { isMounted } = useIsMounted()
+
   return (
     <ul className="m-0 list-none p-0">
       <ProfileItem
         title={i18n.translate("home.about.pronouns")}
         value={i18n.translate("home.about.pronouns-value")}
       />
-      <ProfileItem
-        title={i18n.translate("home.about.birth-date")}
-        value={`${BIRTH_DATE_STRING} (${age} ${i18n.translate(
-          "home.about.years-old",
-        )})`}
-      />
+      {isMounted ? (
+        <ProfileItem
+          title={i18n.translate("home.about.birth-date")}
+          value={`${BIRTH_DATE_STRING} (${age} ${i18n.translate(
+            "home.about.years-old",
+          )})`}
+        />
+      ) : null}
       <ProfileItem
         title={i18n.translate("home.about.nationality")}
         value="Alsace, France"

hooks/useIsMounted.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react"
+
+export interface UseIsMountedResult {
+  isMounted: boolean
+}
+
+export const useIsMounted = (): UseIsMountedResult => {
+  const [isMounted, setIsMounted] = useState(false)
+
+  useEffect(() => {
+    setIsMounted(true)
+  }, [])
+
+  return { isMounted }
+}