xswrYet another React data (re)fetching library
  • Introduction
    • Installation ๐Ÿ”ง
    • Your first mix ๐Ÿงช
    • Advanced example ๐Ÿ—ฟ
    • Comparison with other libs
    • Fetch on mount and on key change
    • Fetch on mount only
    • Fetch only once
    • Fetch on a regular interval
    • Fetch when the browser becomes online
    • Fetch when the tab is focused
    • Retry on error
    • Call a function on error
    • Debugging a resource
    • Using SSR & ISR
    • Scroll pagination
    • Deduplication cooldown
    • Optimistic updates
    • Cancellable requests
    • Garbage collection
    • Persistent storage
    • Schemas and imperative code
    • Store normalization
    • React Suspense
    • Centralizing resources
    • Mixes and mixtures
  • Introduction
    • Installation ๐Ÿ”ง
    • Your first mix ๐Ÿงช
    • Advanced example ๐Ÿ—ฟ
    • Comparison with other libs
    • Fetch on mount and on key change
    • Fetch on mount only
    • Fetch only once
    • Fetch on a regular interval
    • Fetch when the browser becomes online
    • Fetch when the tab is focused
    • Retry on error
    • Call a function on error
    • Debugging a resource
    • Using SSR & ISR
    • Scroll pagination
    • Deduplication cooldown
    • Optimistic updates
    • Cancellable requests
    • Garbage collection
    • Persistent storage
    • Schemas and imperative code
    • Store normalization
    • React Suspense
    • Centralizing resources
    • Mixes and mixtures

Fetch on mount and on key change

You can use useFetch to fetch a resource on mount and on key change.

useFetch(query)

Example#

function useHello() {
const query = useQuery(getHelloSchema, [])
useFetch(query)
return query
}

Implementation#

export function useFetch(query: Query) {
const { fetch } = query
useEffect(() => {
fetch()
}, [fetch])
}

See also#

  • useMount - fetch on mount only
  • useOnce - fetch only once
Comparison with other libs
Fetch on mount only

MIT 2022 ยฉ XSWR.
Edit this page on GitHub