ReactJS custom hook for page visibility change. Track tabs and window switch.

usePageVisibility.js

/*
* This react hook tracks page visibility using browser page visibility api.
* Reference: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
* 
* Use: const pageVisibilityStatus = usePageVisibility(); 
* Return type: boolean
*/

import { useState, useEffect } from 'react';

let hidden, visibilityChange;

if (typeof document.hidden !== 'undefined') {
    hidden = 'hidden';
    visibilityChange = 'visibilitychange';
} else if (typeof document.msHidden !== 'undefined') {
    hidden = 'msHidden';
    visibilityChange = 'msvisibilitychange';
} else if (typeof document.webkitHidden !== 'undefined') {
    hidden = 'webkitHidden';
    visibilityChange = 'webkitvisibilitychange';
}

export default function usePageVisibility() {
    const [visibilityStatus, setVisibilityStatus] = React.useState(document[hidden]);

    React.useEffect(() => {
        function handleVisibilityChange() {
            setVisibilityStatus(document[hidden]);
        }

        document.addEventListener(visibilityChange, handleVisibilityChange);

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

    return visibilityStatus;
}

For Nextjs 13:

// use-page-visibility.ts
'use client'

import { useState, useEffect } from 'react'

type Hidden = keyof Pick<Document, 'hidden' | 'msHidden' | 'webkitHidden'>
type VisibilityChange = keyof Pick<
  DocumentEventMap,
  'visibilitychange' | 'msvisibilitychange' | 'webkitvisibilitychange'
>
let hidden: Hidden | undefined
let visibilityChange: VisibilityChange | undefined

export default function usePageVisibility() {
  if (typeof document?.hidden !== 'undefined') {
    hidden = 'hidden'
    visibilityChange = 'visibilitychange'
  } else if (typeof document?.msHidden !== 'undefined') {
    hidden = 'msHidden'
    visibilityChange = 'msvisibilitychange'
  } else if (typeof document?.webkitHidden !== 'undefined') {
    hidden = 'webkitHidden'
    visibilityChange = 'webkitvisibilitychange'
  }
  const initialHidden = hidden ? document[hidden] : false
  const [visibilityStatus, setVisibilityStatus] = useState<boolean>(initialHidden)

  useEffect(() => {
    const handleVisibilityChange = () => {
      if (hidden) setVisibilityStatus(document[hidden])
    }
    if (visibilityChange) document.addEventListener(visibilityChange, handleVisibilityChange, false)
    return () => {
      if (visibilityChange) document.removeEventListener(visibilityChange, handleVisibilityChange)
    }
  }, [])

  return visibilityStatus
}

// global.d.ts
interface DocumentEventMap {
  msvisibilitychange: Event
  webkitvisibilitychange: Event
}
interface Document {
  msHidden: boolean
  webkitHidden: boolean
}

setVisibilityStatus(document[hidden]);

should be

setVisibilityStatus(!document[hidden]);

I have a question. Why do not use document.visibilityState?
Is it because of cross-browser compatibility?