{"id":13727137,"url":"https://github.com/pmndrs/use-asset","last_synced_at":"2025-10-08T00:31:45.834Z","repository":{"id":47209854,"uuid":"296403458","full_name":"pmndrs/use-asset","owner":"pmndrs","description":"📦  A promise caching strategy for React Suspense","archived":true,"fork":false,"pushed_at":"2023-06-30T18:17:32.000Z","size":360,"stargazers_count":412,"open_issues_count":3,"forks_count":12,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-10-29T23:51:09.119Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pmndrs.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-09-17T17:59:47.000Z","updated_at":"2024-08-02T07:38:03.000Z","dependencies_parsed_at":"2024-01-15T01:04:09.686Z","dependency_job_id":"912bc123-443f-4cae-b927-53be715cf187","html_url":"https://github.com/pmndrs/use-asset","commit_stats":{"total_commits":70,"total_committers":7,"mean_commits":10.0,"dds":"0.11428571428571432","last_synced_commit":"be5736f6ec4bfbbbd56d4db2417fbd6036f0e36b"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmndrs%2Fuse-asset","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmndrs%2Fuse-asset/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmndrs%2Fuse-asset/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmndrs%2Fuse-asset/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pmndrs","download_url":"https://codeload.github.com/pmndrs/use-asset/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234938715,"owners_count":18910319,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T01:03:41.211Z","updated_at":"2025-10-08T00:31:40.520Z","avatar_url":"https://github.com/pmndrs.png","language":"TypeScript","funding_links":[],"categories":["React Hooks","3D","TypeScript"],"sub_categories":["React Components"],"readme":"This project is deprecated, please use https://github.com/pmndrs/suspend-react instead!\n\n\u003cp align=\"left\"\u003e\n  \u003ca id=\"cover\" href=\"#cover\"\u003e\u003cimg src=\"img/cover.svg\" alt=\"This library allows you to create cached assets, which can be promises, async functions or even dynamic imports. These assets then have the ability to suspend the component in which they are read. This makes it easier to orchestrate async tasks and gives you the ability to set up fallbacks and error-handling declaratively.\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n[![Build Size](https://img.shields.io/bundlephobia/min/use-asset?label=bunlde%20size\u0026style=flat\u0026colorA=000000\u0026colorB=000000)](https://bundlephobia.com/result?p=use-asset)\n[![Build Status](https://img.shields.io/travis/pmndrs/use-asset/master?style=flat\u0026colorA=000000\u0026colorB=000000)](https://travis-ci.org/pmndrs/use-asset)\n[![Version](https://img.shields.io/npm/v/use-asset?style=flat\u0026colorA=000000\u0026colorB=000000)](https://www.npmjs.com/package/use-asset)\n[![Downloads](https://img.shields.io/npm/dt/use-asset.svg?style=flat\u0026colorA=000000\u0026colorB=000000)](https://www.npmjs.com/package/use-asset)\n\n# Dealing with async assets\n\nEach 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.\n\n```jsx\nimport React, { Suspense } from \"react\"\nimport { createAsset } from \"use-asset\"\n\n// Create a cached source\nconst asset = createAsset(async (id, version) =\u003e {\n  // Any async task can run in here, fetch requests, parsing, workers, promises, ...\n  const res = await fetch(`https://hacker-news.firebaseio.com/${version}/item/${id}.json`)\n  return await res.json()\n})\n\nfunction Post({ id }) {\n  // Then read from it ...\n  const { by, title } = asset.read(id, \"v0\") // As many cache keys as you need\n  // By the time we're here the async data has resolved\n  return \u003cdiv\u003e{title} by {by}\u003c/div\u003e\n}\n\nfunction App() {\n  \u003cSuspense fallback={\u003cdiv\u003eloading...\u003c/div\u003e}\u003e\n    \u003cPost id={10000} /\u003e\n  \u003c/Suspense\u003e\n}\n```\n\n#### Preloading assets\n\n```jsx\n// You can preload assets, these will be executed and cached immediately\nasset.preload(\"/image.png\")\n```\n\n#### Cache busting strategies\n\n```jsx\n// This asset will be removed from the cache in 15 seconds\nconst asset = createAsset(promiseFn, 15000)\n// Clear all cached entries\nasset.clear()\n// Clear a specific entry\nasset.clear(\"/image.png\")\n```\n\n#### Peeking into entries outside of suspense\n\n```jsx\n// This will either return the value (without suspense!) or undefined\nasset.peek(\"/image.png\")\n```\n\n# Hooks and global cache\n\nYou 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.\n\n```jsx\nimport { useAsset } from \"use-asset\"\n\nfunction Post({ id }) {\n  const { by, title } = useAsset(async (id, version) =\u003e {\n    // Any async task can run in here, fetch requests, parsing, workers, promises, ...\n    const res = await fetch(`https://hacker-news.firebaseio.com/${version}/item/${id}.json`)\n    return await res.json()\n  }, id, \"v0\") // As many cache keys as you need\n  // By the time we're here the async data has resolved\n  return \u003cdiv\u003e{title} by {by}\u003c/div\u003e\n}\n\nfunction App() {\n  \u003cSuspense fallback={\u003cdiv\u003eloading...\u003c/div\u003e}\u003e\n    \u003cPost id={1000} /\u003e\n```\n\n#### Cache busting, preload and peeking\n\nThe hook has the same API as any asset:\n\n```jsx\n// Bust cache in 15 seconds\nuseAsset.lifespan = 15000\nuseAsset(promiseFn, \"/image.png\")\n// Clear all cached entries\nuseAsset.clear()\n// Clear a specific entry\nuseAsset.clear(\"/image.png\")\n// Preload entries\nuseAsset.preload(promiseFn, \"/image.png\")\n// This will either return the value (without suspense!) or undefined\nuseAsset.peek(\"/image.png\")\n```\n\n# Recipes\n\n#### Simple data fetching\n\nFetching posts from hacker-news: [codesandbox](https://codesandbox.io/s/use-asset-demo-forked-ji8ky)\n\n#### Infinite load on scroll\n\nFetching HN posts infinitely: [codesandbox](https://codesandbox.io/s/use-asset-forked-ouzkc)\n\n#### Async dependencies\n\nComponent A waits for the result of component B: [codesandbox](https://codesandbox.io/s/use-asset-dependency-70908)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpmndrs%2Fuse-asset","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpmndrs%2Fuse-asset","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpmndrs%2Fuse-asset/lists"}