This project is deprecated, please use https://github.com/pmndrs/suspend-react instead!

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.

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 <div>{title} by {by}</div>
}

function App() {
  <Suspense fallback={<div>loading...</div>}>
    <Post id={10000} />
  </Suspense>
}

Preloading assets

// You can preload assets, these will be executed and cached immediately
asset.preload("/image.png")

Cache busting strategies

// 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

// 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. 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.

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 <div>{title} by {by}</div>
}

function App() {
  <Suspense fallback={<div>loading...</div>}>
    <Post id={1000} />

Cache busting, preload and peeking

The hook has the same API as any asset:

// 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

Infinite load on scroll

Fetching HN posts infinitely: codesandbox

Async dependencies

Component A waits for the result of component B: codesandbox