Hydration error fix for articles (HamishMW#39)

* fix DateTime hydration issue Added, UseState for article formatDate function so that the times between client and server are correct. * fix DateTime hydration issue Added, UseState for article formatDate function so that the times between client and server are correct. * fix DateTime hydration issue Added, UseState for article formatDate function so that the times between client and server are correct. * Update src/pages/articles/Articles.js Co-authored-by: Hamish Williams <[email protected]> * Update src/layouts/Post/Post.js Co-authored-by: Hamish Williams <[email protected]> Co-authored-by: Hamish Williams <[email protected]>
NuubDev · May 21, 2022 · 26c1949 · 26c1949
1 parent 3c27f48
commit 26c1949
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/src/layouts/Post/Post.js b/src/layouts/Post/Post.js
@@ -10,7 +10,7 @@ import { tokens } from 'components/ThemeProvider/theme';
 import { Transition } from 'components/Transition';
 import { useParallax, useScrollToHash } from 'hooks';
 import RouterLink from 'next/link';
-import { useRef } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { clamp } from 'utils/clamp';
 import { formatDate } from 'utils/date';
 import { cssProps, msToNum, numToMs } from 'utils/style';
@@ -19,6 +19,11 @@ import styles from './Post.module.css';
 export const Post = ({ children, title, date, abstract, banner, timecode, ogImage }) => {
  const scrollToHash = useScrollToHash();
  const imageRef = useRef();
+ const [dateTime, setDateTime] = useState(null);
+
+ useEffect(() => {
+ setDateTime(formatDate(date));
+ }, [date, dateTime]);
 
  useParallax(0.004, value => {
  if (!imageRef.current) return;
@@ -61,7 +66,7 @@ export const Post = ({ children, title, date, abstract, banner, timecode, ogImag
  <div className={styles.date}>
  <Divider notchWidth="64px" notchHeight="8px" collapsed={!visible} />
  <Text className={styles.dateText} data-visible={visible}>
- {formatDate(date)}
+ {dateTime}
  </Text>
  </div>
  )}

diff --git a/src/pages/articles/Articles.js b/src/pages/articles/Articles.js
@@ -11,7 +11,7 @@ import { Text } from 'components/Text';
 import { useReducedMotion } from 'framer-motion';
 import { useWindowSize } from 'hooks';
 import RouterLink from 'next/link';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { formatDate } from 'utils/date';
 import { classes, cssProps } from 'utils/style';
 import styles from './Articles.module.css';
@@ -27,8 +27,13 @@ const ArticlesPost = ({
  index,
 }) => {
  const [hovered, setHovered] = useState(false);
+ const [dateTime, setDateTime] = useState(null);
  const reduceMotion = useReducedMotion();
 
+ useEffect(() => {
+ setDateTime(formatDate(date));
+ }, [date, dateTime]);
+
  const handleMouseEnter = () => {
  setHovered(true);
  };
@@ -69,7 +74,7 @@ const ArticlesPost = ({
  <div className={styles.postDetails}>
  <div aria-hidden className={styles.postDate}>
  <Divider notchWidth="64px" notchHeight="8px" />
- {formatDate(date)}
+ {dateTime}
  </div>
  <Heading as="h2" level={featured ? 2 : 4}>
  {title}