Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tom-sherman/suspend-concurrently
https://github.com/tom-sherman/suspend-concurrently
Last synced: 14 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/tom-sherman/suspend-concurrently
- Owner: tom-sherman
- License: mit
- Created: 2023-02-17T20:03:13.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-25T10:23:30.000Z (almost 2 years ago)
- Last Synced: 2024-12-01T23:06:42.491Z (23 days ago)
- Language: TypeScript
- Size: 277 KB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Suspend Concurrently
Promise concurrency primitives for React Suspense.
- `suspendAll(promises)`
- `suspendRace(promises)`
- `suspendAny(promises)`
- `suspendAllSettled(promises)`These work just like the `Promise.all`, `Promise.race`, `Promise.any`, and `Promise.allSettled` methods, but are suitable to be used inside of React 18. See the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise#promise_concurrency) for more information.
## Usage
These utilities are intended to be used with Remix's deferred data APIs, but they can also be used anywhere you need to compose multiple promises together and resolve them concurrently.
In remix:
```jsx
export function loader() {
return defer({
deferredUserName: fetchUserName(),
deferredUserAvatar: fetchUserAvatar(),
});
}export default function UserRoute() {
const {deferredUserName, deferredUserAvatar} = useLoaderData();
const userPromise = suspendAll([deferredUserName, deferredUserAvatar]);return (
}>
{([name, avatar]) => (
{name}
)}
);
}
```