Next.js Discord

Discord Forum

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Answered
Armenian Gampr dog posted this in #help-forum
Open in Discord
Armenian Gampr dogOP
Hello, I do have a conditional render inside an ul tag in my Navbar.js, and i think it is the cause of the error, because when i remove it, the error disappears. This is the code snippet:

const token = cookies.token;
const usuario = cookies.usuario;


<ul className="navbar-nav">    
  <li className="nav-item">
    <a href="/about" className="link">About us
    </a>
   </li>
   <li className="nav-item">
      <a href="/about" className="link">Team
      </a>
   </li>
   <li className="nav-item">
      <a href="/about" className="link">Articles
      </a>
   </li>
{token ? (
    <li className="nav-item">
        <a href="/about" className="link">Hello,     {usuario.nome}
         </a>
       </a>
    </li>
) : null}
</ul>


How can I use this conditional inside the ul without encountering this error?
Answered by Armenian Gampr dog
Oof, resolved!
I could fix using the useEffect hook, before i was passing the wrong object inside the cookies, now its working and the error is gone!
View full answer

20 Replies

Armenian Gampr dogOP
Does anyone knows how to help me ?
<Milind ツ />
Where is the cookies coming from?
Armenian Gampr dogOP
i'm getting from a context file, that is using react-cookies library
const { cookies } = useContext(AuthContext);
<Milind ツ />
and the component in which you importing this context, have you marked it as "use client"?
Armenian Gampr dogOP
actually not, i'm new using next js, how can i do that?
<Milind ツ />
yea so any kind of react hooks when used in a component inside app router, the component needs to be marked as "use client" on top of the file. So to confirm, are you using app router or pages router?
Armenian Gampr dogOP
i'm using pages router
<Milind ツ />
then its not needed.
try removing the context and return component thru hardcoded token value.

const token = "abc";

and return your ul below
Armenian Gampr dogOP
okay!
when i do that it works, but i need to get the values of the token and user name
<Milind ツ />
then something is wrong with your context
or the library you are using
Armenian Gampr dogOP
I don't know if the error is in the context because the cookies are being retrieved, but they are causing this hydration error, mostly when I reload the pages
<Milind ツ />
you would have to show your context and cookie code to diagnose the issue.
react-cookie provides a builtin hook so why do u need to make a context over it?
@<Milind ツ /> react-cookie provides a builtin hook so why do u need to make a context over it?
Armenian Gampr dogOP
Really? I didn't know that, i will see the documentation
but i found this question on stackoverflow
https://stackoverflow.com/questions/73376650/avoid-hydration-error-in-next-js-with-context-values
and i think i need to use the useEffect, but i already tried and did not work 

const [token, setToken] = useState("");
const [userData, setUserData] = useState({});

    useEffect(() => {
        setToken(cookies.token);
        setUserData(cookies.userData);
    }, []);
Armenian Gampr dogOP
Oof, resolved!
I could fix using the useEffect hook, before i was passing the wrong object inside the cookies, now its working and the error is gone!
Answer
Armenian Gampr dogOP
thanks for helping me @<Milind ツ /> 😊