polling with pagelifecyle api

listening to visibility state on each setInterval

  React.useEffect(() => {
    const id = setInterval(() => {
      if (document.visibilityState === 'visible') {
        liveData.load("/drops");
      }
    }, 10000);
    return () => clearInterval(id);
  }, []);

updates and clears serInterval based on page state

  const pageLifeCyleEvents = ['focus', 'blur', 'pageshow', 'pagehide', 'freeze', 'resume'];
  const getDocumentState = () => {
    if (document.visibilityState === 'hidden') {
      return 'hidden';
    }
    if (document.hasFocus()) {
      return 'active';
    }
    return 'passive';
  };

  React.useEffect(() => {
    let id: NodeJS.Timer;
    function checkPolling () {
      const state = getDocumentState();
      switch(state) {
        case 'hidden':
        case 'passive':
          clearInterval(id);
          break;
        case 'active': 
          id = setInterval(() => {
            liveData.load("/drops");
          }, 10000);
      }
    }
    pageLifeCyleEvents.forEach((type) => {
      window.addEventListener(type, checkPolling);
    });
    return () => {
      pageLifeCyleEvents.forEach((type) => {
        window.removeEventListener(type, checkPolling);
      });
    }
  }, []);