useVisibilityState - A simple React Hook for tracking document.visibilityState, useful for things like suspending API polling on inactive tabs

useVisibilityState.js

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

export const useVisbilityState = () => {
  const [visibilityState, setVisibilityState] = useState(null);

  const handleVisbilityChange = useCallback(() => {
    setVisibilityState(document.visibilityState);
  }, [setVisibilityState]);

  useEffect(() => {
    document.addEventListener('visibilitychange', handleVisbilityChange);
    return () =>
      document.removeEventListener('visibilitychange', handleVisbilityChange);
  }, [handleVisbilityChange]);

  return visibilityState;
};