Menu
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 component 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>
);
}
}
241
asked Oct 22 '25 22:10
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 component is mounted:
export const useMounted = () => {
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
return () => {
setMounted(false);
};
}, []);
return mounted;
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
