6 |
7 | [](https://bundlephobia.com/result?p=use-asset)
8 | [](https://travis-ci.org/pmndrs/use-asset)
9 | [](https://www.npmjs.com/package/use-asset)
10 | [](https://www.npmjs.com/package/use-asset)
11 |
12 | # Dealing with async assets
13 |
14 | 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.
15 |
16 | ```jsx
17 | import React, { Suspense } from "react"
18 | import { createAsset } from "use-asset"
19 |
20 | // Create a cached source
21 | const asset = createAsset(async (id, version) => {
22 | // Any async task can run in here, fetch requests, parsing, workers, promises, ...
23 | const res = await fetch(`https://hacker-news.firebaseio.com/${version}/item/${id}.json`)
24 | return await res.json()
25 | })
26 |
27 | function Post({ id }) {
28 | // Then read from it ...
29 | const { by, title } = asset.read(id, "v0") // As many cache keys as you need
30 | // By the time we're here the async data has resolved
31 | return
{title} by {by}
32 | }
33 |
34 | function App() {
35 | loading...}>
36 |
37 |
38 | }
39 | ```
40 |
41 | #### Preloading assets
42 |
43 | ```jsx
44 | // You can preload assets, these will be executed and cached immediately
45 | asset.preload("/image.png")
46 | ```
47 |
48 | #### Cache busting strategies
49 |
50 | ```jsx
51 | // This asset will be removed from the cache in 15 seconds
52 | const asset = createAsset(promiseFn, 15000)
53 | // Clear all cached entries
54 | asset.clear()
55 | // Clear a specific entry
56 | asset.clear("/image.png")
57 | ```
58 |
59 | #### Peeking into entries outside of suspense
60 |
61 | ```jsx
62 | // This will either return the value (without suspense!) or undefined
63 | asset.peek("/image.png")
64 | ```
65 |
66 | # Hooks and global cache
67 |
68 | 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.
69 |
70 | ```jsx
71 | import { useAsset } from "use-asset"
72 |
73 | function Post({ id }) {
74 | const { by, title } = useAsset(async (id, version) => {
75 | // Any async task can run in here, fetch requests, parsing, workers, promises, ...
76 | const res = await fetch(`https://hacker-news.firebaseio.com/${version}/item/${id}.json`)
77 | return await res.json()
78 | }, id, "v0") // As many cache keys as you need
79 | // By the time we're here the async data has resolved
80 | return
{title} by {by}
81 | }
82 |
83 | function App() {
84 | loading...}>
85 |
86 | ```
87 |
88 | #### Cache busting, preload and peeking
89 |
90 | The hook has the same API as any asset:
91 |
92 | ```jsx
93 | // Bust cache in 15 seconds
94 | useAsset.lifespan = 15000
95 | useAsset(promiseFn, "/image.png")
96 | // Clear all cached entries
97 | useAsset.clear()
98 | // Clear a specific entry
99 | useAsset.clear("/image.png")
100 | // Preload entries
101 | useAsset.preload(promiseFn, "/image.png")
102 | // This will either return the value (without suspense!) or undefined
103 | useAsset.peek("/image.png")
104 | ```
105 |
106 | # Recipes
107 |
108 | #### Simple data fetching
109 |
110 | Fetching posts from hacker-news: [codesandbox](https://codesandbox.io/s/use-asset-demo-forked-ji8ky)
111 |
112 | #### Infinite load on scroll
113 |
114 | Fetching HN posts infinitely: [codesandbox](https://codesandbox.io/s/use-asset-forked-ouzkc)
115 |
116 | #### Async dependencies
117 |
118 | Component A waits for the result of component B: [codesandbox](https://codesandbox.io/s/use-asset-dependency-70908)
119 |
--------------------------------------------------------------------------------
/img/hooks-global-cache.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/img/async-assets.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/img/cover.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
5 |