A hook for auto/manual refresh of a route in NextJS v13+ (React v17.0.x - v19.0.x) app router software

useNextJSAppRouteRefresh.ts

import { useRouter } from "next/navigation";
import { useEffect, useTransition } from "react";

const useNextJSAppRouteRefresh = (
  { intervalDurationInMilliseconds = 0, autoRefreshOnMount = false }: {
    intervalDurationInMilliseconds: number,
    autoRefreshOnMount: boolean
  }
) => {
  const [isPending, startTransition] = useTransition();
  const router = useRouter();

  useEffect(() => {
    if (!autoRefreshOnMount) return;

    let timeout: NodeJS.Timeout;

    const refresh = () => {
      startTransition(() => {
        router.refresh();
      });
      timeout = setTimeout(refresh, intervalDurationInMilliseconds);
    };

    const handleVisibilityChange = () => {
      if (document.hidden) {
        clearTimeout(timeout);
      } else {
        refresh();
      }
    };

    window.addEventListener("visibilitychange", handleVisibilityChange);
    refresh();

    return () => {
      clearTimeout(timeout);
      window.removeEventListener("visibilitychange", handleVisibilityChange);
    };
  }, [intervalDurationInMilliseconds, router, autoRefreshOnMount]);

  return {
    isPending,
    refreshNow () {
      if (!isPending && !autoRefreshOnMount) {
        startTransition(() => {
          router.refresh();
        });
      }
    }
  };
};