Next.js Discord

Discord Forum

Hydration error with dialogs and alerts (shadcn components)

Answered
Orangetailed potter wasp posted this in #help-forum
Open in Discord
Orangetailed potter waspOP
When using a dialog or alert dialog, if i attach open={true} or default open to them, i get a hydration error. I need a dialog or alert to open when a user isnt logged in to force them to log in to access the page


https://nextjs.org/docs/messages/react-hydration-error
Answered by Cimarrón Uruguayo
Something like the following I believe:
const [isMounted, setIsMounted] = useState(false)
useEffect(() => {
  setIsMounted(true)
}, [])

if (!isMounted) return null
View full answer

7 Replies

you just need to wait to render till mount
Orangetailed potter waspOP
how do i do this
@Orangetailed potter wasp how do i do this
Cimarrón Uruguayo
You just need to track the state of the component using useState and useEffect
Cimarrón Uruguayo
Something like the following I believe:
const [isMounted, setIsMounted] = useState(false)
useEffect(() => {
  setIsMounted(true)
}, [])

if (!isMounted) return null
Answer
Orangetailed potter waspOP
ooooh
i got the idea, thanks a lot!