DEV Community

Safal Bhandari
Safal Bhandari

Posted on

Detecting Online and Offline Status in React

In modern web applications, knowing whether a user is online or offline can help improve user experience. For example, you might want to display a notification, queue API requests, or disable certain features when the user is offline.

This article explains a React hook implementation that detects online and offline status in real time.

The Code 

import React, { useEffect, useState } from "react";

function useIsOnline() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {
    const handleIsOffline = () => setIsOnline(false);
    const handleIsOnline = () => setIsOnline(true);

    window.addEventListener("online", handleIsOnline);
    window.addEventListener("offline", handleIsOffline);

    return () => {
      window.removeEventListener("online", handleIsOnline);
      window.removeEventListener("offline", handleIsOffline);
    };
  }, []);

  console.log(isOnline);
  return { isOnline };
}

function App() {
  const { isOnline } = useIsOnline();

  return (
    <div>
      {isOnline ? <p>Hello online user</p> : <p>Hi offline user</p>}
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

How It Works

1. Using navigator.onLine for Initial State 

const [isOnline, setIsOnline] = useState(navigator.onLine);
Enter fullscreen mode Exit fullscreen mode

  • navigator.onLine is a built-in browser property that returns:

    • true → if the browser is online
    • false → if the browser is offline

  • This ensures that when your component first renders, the network state is correctly reflected.

2. Using Event Listeners to Track Changes 

window.addEventListener("online", handleIsOnline);
window.addEventListener("offline", handleIsOffline);
Enter fullscreen mode Exit fullscreen mode

  • "online" event fires when the browser gains internet connection.

  • "offline" event fires when the browser loses connection.

  • These events keep your state up-to-date, so the UI reacts instantly when network status changes.

3. Cleaning Up Event Listeners 

return () => {
  window.removeEventListener("online", handleIsOnline);
  window.removeEventListener("offline", handleIsOffline);
};
Enter fullscreen mode Exit fullscreen mode
  • Cleanup is essential in React useEffect to prevent memory leaks or multiple listeners stacking up.
  • Without this, your app might log multiple messages or re-render unnecessarily every time the component mounts/unmounts.

4. Using the Hook in Your Component 

const { isOnline } = useIsOnline();
Enter fullscreen mode Exit fullscreen mode
  • The useIsOnline hook returns an object with the current online status.
  • The component can then conditionally render UI based on isOnline: 
{isOnline ? <p>Hello online user</p> : <p>Hi offline user</p>}
Enter fullscreen mode Exit fullscreen mode

Benefits of This Approach

  1. ✅ Accurate initial state with navigator.onLine.
  2. ✅ Real-time updates using event listeners.
  3. ✅ Clean and reusable hook (useIsOnline) for any component.
  4. ✅ Easy to extend for more advanced features (e.g., syncing queued requests when back online).

Real-World Use Cases

  • Offline notifications for Progressive Web Apps (PWAs).
  • Queuing API requests while offline and sending them automatically when online.
  • Disabling features that require an active internet connection.
  • Analytics to track user connectivity patterns.

Conclusion

By combining navigator.onLine and the "online"/"offline" events, we can build a robust network-aware React application. Using a custom hook like useIsOnline keeps your code clean, reusable, and easy to maintain.

Top comments (0)