React component to disable children that are not suitable for SSR (Rehydration)

isBrowser.tsx

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

type IsBrowserProps = {
  children: ReactNode;
};

export const IsBrowser = ({ children }: IsBrowserProps) => {
  const [isBrowser, setIsBrowser] = useState(false);

  // this useEffect does not run during SSR
  useEffect(() => {
    setIsBrowser(true);
  }, []);

  if (!isBrowser) {
    // Justification: We specifically need to return an element instead of null
    // in order to have stable content during SSR
    // eslint-disable-next-line react/jsx-no-useless-fragment
    return <></>;
  }

  // eslint-disable-next-line react/jsx-no-useless-fragment
  return <>{children}</>;
};