useDocumentVisibility.ts

import { useSyncExternalStore, useMemo } from 'react';

export const useDocumentVisibility = (): boolean => {
  const subscribe = useMemo(() => {
    return (callback: () => void) => {
      document.addEventListener('visibilitychange', callback);
      return () => document.removeEventListener('visibilitychange', callback);
    };
  }, []);

  const getSnapshot = useMemo(() => {
    return () => document.visibilityState === 'visible';
  }, []);

  return useSyncExternalStore(subscribe, getSnapshot);
};