useWindowFocusRefetching.remix.ts

import React from "react"
import { useLocation, useNavigate } from "remix"

export default function useWindowFocusRefetching() {
  const location = useLocation()
  const navigate = useNavigate()

  const pathnameRef = React.useRef(location.pathname)

  React.useEffect(() => {
    pathnameRef.current = location.pathname
  })

  React.useEffect(() => {
    function refetch() {
      navigate(pathnameRef.current, {
        state: {
          windowFocusedAt: new Date().toISOString(),
        },
        replace: true,
      })
    }

    window.addEventListener("focus", refetch)

    return () => window.removeEventListener("focus", refetch)
  }, [navigate])
}