useLoaderDataWithWindowFocusRefetching.remix.ts

import React from "react"
import { useLocation, useLoaderData, useFetcher } from "remix"

export default function useLoaderDataWithWindowFocusRefetching<LoaderData>() {
  const loaderData = useLoaderData<LoaderData>()
  const fetcher = useFetcher<LoaderData>()

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

  React.useEffect(() => {
    function refetch() {
      fetcher.load(pathnameRef.current)
    }

    window.addEventListener("focus", refetch)

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

  return fetcher.data ?? loaderData
}