fix(ui): return toggle theme component just when mounted

Fix hydration error
mateusfg7 · Jun 12, 2023 · 9dbe8f7 · 9dbe8f7
1 parent 3df6194
commit 9dbe8f7
Showing 1 changed file with 7 additions and 0 deletions.
diff --git a/src/app/(blog)/components/header/toggle-theme.tsx b/src/app/(blog)/components/header/toggle-theme.tsx
@@ -1,10 +1,13 @@
 'use client'
 
+import { useEffect, useState } from 'react'
 import { Menu } from '@headlessui/react'
 import { Moon, Sun, Desktop } from '@phosphor-icons/react'
 import { useTheme } from 'next-themes'
 
 export function ToggleTheme() {
+  const [isMounted, setIsMounted] = useState(false)
+
   const { setTheme, theme: currTheme } = useTheme()
 
   const SelectTheme = ({ theme }: { theme: 'light' | 'dark' | 'system' }) => (
@@ -35,6 +38,10 @@ export function ToggleTheme() {
     </button>
   )
 
+  useEffect(() => setIsMounted(true), [])
+
+  if (!isMounted) return <></>
+
   return (
     <Menu as="div" className="relative inline-flex items-center">
       <Menu.Button>