Reload loader data at interval without throwing error on network failure

myroute.tsx

import useRegularFetchWithInterval from "./useRegularFetchWithInterval";

export async function loader() {
  // Get data
  return data;
}

export default function MyRoute() {
  const loaderData = useLoaderData();
  const [liveData] = useRegularFetchWithInterval({ route: `/myroute?_data=routes%2Fmyroute`, intervalMs: 3000, initialData: loaderData });

  return (
    <>{liveData}</>
  );
}

useInterval.tsx

import { useEffect, useRef } from "react";

export default function useInterval(callback: () => void, delay: number) {
  const savedCallback = useRef<any>();

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

useRegularFetchWithInterval.tsx

import { useState, useCallback } from "react";
import useInterval from "./useInterval";

// Do fetch() to the route at interval and return a state object of the latest value
export default function useRegularFetchWithInterval({ route, intervalMs, enabled = true, skipInitialFetch = false, initialData }: { route: string; intervalMs: number; enabled?: boolean | (() => boolean); skipInitialFetch?: boolean; initialData?: any }) {
  const [data, setData] = useState<any>(initialData);
  const [error, setError] = useState<any>(null);
  const options = {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
    },
  }
  const fetchData = useCallback(() => {
    // If enabled is a function, call it to determine if we should fetch, or if it's a boolean just use it
    if (typeof enabled === "function" && !enabled()) return;
    if (typeof enabled === "boolean" && !enabled) return;

    fetch(route, options)
      .then((res) => res.json())
      .then((data) => setData(data))
      .catch((err) => setError(err));
  }, [route, enabled]);

  useInterval(fetchData, intervalMs);

  return [data, error, fetchData];
}