Merge pull request #70 from jorgeruvalcaba/fix/footer-rehydration-issue

components/Footer.tsx

@@ -11,6 +11,7 @@ export const Footer: React.FC<{
   isDarkMode: boolean
   toggleDarkMode: () => void
 }> = ({ isDarkMode, toggleDarkMode }) => {
+  const [hasMounted, setHasMounted] = React.useState(false)
   const toggleDarkModeCb = React.useCallback(
     (e) => {
       e.preventDefault()
@@ -19,19 +20,25 @@ export const Footer: React.FC<{
     [toggleDarkMode]
   )
 
+  React.useEffect(() => {
+    setHasMounted(true)
+  }, [])
+
   return (
     <footer className={styles.footer}>
       <div className={styles.copyright}>Copyright 2021 {config.author}</div>
 
-      <div className={styles.settings}>
-        <a
-          className={styles.toggleDarkMode}
-          onClick={toggleDarkModeCb}
-          title='Tottle dark mode'
-        >
-          {isDarkMode ? <IoMoonSharp /> : <IoSunnyOutline />}
-        </a>
-      </div>
+      {hasMounted ? (
+        <div className={styles.settings}>
+          <a
+            className={styles.toggleDarkMode}
+            onClick={toggleDarkModeCb}
+            title='Tottle dark mode'
+          >
+            {isDarkMode ? <IoMoonSharp /> : <IoSunnyOutline />}
+          </a>
+        </div>
+      ) : null}
 
       <div className={styles.social}>
         {config.twitter && (