Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pmndrs/use-asset
📦 A promise caching strategy for React Suspense
https://github.com/pmndrs/use-asset
Last synced: 2 months ago
JSON representation
📦 A promise caching strategy for React Suspense
- Host: GitHub
- URL: https://github.com/pmndrs/use-asset
- Owner: pmndrs
- Archived: true
- Created: 2020-09-17T17:59:47.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-06-30T18:17:32.000Z (over 1 year ago)
- Last Synced: 2024-05-01T11:29:10.748Z (8 months ago)
- Language: TypeScript
- Homepage:
- Size: 352 KB
- Stars: 413
- Watchers: 9
- Forks: 12
- Open Issues: 3
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
- awesome-list - use-asset
- awesome-react-three-fiber - use-asset
- jimsghstars - pmndrs/use-asset - 📦 A promise caching strategy for React Suspense (TypeScript)
README
This project is deprecated, please use https://github.com/pmndrs/suspend-react instead!
[](https://bundlephobia.com/result?p=use-asset)
[](https://travis-ci.org/pmndrs/use-asset)
[](https://www.npmjs.com/package/use-asset)
[](https://www.npmjs.com/package/use-asset)
# Dealing with async assets
Each asset you create comes with its own cache. When you request something from it, the arguments that you pass will act as cache-keys. If you request later on using the same keys, it won't have to re-fetch but serves the result that it already knows.
```jsx
import React, { Suspense } from "react"
import { createAsset } from "use-asset"
// Create a cached source
const asset = createAsset(async (id, version) => {
// Any async task can run in here, fetch requests, parsing, workers, promises, ...
const res = await fetch(`https://hacker-news.firebaseio.com/${version}/item/${id}.json`)
return await res.json()
})
function Post({ id }) {
// Then read from it ...
const { by, title } = asset.read(id, "v0") // As many cache keys as you need
// By the time we're here the async data has resolved
return
{title} by {by}
}
function App() {
loading...}>
}
```
#### Preloading assets
```jsx
// You can preload assets, these will be executed and cached immediately
asset.preload("/image.png")
```
#### Cache busting strategies
```jsx
// This asset will be removed from the cache in 15 seconds
const asset = createAsset(promiseFn, 15000)
// Clear all cached entries
asset.clear()
// Clear a specific entry
asset.clear("/image.png")
```
#### Peeking into entries outside of suspense
```jsx
// This will either return the value (without suspense!) or undefined
asset.peek("/image.png")
```
# Hooks and global cache
You can also use the `useAsset` hook, which is modelled after [react-promise-suspense](https://github.com/vigzmv/react-promise-suspense). This makes it possible to define assets on the spot instead of having to define them externally. They use a global cache, anything you request at any time is written into it.
```jsx
import { useAsset } from "use-asset"
function Post({ id }) {
const { by, title } = useAsset(async (id, version) => {
// Any async task can run in here, fetch requests, parsing, workers, promises, ...
const res = await fetch(`https://hacker-news.firebaseio.com/${version}/item/${id}.json`)
return await res.json()
}, id, "v0") // As many cache keys as you need
// By the time we're here the async data has resolved
return
{title} by {by}
}
function App() {
loading...}>
```
#### Cache busting, preload and peeking
The hook has the same API as any asset:
```jsx
// Bust cache in 15 seconds
useAsset.lifespan = 15000
useAsset(promiseFn, "/image.png")
// Clear all cached entries
useAsset.clear()
// Clear a specific entry
useAsset.clear("/image.png")
// Preload entries
useAsset.preload(promiseFn, "/image.png")
// This will either return the value (without suspense!) or undefined
useAsset.peek("/image.png")
```
# Recipes
#### Simple data fetching
Fetching posts from hacker-news: [codesandbox](https://codesandbox.io/s/use-asset-demo-forked-ji8ky)
#### Infinite load on scroll
Fetching HN posts infinitely: [codesandbox](https://codesandbox.io/s/use-asset-forked-ouzkc)
#### Async dependencies
Component A waits for the result of component B: [codesandbox](https://codesandbox.io/s/use-asset-dependency-70908)