Error Driving Me Crazy

Answered

Siamese Crocodile posted this in #help-forum

Siamese CrocodileOP

2024-04-01T05:07:19.000Z

I'm doing an assignment for school, and I have a hydration error. It only occurs when I add the conditional rendering, without it, it seems to be fine. I've been trying to figure this out for so long, but I don't understand where im going wrong. If someone can help it would be appreciated.

This is the entire component: https://pastebin.com/sq3VPbF6

Answered by Siamese Crocodile

i was missing a literal word in my route guard

View full answer

34 Replies

Siamese CrocodileOP

2024-04-01T05:08:04.000Z

Another thing is, it only occurs when i refresh the page after logging in, if I don't refresh, the hydration error doesn't occur.

@Siamese Crocodile I'm doing an assignment for school, and I have a hydration error. It only occurs when I add the conditional rendering, without it, it seems to be fine. I've been trying to figure this out for so long, but I don't understand where im going wrong. If someone can help it would be appreciated. This is the entire component: https://pastebin.com/sq3VPbF6

Ray

2024-04-01T05:11:57.000Z

make this hook

import { useCallback, useEffect, useRef } from 'react'

export function useIsMounted(): () => boolean {
  const isMounted = useRef(false)

  useEffect(() => {
    isMounted.current = true

    return () => {
      isMounted.current = false
    }
  }, [])

  return useCallback(() => isMounted.current, [])
}

then in your page

const MainNav = () => {
    let router = useRouter();
    let token = readToken();
    const [searchField, setSearchField] = useState('');
    const [isExpanded, setIsExpanded] = useState(false);
    const [searcHistory, setSearchHistory] = useAtom(searchHistoryAtom);
    const isMounted = useIsMounted()

    const hasUser = token && isMounted

    .....

    return (
      ....
       <Nav>
                            {hasUser && (
                                <NavDropdown
                                    title="User Name"
                                    id="basic-nav-dropdown"
                                >
                           
               
      ....
    )

Siamese CrocodileOP

2024-04-01T05:13:05.000Z

idk if I'd be allowed to do it this way because its a school assignment

Ray

2024-04-01T05:13:22.000Z

look like the token is not available when the page is rendering on server so it render different result than on browser and causing the hydration error

Siamese CrocodileOP

2024-04-01T05:13:44.000Z

ohh ok i see.

@Siamese Crocodile idk if I'd be allowed to do it this way because its a school assignment

Ray

2024-04-01T05:13:56.000Z

what way? you could add a useEffect in MainNav too

just make sure the nav render on browser only

@Ray what way? you could add a useEffect in MainNav too

Siamese CrocodileOP

2024-04-01T05:16:11.000Z

if it doesn't say to use a hook we usually aren't supposed to use it.

@Siamese Crocodile if it doesn't say to use a hook we usually aren't supposed to use it.

Ray

2024-04-01T05:16:34.000Z

well it is using hook already

useRouter, useState useAtom

all are hook

Siamese CrocodileOP

2024-04-01T05:17:03.000Z

yeah i meant if it doesn't specify a hook, you aren't supposed to use one

Ray

2024-04-01T05:17:35.000Z

so are useEffect and useRef allowed?

Siamese CrocodileOP

2024-04-01T05:17:41.000Z

no they are not

also, my friend was able to have no hydration errors without using a hook so im not too sure whats wrong with my code.

Ray

2024-04-01T05:19:14.000Z

try !token && typeof window !== 'undefined'

and token && typeof window !== 'undefined'

if it doesn't work, I need to see the code on readToken

or just do

if (!token) return null
return (
  <>
    <Navbar
        className="fixed-top navbar-light bg-body-tertiary"
        expand="lg"
        expanded={isExpanded}
    >
    ...
  </>
)