Polling an API for Updates

import { useEffect, useState, useCallback } from 'react';
import { useSyncExternalStore } from 'react';

// Simulated API call to fetch data
const fetchLatestData = async () => {
  // Replace with your API endpoint
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) {
    throw new Error('Network response was not ok ' + response.statusText);
  }
  return await response.json();
};

// Polling Hook
function usePolling(fetchFunction, interval) {
  const [state, setState] = useState(null);

  const getSnapshot = useCallback(() => state, [state]);
  const subscribe = useCallback((callback) => {
    const intervalId = setInterval(async () => {
      try {
        const data = await fetchFunction();
        setState(data);
        callback();
      } catch (error) {
        console.error('Failed to poll:', error);
      }
    }, interval);
    return () => clearInterval(intervalId);
  }, [fetchFunction, interval]);

  useEffect(() => {
    fetchFunction().then(setState);
    return () => {};
  }, [fetchFunction]);

  return useSyncExternalStore(subscribe, getSnapshot);
}

// Example Component
function MyComponent() {
  const data = usePolling(fetchLatestData, 5000); // Poll every 5 seconds

  return (
    <div>
      <h1>Latest Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}