# use-async-cache

> ![Version](https://img.shields.io/npm/v/use-async-cache?style=for-the-badge) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge)](#) [![Twitter: jiangweixian](https://img.shields.io/twitter/follow/jiangweixian.svg?sty

Latest version **0.0.1** (published 2019-10-18) · 0 weekly downloads

## Install

```sh
npm install use-async-cache
pnpm add use-async-cache
yarn add use-async-cache
bun add use-async-cache
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2019-10-18 |
| First published | 2019-10-18 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 208.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | jiangweixian1994 |

## Links

- npm: https://www.npmjs.com/package/use-async-cache
- npm.io page: https://npm.io/package/use-async-cache

## Recent versions

- 0.0.1 (latest) — 2019-10-18

## README

# use-async-cache
![Version](https://img.shields.io/npm/v/use-async-cache?style=for-the-badge)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge)](#)
[![Twitter: jiangweixian](https://img.shields.io/twitter/follow/jiangweixian.svg?style=for-the-badge)](https://twitter.com/jiangweixian)

> a simple react hooks implement for async cache store;

> a list of `[element1, ..., elementn]` use `async-date from same api`。`[element1, ..., elementn]` will share same async-cache，`api` will request once。

see more [props](/docs/use-async-cache.md)

## Install

```sh
npm install
```

## Usage
> api will only request once

```tsx
import React from 'react';
import { useAsyncCache } from 'use-async-cache';

import { cache } from '@/api/cache';

export const Element = () => {
  const { cached } = useAsyncCache({
    id: '1',
    api: cache.fetch,
  });
  return <span>{cached && cached.data}</span>;
};
```

```tsx
import React from 'react';

import { Element } from './components/Element';

export default () => {
  return Array(10)
    .fill(0)
    .map(() => <Element />);
};
```

**api.cache.fetch will only request once for 10 element**

## Author

👤 **JW**

* Twitter: [@jiangweixian](https://twitter.com/jiangweixian)
* Github: [@JiangWeixian](https://github.com/JiangWeixian)

## Show your support

Give a ⭐️ if this project helped you!

<a href="https://www.patreon.com/jiangweixian">
  <img src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" width="160">
</a>

***
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_

---
_Source: https://npm.io/package/use-async-cache · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._