You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In addition to eager atoms, jotai-eager provides `loadable` for consistent loading state handling and `withPending` for fallback values during async resolution.
64
+
63
65
## Recipes
64
66
65
67
### Avoiding request waterfalls
66
68
67
-
If your atom has multiple async dependencies, best to jump start all of them at once and wait for their results, instead of awaiting them sequentially. In vanilla async atoms, `Promise.all(...)` is the API to use, but in eager atoms, use the `get.all()` API:
69
+
If your atom has multiple async dependencies, it's best to initiate all of them simultaneously and wait for their results, instead of awaiting them sequentially. In vanilla async atoms, `Promise.all(...)` is the API to use, but in eager atoms, use the `get.all()` API:
The `loadable` API wraps an atom to provide a consistent loading state representation, sharing a Promise cache between all jotai-eager APIs to minimize suspensions.
95
+
96
+
```ts
97
+
import { atom } from'jotai';
98
+
import { loadable } from'jotai-eager';
99
+
100
+
const asyncAtom =atom(async () =>'data');
101
+
const loadableAtom =loadable(asyncAtom);
102
+
103
+
// Use in component:
104
+
const state =useAtom(loadableAtom);
105
+
if (state.state==='loading') return <div>Loading...</div>;
106
+
if (state.state==='hasError') return <div>Error: {state.error}</div>;
107
+
return <div>{state.data}</div>;
108
+
```
109
+
110
+
### Handling Pending States with `withPending`
111
+
112
+
The `withPending` API wraps an atom to handle unresolved values by returning a fallback, providing an alternative to Jotai's `unwrap` with enhanced pending state management.
// Returns 'Loading...' while pending, then 'data'
122
+
```
123
+
90
124
## Caveats
91
125
92
126
### Using `try` & `catch` inside eager atoms
93
127
94
-
Eager atoms internally use exceptions to "suspend" computation of the atom until an async dependency is fulfilled (similar to React's suspense behavior, but does not require React to work). This means that using exception handling inside of eager atoms has to be instrumented with an additional call to `isEagerError`.
128
+
Eager atoms internally use exceptions to suspend computation of the atom until an async dependency is fulfilled (similar to React's suspense behavior, but does not require React to function). This means that using exception handling inside eager atoms has to be instrumented with an additional call to `isEagerError`.
For this particular use-case, since we're always deferring, using an `eagerAtom` over
163
+
For this particular usecase, since we're always deferring, using an `eagerAtom` over
130
164
a vanilla async atom is unnecessary. [See Advanced Usage for more complex patterns](#advanced-usage).
131
165
132
166
### Make note of the dual nature
@@ -181,5 +215,5 @@ immediately.
181
215
182
216
Building data graphs with these dual-natured (sometimes async, sometimes sync) atoms as a base can lead to unnecessary rerenders, stale values and micro-suspensions (in case of React) if not handled with care.
183
217
184
-
`jotai-eager` provides a primitive for building asynchronous data graphs
218
+
`jotai-eager` provides primitives for building asynchronous data graphs
185
219
that act on values as soon as they are available (either awaiting for them, or acting on them synchronously).
In addition to eager atoms, jotai-eager provides `loadable` for consistent loading state handling and `withPending` for fallback values during async resolution.
66
+
65
67
## Recipes
66
68
67
69
### Avoiding request waterfalls
68
70
69
-
If your atom has multiple async dependencies, best to jump start all of them at once and wait for their results, instead of awaiting them sequentially. In vanilla async atoms, `Promise.all(...)` is the API to use, but in eager atoms, use the `get.all()` API:
71
+
If your atom has multiple async dependencies, it's best to initiate all of them simultaneously and wait for their results, instead of awaiting them sequentially. In vanilla async atoms, `Promise.all(...)` is the API to use, but in eager atoms, use the `get.all()` API:
The `loadable` API wraps an atom to provide a consistent loading state representation, sharing a Promise cache between all jotai-eager APIs to minimize suspensions.
97
+
98
+
```ts
99
+
import { atom } from'jotai';
100
+
import { loadable } from'jotai-eager';
101
+
102
+
const asyncAtom =atom(async () =>'data');
103
+
const loadableAtom =loadable(asyncAtom);
104
+
105
+
// Use in component:
106
+
const state =useAtom(loadableAtom);
107
+
if (state.state==='loading') return <div>Loading...</div>;
108
+
if (state.state==='hasError') return <div>Error: {state.error}</div>;
109
+
return <div>{state.data}</div>;
110
+
```
111
+
112
+
### Handling Pending States with `withPending`
113
+
114
+
The `withPending` API wraps an atom to handle unresolved values by returning a fallback, providing an alternative to Jotai's `unwrap` with enhanced pending state management.
// Returns 'Loading...' while pending, then 'data'
124
+
```
125
+
92
126
## Caveats
93
127
94
128
### Using `try` & `catch` inside eager atoms
95
129
96
-
Eager atoms internally use exceptions to "suspend" computation of the atom until an async dependency is fulfilled (similar to React's suspense behavior, but does not require React to work). This means that using exception handling inside of eager atoms has to be instrumented with an additional call to `isEagerError`.
130
+
Eager atoms internally use exceptions to suspend computation of the atom until an async dependency is fulfilled (similar to React's suspense behavior, but does not require React to function). This means that using exception handling inside eager atoms has to be instrumented with an additional call to `isEagerError`.
For this particular use-case, since we're always deferring, using an `eagerAtom` over
165
+
For this particular usecase, since we're always deferring, using an `eagerAtom` over
132
166
a vanilla async atom is unnecessary. [See Advanced Usage for more complex patterns](#advanced-usage).
133
167
134
168
### Make note of the dual nature
@@ -183,7 +217,7 @@ immediately.
183
217
184
218
Building data graphs with these dual-natured (sometimes async, sometimes sync) atoms as a base can lead to unnecessary rerenders, stale values and micro-suspensions (in case of React) if not handled with care.
185
219
186
-
`jotai-eager` provides a primitive for building asynchronous data graphs
220
+
`jotai-eager` provides primitives for building asynchronous data graphs
187
221
that act on values as soon as they are available (either awaiting for them, or acting on them synchronously).
0 commit comments