title: How to check online status in React.js?
body: <p>I have created a function that checks if the application is online or not. However, based on the MDN documentation, <code>navigator.onLine</code> is giving false positives on Chrome and Safari which I'm currently experiencing right now. Is there any other way to resolve this current issue?</p>
  <p>useOnlineStatus.ts:</p>
  <pre><code>import { useEffect, useState } from 'react'
  
  const getOnlineStatus = (): boolean =&gt; {
    return typeof navigator !== 'undefined' &amp;&amp;
      typeof navigator.onLine === 'boolean'
      ? navigator.onLine
      : true
  }
  
  const useOnlineStatus = (): boolean =&gt; {
    const [onlineStatus, setOnlineStatus] = useState(getOnlineStatus())
  
    const goOnline = () =&gt; setOnlineStatus(true)
  
    const goOffline = () =&gt; setOnlineStatus(false)
  
    useEffect(() =&gt; {
      window.addEventListener('online', goOnline)
      window.addEventListener('offline', goOffline)
  
      return () =&gt; {
        window.removeEventListener('online', goOnline)
        window.removeEventListener('offline', goOffline)
      }
    }, [])
  
    return onlineStatus
  }
  
  export default useOnlineStatus
  
  </code></pre>