React 2 passes rendering
2021-10-02T10:14:39.081Z
2 passes :
- 1st pass during SSR/SSG
- 2nd pass after rehydration during the first update
To render only on the 2nd pass :
function ClientOnly({ children, ...delegated }) {
const [hasMounted, setHasMounted] = React.useState(false);
React.useEffect(() => {
setHasMounted(true);
}, []);
if (!hasMounted) {
return null;
}
return (
<div {...delegated}>
{children}
</div>
);
}
Used with :
<ClientOnly>
<Navigation />
</ClientOnly>
Source : https://www.joshwcomeau.com/react/the-perils-of-rehydration/