Skip to main content

useCache


Introduction

Thanks to this hook, we are able to manipulate the Cache of the passed command and receive change callbacks. It is important to make sure that cacheKey is not affected by auto-generation - to make sure we have the stable connection between hook's command and the cache.

const { data, error, loading, revalidate, onSuccess, onError, onFinished } = useCache(getUsers);

onSuccess((payload) => {
console.log(payload); // [ User, User, User ]
});

onError((error) => {
console.log(error); // { message: string }
});

onFinished(([payload, error, status]) => {
console.log(payload); // [ User, User, User ] | null
console.log(error); // { message: string } | null
console.log(status); // 200 / 400 / 404 / 500 ...
});

Options

Configuration options for this hook provided as a second parameter.

const { ... } = useCache(command, options)

Name Type Description
deepCompare boolean | query Deep comparison function for hook to check for equality in incoming data, to limit rerenders.
dependencyTracking boolean If `true` it will rerender only when values used by our component gets changed. Otherwise it will rerender on any change.
initialData CacheValueType["data"] | null If cache is empty we can use placeholder data.


Returns

Returned values from this hook.

const values = useCache(command);

Name Type Description
isFocused boolean Is window focused
isOnline boolean Network online status
setFocused (isFocused: boolean) => void Focus state setter
setOnline (isOnline: boolean) => void Network state setter