How to implement a custom hook for handling offline data synchronization in React

  Arif Babu

         

  React JS



Image not found!!


Implementing a custom hook for handling offline data synchronization in React involves managing data locally when the user is offline and then syncing it with a server once the connection is re-established. Here's a basic implementation of such a hook:

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

const UseOfflineDataSync = () => {
  const [offlineData, setOfflineData] = useState([]);

  // Load offline data from local storage when the component mounts
  useEffect(() => {
    const offlineDataFromStorage = localStorage.getItem('offlineData');
    if (offlineDataFromStorage) {
      setOfflineData(JSON.parse(offlineDataFromStorage));
    }
  }, []);

  // Sync offline data with the server when the component mounts or when the online status changes
  useEffect(() => {
    const syncDataWithServer = async () => {
      // Check if the user is online
      const isOnline = navigator.onLine;
      if (isOnline) {
        try {
          // Perform data synchronization with the server
          await syncOfflineDataWithServer(offlineData);
          // Once sync is successful, clear offline data from local storage
          localStorage.removeItem('offlineData');
          setOfflineData([]);
        } catch (error) {
          console.error('Error syncing data with server:', error);
        }
      }
    };

    // Call the sync function when the component mounts or when online status changes
    syncDataWithServer();

    // Listen for online/offline status changes
    window.addEventListener('online', syncDataWithServer);
    window.addEventListener('offline', syncDataWithServer);

    // Cleanup: Remove event listeners when the component unmounts
    return () => {
      window.removeEventListener('online', syncDataWithServer);
      window.removeEventListener('offline', syncDataWithServer);
    };
  }, [offlineData]);

  // Function to save data locally when offline
  const saveOfflineData = (data) => {
    setOfflineData((prevData) => [...prevData, data]);
    localStorage.setItem('offlineData', JSON.stringify([...offlineData, data]));
  };

  // Function to sync offline data with the server
  const syncOfflineDataWithServer = async (data) => {
    // Implement your server synchronization logic here
    // Example: send data to an API endpoint
    const response = await fetch('https://api.example.com/data', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });
    if (!response.ok) {
      throw new Error('Failed to sync data with server');
    }
    return response.json();
  };

  return { offlineData, saveOfflineData };
};

export default UseOfflineDataSync;

You can use this custom hook in your components like this:

javascript
import React from 'react';
import UseOfflineDataSync from './UseOfflineDataSync';

const MyComponent = () => {
  const { offlineData, saveOfflineData } = UseOfflineDataSync();

  const handleDataSubmission = async (data) => {
    try {
      // Perform some action with the data, like sending it to the server
      await sendDataToServer(data);
    } catch (error) {
      console.error('Error sending data to server:', error);
      // If an error occurs while sending data to the server, save it offline
      saveOfflineData(data);
    }
  };

  return (
    <div>
      {/* Your component JSX */}
    </div>
  );
};

export default MyComponent;

This implementation assumes that you have a function sendDataToServer which sends data to your server. If an error occurs during this process (e.g., due to network issues), the data will be saved locally using the saveOfflineData function provided by the hook and will be synced with the server once the connection is re-established.

Category List