The useCache hook lets you interact with the cache that stores Loaders and their data.

This hook returns the cache instance.

import { useCache } from 'firebolt' export function MyComponent() { const cache = useCache() // ...interact with the cache }

Cache Keys

All of the arguments that you pass in to the useLoader hook are combined to form a "cache key".

This cache key corresponds directly to its cached data and can be used to find, update or invalidate data at a later date, by matching some or all parts of a cache key.


Because of how loader arguments and cache keys work, it can be useful to insert additional arguments to your useLoader calls that can be used as tags to categorize data.

const loader = useLoader(getCities, id, '#cities')

In this example, the tag #cities is used purely to tag the data as city related, allowing you to easily update or refresh it at any point in the future.

Invalidation Logic

Invalidating a loader will mark its data as stale.

If any components are still observing this data it will be re-fetched in the background and automatically updated without triggering Suspense boundaries.

If no components are observing the data then the data is evicted immediately, causing the next read to trigger Suspense boundaries as if the data was never there to begin with.

Note: data can also become invalidated after an expiration time, as set with the expire method on the Context object passed into your loader functions.


Invalidates all loaders that use all args in their useLoader arguments.

If you used a Loader like this somewhere in your app:

const loader = useLoader(getCitiesWithTags, 'tech-hub', 'night-life')

You can invalidate its data by calling



Retrieves the first loader instance that uses all args, allowing you to invalidate or edit its data.

const loader = cache.find(postId)


Retrieves all loader instances that use args, allowing you to invalidate or edit their data.

const loaders = cache.findAll(postId)