⚛️⏳
React Async for Client

🎬 Demo · 🌟 GitHub · 📦 Package

👋 Introduction

This package helps you use async function without the need to migrate to ⚛️ React 19 and server-side rendering!

• ✨ Supports utility hooks to create and render async tasks.
• ✨ Supports AbortSignal and automatic abort on re-render.

🚀 Install

npm i react-client-async

✅ useAsync Hook

You can use the useAsync hook to create a task.

console.log(useAsync(fn,args,options));

✅ Async Component

You can use the Async component to render an async component.

<Async$fc={fc}// may be an async function component$waiting={waiting}// waiting component$fallback={fallback}// fallback component{...props}// props for the function component/>

🎬 Demo of Recursive Async Component

Easy to wrap a recursive async component and memoize it.

constRec: FC<{n: number}>=wrap(async({[$signal]: signal, n })=>// break the recursion(n<=0) ? 0 : (// delay and recursion<>{awaitdelay(99,signal)}{n}<Recn={n-1}/>{n}</>));

⏳ What is Next?

• ⏳ useAsyncIterable hook
• ⏳ AsyncIterable component

asyncfunction*IterableComponent(){yield*OtherIterableComponent();yieldawaitcomponent1();yieldawaitcomponent2();yield<div>...</div>;}

• 🌟 Star this repo if you like it! 🤩🤩🤩
• 👉 github.com/hk-shao/react-client-async

Looking forward to your feedback or contribution! 🚀🚀🚀

Development

Install

• Install bun runtime: npm install -g bun
• Install dependencies: bun install

Run & Build

• Run demo: bun dev
• Build demo: bun build:app
• Build package: bun build:lib

Deploy

• Deploy demo to github pages: bun build:app:deploy
• Publish this package to npm: bun build:lib:publish