v1.3.0

⚛️⏳
React Async for Client

🎬 Demo · 🌟 Source · 🚀 Package

What's new?

• Correctly abort when a component is unmounted.
• The stop can be passed in for abort reasons.
• Rename create factory function to wrap.
• More user-friendly demo page.
• Better TS type support.

What's changed?

• See: v1.1.2...v1.3.0

v1.1.2

⚛️⏳
React Async for Client

🎬 Demo · 🌟 Source · 🚀 Package

👋 Introduction

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

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

🚀 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 create an memoized async component with recursion.

const Rec = create<{ n: number }>(
  async ({ [$signal]: signal, n }) =>
    // break the recursion
    (n <= 0) ? 0 : (
    // delay and recursion
      <>
        {await delay(99, signal)}
        {n} <Rec n={n - 1} /> {n}
      </>
    )
);

⏳ What is Next?

• ⏳ useAsyncIterable hook
• ⏳ AsyncIterable component

async function* IterableComponent() {
  yield* OtherIterableComponent();
  yield  await component1();
  yield  await component2();
  yield  <div>...</div>;
}

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

Looking forward to your feedback or contribution! 🚀🚀🚀