title: Warning: Text content did not match. Server: "I'm out" Client: "I'm in" div
body: <p>I'm using <code>universal-cookie</code> in Next.js project and this the simple code that return a warning in console:</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import Cookies from &quot;universal-cookie&quot;;
  import styles from &quot;../styles/Home.module.css&quot;;
  
  export default function Home() {
    const cook = new Cookies();
    const [session, setSession] = useState(cook.get(&quot;key&quot;));
    const setCookie = () =&gt; {
      cook.set(&quot;key&quot;, &quot;hola&quot;, { secure: true });
      setSession(cook.get(&quot;key&quot;));
    };
    const deleteCookie = () =&gt; {
      cook.remove(&quot;key&quot;, { secure: true });
      setSession(undefined);
    };
  
    return (
      &lt;div className={styles.container}&gt;
        &lt;button onClick={() =&gt; setCookie()}&gt;Save Cookie&lt;/button&gt;
        &lt;button onClick={() =&gt; deleteCookie()}&gt;Delete Cookie&lt;/button&gt;
        {session ? &lt;&gt;I'm in&lt;/&gt; : &lt;&gt;I'm out&lt;/&gt;}
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>When &quot;I'M IN&quot; and then I refresh the page the follow warning appear in console:</p>
  <p><a href="https://i.stack.imgur.com/1O0Vr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1O0Vr.png" alt="enter image description here" /></a></p>
  <p>I have already looked everywhere for a solution.</p>