Creating a custom useOfflineEffect hook for handling side effects when offline

11 Oct 2023

In this blog post, we will explore how to create a custom React hook called useOfflineEffect that allows us to handle side effects specifically when the user is offline. We often encounter scenarios where we need to handle certain tasks differently when the user is offline, such as syncing data, displaying cached content, or notifying the user about the lack of connectivity.

Introduction
Understanding Offline Detection
Creating the useOfflineEffect Hook
Usage and Examples
Conclusion

Introduction

Handling side effects is a common requirement in most React applications. However, the availability and reliability of network connections can impact the behavior of these side effects. To cater to scenarios when the user goes offline, we need a way to detect their connectivity status and handle the side effects accordingly.

Understanding Offline Detection

Before we dive into creating the useOfflineEffect hook, let’s quickly understand how we can detect the user’s offline status in a React application. The navigator.onLine property can be used to determine if the user is currently connected to the internet or offline.

Creating the `useOfflineEffect` Hook

Now that we have an understanding of offline detection, let’s create our custom useOfflineEffect hook. Here’s an implementation to get us started:

import { useEffect } from 'react';

const useOfflineEffect = (callback, dependencyArray) => {
  useEffect(() => {
    if (!navigator.onLine) {
      callback();
    }
  }, dependencyArray);
};

export default useOfflineEffect;

Our useOfflineEffect hook takes in a callback function and a dependency array, similar to the useEffect hook. Inside the effect, we check if the user is offline using navigator.onLine. If offline, we invoke the provided callback function.

Usage and Examples

Now that we have our useOfflineEffect hook, let’s explore a few usage scenarios:

Example 1: Displaying Cached Content

import { useState } from 'react';
import useOfflineEffect from './useOfflineEffect';

const CachedContent = () => {
  const [data, setData] = useState(null);

  const fetchData = async () => {
    // Perform network request and set data state
  };

  const displayCachedData = () => {
    // Display previously cached data
  };

  useOfflineEffect(displayCachedData, []);

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <>
      {/* Render data */}
    </>
  );
};

In this example, we use the useOfflineEffect hook to display cached content when the user goes offline. The displayCachedData function will be executed only when the user is offline, allowing us to present the previously cached data.

Example 2: Syncing Data

import { useEffect } from 'react';
import useOfflineEffect from './useOfflineEffect';

const SyncData = () => {
  const syncData = () => {
    // Sync data with server
  };

  useOfflineEffect(syncData, []);

  useEffect(() => {
    // Perform other side effects
  }, []);

  return (
    <>
      {/* Render UI */}
    </>
  );
};

In this example, we use useOfflineEffect to trigger the syncing of data with the server when the user goes offline. This way, we can ensure that the data remains up to date when the user reconnects.

Conclusion

In this blog post, we learned how to create a custom useOfflineEffect hook to handle side effects specifically when the user is offline. By abstracting this functionality into a reusable hook, we can easily handle offline scenarios in our React applications. The useOfflineEffect hook allows us to write cleaner and more modular code while ensuring a seamless offline experience for our users.

Table of Contents