sendou.ink/app/hooks/useVisibilityChange.ts

import React from "react";

// "initial" = user has not tabbed out yet
type Visibility = "initial" | DocumentVisibilityState;

/** Track the `visibilitychange` event: The `visibilitychange` event is fired at the document when the contents of its tab have become visible or have been hidden. */
export function useVisibilityChange() {
  const [visible, setVisible] = React.useState<Visibility>("initial");

  React.useEffect(() => {
    function handleVisibilityChange() {
      setVisible(document.visibilityState);
    }

    document.addEventListener("visibilitychange", handleVisibilityChange);

    return () => {
      document.removeEventListener("visibilitychange", handleVisibilityChange);
    };
  }, []);

  return visible;
}