use-asset

Try some demos:

Fetching from HackerNews: ji8ky

Component A waits for the result of component B: 70908

Using assets

function createAsset(fn: PromiseFn, lifespan = 0): {
  read: (...args: any[]) => any;
  preload: (...args: any[]) => void;
  clear: (...args: any[]) => void;
  peek: (...args: any[]) => any;
}

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"

// First create an asset, the arguments are user-provided.
const asset = createAsset(async (id, version) => {
  const res = await fetch(`https://hacker-news.firebaseio.com/${version}/item/${id}.json`)
  return await res.json()
})

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

function Post({ id }) {
  // Request asset, this component will now suspend
  const { by, title } = asset.read(id, "v0")
  return <div>{title} by {by}</div>
}

function App() {
  <Suspense fallback={null}>
    <Post id={10000} />
  </Suspense>
}

Cache busting strategies

// This asset will be removed from the cache in 15 seconds
const asset = createAsset(fn, 15000)
// Clear all cached entries
asset.clear()
// Clear a specific entry
asset.clear("/image.png")

Reading entries outside of suspense

// This will either return the value (without suspense!) or undefined
asset.peek("/image.png")

Using hooks and global cache

function useAsset(fn: PromiseFn, args: any[]): any
useAsset.lifespan = 0
useAsset.read = (...args: any[]) => any
useAsset.preload = (fn: PromiseFn, ...args: any[]) => void
useAsset.clear = (...args: any[]) => void
useAsset.peek = (...args: any[]) => any

You can also use the useAsset hook, 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(fn, [id])
  return <div>{title} by {by}</div>
}

function App() {
  <Suspense fallback={null}>
    <Post id={1000} />

Cache busting, preview, preload and peeking

The hook has the same API as any asset:

// Bust cache in 15 seconds
useAsset.lifespan = 15000
useAsset(fn, ["/image.png"])
// Clear all cached entries
useAsset.clear()
// Clear a specific entry
useAsset.clear("/image.png")
// Preload entries
useAsset.preload(fn, "/image.png")
// This will either return the value (without suspense!) or undefined
useAsset.peek("/image.png")