useFetch()

Fetch without the data rendering.

This can be useful for ensuring resources early in a render tree before they are needed.

tip

Use in combination with a data-binding hook (useCache(), useSuspense(), useDLE(), useLive()) in another component.

Usage

function MasterPost({ id }: { id: number }) {
  useFetch(PostResource.get, { id });
  // ...
}

Behavior

Expiry Status	Fetch	Returns	Conditions
Invalid	yes1	Promise	not in store, deletion, invalidation
Stale	yes1	Promise	(first-render, arg change) & expiry < now
Valid	no	undefined	fetch completion
	no	undefined	null used as second argument

note

1. Identical fetches are automatically deduplicated

React Native

When using React Navigation, useFetch() will trigger fetches on focus if the data is considered stale.

Conditional Dependencies

Use null as the second argument on any reactive data client to indicate "do nothing."

// todo could be undefined if id is undefined
const todo = useFetch(TodoResource.get, id ? { id } : null);

Types

Type

function useFetch(
  endpoint: ReadEndpoint,
  ...args: Parameters<typeof endpoint> | [null]
): Promise<any> | undefined;

With Generics

function useFetch<
  E extends EndpointInterface<
    FetchFunction,
    Schema | undefined,
    undefined
  >,
  Args extends readonly [...Parameters<E>] | readonly [null],
>(endpoint: E, ...args: Args): ReturnType<E>;

Examples

Github Reactions

useFetch() allows us to declaratively fetch reactions on any issue page the moment we navigate to it. This allows us to not block the issues page from showing if the reactions are not completed loading.

It's usually better to wrap cases like this in new Suspense Boundaries. However, our component library ant design does not allow this.

More Demos