Please update to React 18

[gavin-c-tcg]

Please update to React 18

[gavin-c-tcg]

next js can use

import dynamic from "next/dynamic";

const SomeComponent = ()=>{
return <div />
}

const NoSSRSomeComponent  = dynamic(async () => SomeComponent, { ssr: false });

[douglascayers]

If you're using nextjs then @gavin-c-tcg's answer is spot-on.

Otherwise, here is a React 18 component with TypeScript people may use.

no-ssr.tsx

import { ReactNode, useEffect, useState } from 'react';

interface NoSSRProps {
  /**
   * Optional content to show before the component renders on client.
   * This renders during server-side rendering (SSR).
   */
  onSSR?: React.FC;
  /**
   * The content to render on client.
   */
  children?: ReactNode;
}

const EmptySpan: React.FC = (): ReactNode => <span />;

const NoSSR: React.FC<NoSSRProps> = (props: NoSSRProps): ReactNode => {
  const { onSSR = EmptySpan, children = <EmptySpan /> } = props;

  const [isMounted, setIsMounted] = useState<boolean>(false);

  useEffect(() => {
    setIsMounted(true);
    return () => {
      setIsMounted(false);
    };
  });

  return isMounted ? children : onSSR({});
};

export { NoSSR };

Usage

<NoSSR>
  <SomeComponent ... />
</NoSSR>

or

<NoSSR onSSR={() => <div>loading...</div>}>
  <SomeComponent ... />
</NoSSR>