title: Next.js redux useSelector causes html mismatch
body: <p>I'm using <strong>Next.js</strong> to create a <strong>React</strong> app, and I'm using <strong>redux</strong> with <strong>redux-toolkit</strong> for state management.</p>
  <p>I'm seeing an error in the console stating:<br />
  <code>Warning: Did not expect server HTML to contain a &lt;button&gt; in &lt;div&gt;</code>.</p>
  <p>I've seen this before, but I'm unsure why this is happening in this particular case.<br />
  Here is a simplified version of the component which has this issue:</p>
  <pre><code>const TopNav = (): JSX.Element =&gt; {
      const user = useSelector(selectAuthUser);
  
      return (
          &lt;&gt;
              &lt;div&gt;{!user &amp;&amp; &lt;LoginNavButton /&gt;}&lt;/div&gt;
          &lt;/&gt;
      );
  };
  </code></pre>
  <p>Here is a workaround I've come up with, but I'm not sure why I have to do this:</p>
  <pre><code>const TopNav = (): JSX.Element =&gt; {
      const user = useSelector(selectAuthUser);
      const [showButton, setShowButton] = useState&lt;boolean&gt;(false);
  
      useEffect(() =&gt; {
          if (!!user) setShowButton(true);
      }, [user]);
  
      return (
          &lt;&gt;
              &lt;div&gt;{showButton &amp;&amp; &lt;LoginNavButton /&gt;}&lt;/div&gt;
          &lt;/&gt;
      );
  };
  </code></pre>
  <p>Can anyone explain why the basic usage of <code>useSelector()</code> and referring to state is causing this issue?  I'm assuming it's because the server doesn't have access to state, etc. however it seems like a pain to have to work around it like this for basic functionality.  Hence, I feel like I'm approaching it incorrectly :)</p>