javascript - Is there any way to suppress hydration warning in React.FC?

Is there any way to suppress hydration warning in React.FC? I have a warning Did not expect server HTML to contain a <div> in <div> because of pause: isServer() thing, but I need it to stop constant requesting to server. Can I somehow replace this thing or just use supressHydrationWarning in ponent like this?

export const NavBar: React.FC<NavBarProps> = ({}) => {  
  const [{ fetching: logoutFetching }, logout] = useLogoutMutation();
  const [{ data, fetching }] = useMeQuery({pause: isServer()}); 
  console.log(data);
  const router = useRouter();
  ...
};

isServer:

export const isServer = () => typeof window === 'undefined';

NavBar is in Layout:

import { Wrapper, WrapperVariant } from "./Wrapper";

interface LayoutProps {
  variant?: WrapperVariant;
}

export const Layout: React.FC<LayoutProps> = ({ children, variant }) => {
  return (
    <>
      <NavBar />
      <Wrapper variant={variant}>{children}</Wrapper>
    </>
  );
};

Then Index page is wrapped in Layout

const Index = () => {
  const [variables, setVariables] = useState({
    limit: 15,
    cursor: null as null | string,
  });
  
  const [{ data, error, fetching }] = usePostsQuery({
    variables,
  });
  
  if (!fetching && !data) {
    return <div>query failed: {error?.message}</div>;
  }
  return (
    <Layout>
        ...
    </Layout>
  )
}

export default withUrqlClient(createUrqlClient, { ssr: true })(Index);
...

...and exported with ssr turned on.

I am using Next.JS with Chakra-UI, so I think it renders here?

import NextDocument, { Html, Head, Main, NextScript } from "next/document";
import { ColorModeScript } from "@chakra-ui/react";

export default class Document extends NextDocument {
  render() {
    return (
      <Html>
        <Head />
        <body>
          {/* Make Color mode to persists when you refresh the page. */}
          <ColorModeScript />
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export const NavBar: React.FC<NavBarProps> = ({}) => {  
  const [{ fetching: logoutFetching }, logout] = useLogoutMutation();
  const [{ data, fetching }] = useMeQuery({pause: isServer()}); 
  console.log(data);
  const router = useRouter();
  ...
};

isServer:

export const isServer = () => typeof window === 'undefined';

NavBar is in Layout:

import { Wrapper, WrapperVariant } from "./Wrapper";

interface LayoutProps {
  variant?: WrapperVariant;
}

export const Layout: React.FC<LayoutProps> = ({ children, variant }) => {
  return (
    <>
      <NavBar />
      <Wrapper variant={variant}>{children}</Wrapper>
    </>
  );
};

Then Index page is wrapped in Layout

const Index = () => {
  const [variables, setVariables] = useState({
    limit: 15,
    cursor: null as null | string,
  });
  
  const [{ data, error, fetching }] = usePostsQuery({
    variables,
  });
  
  if (!fetching && !data) {
    return <div>query failed: {error?.message}</div>;
  }
  return (
    <Layout>
        ...
    </Layout>
  )
}

export default withUrqlClient(createUrqlClient, { ssr: true })(Index);
...

...and exported with ssr turned on.

I am using Next.JS with Chakra-UI, so I think it renders here?

import NextDocument, { Html, Head, Main, NextScript } from "next/document";
import { ColorModeScript } from "@chakra-ui/react";

export default class Document extends NextDocument {
  render() {
    return (
      <Html>
        <Head />
        <body>
          {/* Make Color mode to persists when you refresh the page. */}
          <ColorModeScript />
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Share Improve this question edited Apr 25, 2021 at 17:55 asked Apr 25, 2021 at 17:39 Timofey Melentev 914 silver badges12 bronze badges

show rendering codes – Someone Special Commented Apr 25, 2021 at 17:42
@SomeoneSpecial If you need something else, tell me, I don't know react well, so maybe I didn't understand you properly – Timofey Melentev Commented Apr 25, 2021 at 17:57

Add a ment |

2 Answers 2

Sorted by: Reset to default 9

If you are using NextJS, the simplest solution is to use next/dynamic.

import dynamic from 'next/dynamic'
const NavBar = dynamic(() => import("/path/of/NavBar"), { ssr: false }) //<- set SSr to false

pause option should be the same value both on server and client.

const mounted = useMounted();

const [{ data, fetching }] = useMeQuery({pause: mounted === false});

Check the ponent is mounted:

export const useMounted = () => {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);

    return () => {
      setMounted(false);
    };
  }, []);

  return mounted;
};

Programmer puzzle solving

javascript - Is there any way to suppress hydration warning in React.FC? - Stack Overflow

2 Answers 2

Articles related to this article

comment list (0)