Remix Refetch

remix-refetch.tsx

import { useCallback, useEffect, useState, useRef } from 'react';
import { useLocation } from 'react-router-dom';
import type { ActionFunction } from 'remix';
import { redirect, useSubmit } from 'remix';

export const action: ActionFunction = async ({ request }) => {
  const body = new URLSearchParams(await request.text());
  return redirect(String(body.get('path')));
};

export default function Refetch() {
  return null;
}

export function useRefetch(path?: string) {
  const location = useLocation();
  const submit = useSubmit();
  return () =>
    submit(
      { path: path ?? location.pathname },
      { method: 'post', action: '/_refetch', replace: true }
    );
}

export function useRefetchOnWindowFocus(path?: string) {
  const shouldRefetch = useRef(false);
  const isVisible = usePageVisible();
  const refetch = useRefetch(path);

  useEffect(() => {
    if (isVisible && shouldRefetch.current) {
      refetch();
    }
    shouldRefetch.current = true;
  }, [isVisible]);
}

function usePageVisible() {
  const [isVisible, setVisible] = useState(isDocumentVisible());
  const onFocus = useCallback(() => {
    setVisible(isDocumentVisible());
  }, []);
  useEffect(() => setupEventListeners(onFocus), [onFocus]);

  return isVisible;
}

function isDocumentVisible(): boolean {
  if (typeof document === 'undefined') {
    return true;
  }

  return [undefined, 'visible', 'prerender'].includes(document.visibilityState);
}

function setupEventListeners(onFocus: () => void) {
  if (window && window?.addEventListener) {
    addEventListener('visibilitychange', onFocus, false);
    addEventListener('focus', onFocus, false);

    return () => {
      removeEventListener('visibilitychange', onFocus);
      removeEventListener('focus', onFocus);
    };
  }
}