react-async

Handle promises with ease.

<img src="https://badgen.net/npm/v/react-async?icon=npm&label=react-async" alt="latest version">

<img src="https://badgen.net/npm/dm/react-async" alt="montly downloads">

<img src="https://badgen.net/bundlephobia/minzip/react-async" alt="minzipped size">

<img src="https://badgen.net/npm/license/react-async" alt="license">

<img src="https://badgen.net/circleci/github/async-library/react-async/master?icon=circleci" alt="circleci status">

<img src="https://badgen.net/travis/async-library/react-async?icon=travis" alt="travis status">

<img src="https://badgen.net/codecov/c/github/async-library/react-async/master?icon=codecov" alt="code coverage">

<img src="https://www.codefactor.io/repository/github/async-library/react-async/badge" alt="code quality">

<img src="https://deepscan.io/api/teams/5549/projects/7406/branches/74183/badge/grade.svg" alt="DeepScan grade">

<img src="https://img.shields.io/badge/discord-join-7289DA.svg?logo=discord&longCache=true&style=flat" />

<img src="https://badgen.net/badge/live%20examples/available/pink?icon=now" alt="live examples">

<img src="https://badgen.net/badge/tested%20with/chromatic/fc521f" alt="Chromatic">

• Zero dependencies
• Works with promises, async/await and the Fetch API
• Now with experimental Suspense support
• Choose between Render Props, Context-based helper components or the useAsync and useFetch hooks
• Debug and develop every part of the loading sequence with the React Async DevTools
• Provides convenient isPending, startedAt, finishedAt, et al metadata
• Provides cancel and reload actions
• Automatic re-run using watch or watchFn prop
• Accepts onResolve, onReject and onCancel callbacks
• Supports abortable fetch by providing an AbortController
• Supports optimistic updates using setData
• Supports server-side rendering through initialValue
• Written in TypeScript, ships with type definitions
• Works well in React Native too!

Upgrading to v9

Version 9 comes with a minor breaking change. See Upgrading for details.

• Introduction

Getting started

• Installation
• Upgrading
• Usage
• DevTools

API

• Interfaces
• Configuration options
• State properties
• Helper components

Guide

• Async components
• Separating view and logic
• Async actions
• Optimistic updates
• Server-side rendering

Contributing

• Introduction
• Setting up
• Development
• Testing
• Releasing

<td align="center"><a href="https://medium.com/@ghengeveld"><img src="https://avatars1.githubusercontent.com/u/321738?v=4" width="75px;" alt=""/><br /><sub><b>Gert Hengeveld</b></sub></a><br /><a href="https://github.com/async-library/react-async/commits?author=ghengeveld" title="Code">💻</a> <a href="https://github.com/async-library/react-async/pulls?q=is%3Apr+reviewed-by%3Aghengeveld" title="Reviewed Pull Requests">👀</a> <a href="#question-ghengeveld" title="Answering Questions">💬</a></td>
<td align="center"><a href="https://github.com/Khartir"><img src="https://avatars3.githubusercontent.com/u/5592420?v=4" width="75px;" alt=""/><br /><sub><b>Khartir</b></sub></a><br /><a href="https://github.com/async-library/react-async/commits?author=Khartir" title="Code">💻</a> <a href="#platform-Khartir" title="Packaging/porting to new platform">📦</a></td>
<td align="center"><a href="https://twitter.com/phry"><img src="https://avatars1.githubusercontent.com/u/4282439?v=4" width="75px;" alt=""/><br /><sub><b>Lenz Weber</b></sub></a><br /><a href="https://github.com/async-library/react-async/commits?author=phryneas" title="Code">💻</a> <a href="#platform-phryneas" title="Packaging/porting to new platform">📦</a> <a href="#ideas-phryneas" title="Ideas, Planning, & Feedback">🤔</a></td>
<td align="center"><a href="https://github.com/Avi98"><img src="https://avatars1.githubusercontent.com/u/26133749?v=4" width="75px;" alt=""/><br /><sub><b>Avinash</b></sub></a><br /><a href="https://github.com/async-library/react-async/pulls?q=is%3Apr+reviewed-by%3AAvi98" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/async-library/react-async/commits?author=Avi98" title="Documentation">📖</a></td>
<td align="center"><a href="http://www.fredkschott.com"><img src="https://avatars1.githubusercontent.com/u/622227?v=4" width="75px;" alt=""/><br /><sub><b>Fred K. Schott</b></sub></a><br /><a href="#tool-FredKSchott" title="Tools">🔧</a></td>
<td align="center"><a href="https://bycedric.com"><img src="https://avatars2.githubusercontent.com/u/1203991?v=4" width="75px;" alt=""/><br /><sub><b>Cedric van Putten</b></sub></a><br /><a href="https://github.com/async-library/react-async/commits?author=byCedric" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/tomshane"><img src="https://avatars1.githubusercontent.com/u/11005356?v=4" width="75px;" alt=""/><br /><sub><b>Tom Shane</b></sub></a><br /><a href="https://github.com/async-library/react-async/pulls?q=is%3Apr+reviewed-by%3Atomshane" title="Reviewed Pull Requests">👀</a></td>

<td align="center"><a href="http://philippeterson.com/"><img src="https://avatars1.githubusercontent.com/u/1326208?v=4" width="75px;" alt=""/><br /><sub><b>Philip Peterson</b></sub></a><br /><a href="https://github.com/async-library/react-async/commits?author=philip-peterson" title="Code">💻</a></td>
<td align="center"><a href="https://twitter.com/sseraphini"><img src="https://avatars3.githubusercontent.com/u/2005841?v=4" width="75px;" alt=""/><br /><sub><b>Sibelius Seraphini</b></sub></a><br /><a href="https://github.com/async-library/react-async/pulls?q=is%3Apr+reviewed-by%3Asibelius" title="Reviewed Pull Requests">👀</a></td>
<td align="center"><a href="https://jimthedev.com"><img src="https://avatars0.githubusercontent.com/u/108938?v=4" width="75px;" alt=""/><br /><sub><b>Jim Cummins</b></sub></a><br /><a href="https://github.com/async-library/react-async/pulls?q=is%3Apr+reviewed-by%3Ajimthedev" title="Reviewed Pull Requests">👀</a></td>
<td align="center"><a href="http://mihkel.sokk.ee"><img src="https://avatars3.githubusercontent.com/u/231978?v=4" width="75px;" alt=""/><br /><sub><b>Mihkel Sokk</b></sub></a><br /><a href="https://github.com/async-library/react-async/pulls?q=is%3Apr+reviewed-by%3Amsokk" title="Reviewed Pull Requests">👀</a></td>
<td align="center"><a href="https://github.com/brabeji"><img src="https://avatars3.githubusercontent.com/u/2237954?v=4" width="75px;" alt=""/><br /><sub><b>Jiří Brabec</b></sub></a><br /><a href="https://github.com/async-library/react-async/commits?author=brabeji" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/unorsk"><img src="https://avatars0.githubusercontent.com/u/25188?v=4" width="75px;" alt=""/><br /><sub><b>Andrii U</b></sub></a><br /><a href="#example-unorsk" title="Examples">💡</a></td>
<td align="center"><a href="http://matthisk.nl"><img src="https://avatars0.githubusercontent.com/u/602837?v=4" width="75px;" alt=""/><br /><sub><b>Matthisk Heimensen</b></sub></a><br /><a href="https://github.com/async-library/react-async/commits?author=matthisk" title="Code">💻</a></td>

<td align="center"><a href="https://github.com/dhurlburtusa"><img src="https://avatars3.githubusercontent.com/u/4006431?v=4" width="75px;" alt=""/><br /><sub><b>Danny Hurlburt</b></sub></a><br /><a href="#ideas-dhurlburtusa" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/async-library/react-async/commits?author=dhurlburtusa" title="Documentation">📖</a></td>
<td align="center"><a href="https://noelyoo.github.io/resume"><img src="https://avatars2.githubusercontent.com/u/25740248?v=4" width="75px;" alt=""/><br /><sub><b>Noel Yoo</b></sub></a><br /><a href="https://github.com/async-library/react-async/commits?author=noelyoo" title="Tests">⚠️</a> <a href="https://github.com/async-library/react-async/commits?author=noelyoo" title="Code">💻</a> <a href="#ideas-noelyoo" title="Ideas, Planning, & Feedback">🤔</a></td>
<td align="center"><a href="https://github.com/aratcliffe"><img src="https://avatars3.githubusercontent.com/u/491126?v=4" width="75px;" alt=""/><br /><sub><b>Adam Ratcliffe</b></sub></a><br /><a href="https://github.com/async-library/react-async/commits?author=aratcliffe" title="Code">💻</a></td>
<td align="center"><a href="https://kentcdodds.com"><img src="https://avatars0.githubusercontent.com/u/1500684?v=4" width="75px;" alt=""/><br /><sub><b>Kent C. Dodds</b></sub></a><br /><a href="https://github.com/async-library/react-async/commits?author=kentcdodds" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/walter-ind"><img src="https://avatars2.githubusercontent.com/u/52423075?v=4" width="75px;" alt=""/><br /><sub><b>walter-ind</b></sub></a><br /><a href="https://github.com/async-library/react-async/commits?author=walter-ind" title="Documentation">📖</a></td>
<td align="center"><a href="https://twitter.com/arthurdenture"><img src="https://avatars3.githubusercontent.com/u/80536?v=4" width="75px;" alt=""/><br /><sub><b>Jacob Lee</b></sub></a><br /><a href="https://github.com/async-library/react-async/commits?author=artdent" title="Code">💻</a></td>
<td align="center"><a href="http://rokoroku.github.io"><img src="https://avatars1.githubusercontent.com/u/5208632?v=4" width="75px;" alt=""/><br /><sub><b>Youngrok Kim</b></sub></a><br /><a href="https://github.com/async-library/react-async/commits?author=rokoroku" title="Code">💻</a></td>

<td align="center"><a href="https://munir.dev"><img src="https://avatars3.githubusercontent.com/u/5339664?v=4" width="75px;" alt=""/><br /><sub><b>Munir Ahmed Elsangedy</b></sub></a><br /><a href="#ideas-elsangedy" title="Ideas, Planning, & Feedback">🤔</a></td>
<td align="center"><a href="https://github.com/AlixWang"><img src="https://avatars0.githubusercontent.com/u/5417459?v=4" width="75px;" alt=""/><br /><sub><b>AlixWang</b></sub></a><br /><a href="https://github.com/async-library/react-async/commits?author=AlixWang" title="Documentation">📖</a></td>
<td align="center"><a href="http://salolivares.com"><img src="https://avatars0.githubusercontent.com/u/1812749?v=4" width="75px;" alt=""/><br /><sub><b>Sal Olivares</b></sub></a><br /><a href="https://github.com/async-library/react-async/commits?author=salolivares" title="Code">💻</a> <a href="https://github.com/async-library/react-async/issues?q=author%3Asalolivares" title="Bug reports">🐛</a></td>
<td align="center"><a href="https://github.com/nealeu"><img src="https://avatars1.githubusercontent.com/u/264594?v=4" width="75px;" alt=""/><br /><sub><b>Neale Upstone</b></sub></a><br /><a href="https://github.com/async-library/react-async/commits?author=nealeu" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/mbark"><img src="https://avatars1.githubusercontent.com/u/1579384?v=4" width="75px;" alt=""/><br /><sub><b>Martin Barksten</b></sub></a><br /><a href="https://github.com/async-library/react-async/commits?author=mbark" title="Documentation">📖</a></td>

Similar projects

• @slorber/react-async-hook
• @dai-shi/react-hooks-async
• @cristovao-trevisan/async-resource
• @ilyalesik/react-fetch-hook
• @marcin-piela/react-fetching-library