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/