Fetch when the tab is focused

You can use useVisible to fetch a resource when the tab is focused.

useVisible(query)

Example

function useAutoFetchMixture(query: Query) {
  useFetch(query)
  useVisible(query)
  useOnline(query)
}

Implementation

export function useVisible(query: Query) {
  const { fetch } = query
 
  useEffect(() => {
    const f = () => !document.hidden && fetch()
    document.addEventListener("visibilitychange", f)
    return () => document.removeEventListener("visibilitychange", f)
  }, [fetch])
}

See also

useOnline - fetch when the browser becomes online

Fetch when the browser becomes online Retry on error