visibilitychange with react useSyncExternalStore

useVisibilityChange.tsx

export function useVisibilityChange(serverFallback: boolean) {
  const getServerSnapshot = () => serverFallback;
  const [getSnapshot, subscribe] = useMemo(() => {
    return [
      () => document.visibilityState === 'visible',
      (notify: () => void) => {
        window.addEventListener('visibilitychange', notify);

        return () => {
          window.removeEventListener('visibilitychange', notify);
        };
      },
    ];
  }, []);