title: Is there any way to suppress hydration warning in React.FC?
body: <p>Is there any way to suppress hydration warning in React.FC?
  I have a warning <code>Did not expect server HTML to contain a &lt;div&gt; in &lt;div&gt;</code> because of <code>pause: isServer()</code> thing, but I need it to stop constant requesting to server. Can I somehow replace this thing or just use <code>supressHydrationWarning</code> in component like this?</p>
  <pre><code>export const NavBar: React.FC&lt;NavBarProps&gt; = ({}) =&gt; {  
    const [{ fetching: logoutFetching }, logout] = useLogoutMutation();
    const [{ data, fetching }] = useMeQuery({pause: isServer()}); 
    console.log(data);
    const router = useRouter();
    ...
  };
  </code></pre>
  <p>isServer:</p>
  <pre><code>export const isServer = () =&gt; typeof window === 'undefined';
  </code></pre>
  <p>NavBar is in Layout:</p>
  <pre><code>import { Wrapper, WrapperVariant } from &quot;./Wrapper&quot;;
  
  interface LayoutProps {
    variant?: WrapperVariant;
  }
  
  export const Layout: React.FC&lt;LayoutProps&gt; = ({ children, variant }) =&gt; {
    return (
      &lt;&gt;
        &lt;NavBar /&gt;
        &lt;Wrapper variant={variant}&gt;{children}&lt;/Wrapper&gt;
      &lt;/&gt;
    );
  };
  
  </code></pre>
  <p>Then Index page is wrapped in Layout</p>
  <pre><code>const Index = () =&gt; {
    const [variables, setVariables] = useState({
      limit: 15,
      cursor: null as null | string,
    });
    
    const [{ data, error, fetching }] = usePostsQuery({
      variables,
    });
    
    if (!fetching &amp;&amp; !data) {
      return &lt;div&gt;query failed: {error?.message}&lt;/div&gt;;
    }
    return (
      &lt;Layout&gt;
          ...
      &lt;/Layout&gt;
    )
  }
  
  export default withUrqlClient(createUrqlClient, { ssr: true })(Index);
  ...
  </code></pre>
  <p>...and exported with ssr turned on.</p>
  <p>I am using Next.JS with Chakra-UI, so I think it renders here?</p>
  <pre><code>import NextDocument, { Html, Head, Main, NextScript } from &quot;next/document&quot;;
  import { ColorModeScript } from &quot;@chakra-ui/react&quot;;
  
  export default class Document extends NextDocument {
    render() {
      return (
        &lt;Html&gt;
          &lt;Head /&gt;
          &lt;body&gt;
            {/* Make Color mode to persists when you refresh the page. */}
            &lt;ColorModeScript /&gt;
            &lt;Main /&gt;
            &lt;NextScript /&gt;
          &lt;/body&gt;
        &lt;/Html&gt;
      );
    }
  }
  </code></pre>