@@ -11,52 +11,54 @@ export { useAsyncIter, type IterationResult };
11
11
/**
12
12
* `useAsyncIter` hooks up a single async iterable value into your component and its lifecycle.
13
13
*
14
+ * _Illustration:_
15
+ *
16
+ * ```tsx
17
+ * import { useAsyncIter } from 'react-async-iterators';
18
+ *
19
+ * function SelfUpdatingTodoList(props) {
20
+ * const { value: todos } = useAsyncIter(props.todosAsyncIter);
21
+ * return (
22
+ * <ul>
23
+ * {todos?.map(todo => (
24
+ * <li key={todo.id}>{todo.text}</li>
25
+ * ))}
26
+ * </ul>
27
+ * );
28
+ * }
29
+ * ```
30
+ *
14
31
* Given an async iterable `input`, this hook will iterate it and rerender the host component upon
15
- * each new value that becomes available as well as any possible completion or error it may run into.
32
+ * each new value that becomes available together with any possible completion or error it may run into.
16
33
* If `input` is a plain (non async iterable) value, it will simply be used to render once and
17
34
* immediately.
18
35
*
19
- * The hook inits and maintains its current iteration process across renderings as long as its
36
+ * The hook inits and maintains its current iteration process across re-renders as long as its
20
37
* `input` is passed the same object reference each time (similar to the behavior of a
21
38
* `useEffect(() => {...}, [input])`), therefore care should be taken to avoid constantly recreating
22
- * the iterable every render, e.g; declaring it outside the component body or control __when__ it
39
+ * the iterable every render, e.g; by declaring it outside the component body or control __when__ it
23
40
* should be recreated with React's [`useMemo`](https://react.dev/reference/react/useMemo).
24
41
* Whenever `useAsyncIter` detects a different `input` value, it automatically closes a previous
25
42
* `input` async iterable before proceeding to iterate any new `input` async iterable. The hook will
26
43
* also ensure closing a currently iterated `input` on component unmount.
27
44
*
28
45
* The object returned from `useAsyncIter` holds all the state from the most recent iteration
29
46
* of `input` (most recent value, whether is completed or still running, etc. - see
30
- * {@link IterationResult}).
47
+ * {@link IterationResult `IterationResult` }).
31
48
* In case `input` is given a plain value, it will be delivered as-is within the returned
32
49
* result object's `value` property.
33
50
*
51
+ * @template TValue The type of values yielded by the passed iterable or otherwise type of the passed plain value itself.
52
+ * @template TInitValue The type of the initial value, defaults to `undefined`.
53
+ *
34
54
* @param input Any async iterable or plain value
35
- * @param initialValue Any initial value for the hook to return prior to resolving the ___first
55
+ * @param initialValue Any initial value for the hook to return prior to resolving the ___first
36
56
* emission___ of the ___first given___ async iterable, defaults to `undefined`.
37
57
*
38
58
* @returns An object with properties reflecting the current state of the iterated async iterable
39
- * or plain value provided via `input` (see {@link IterationResult})
59
+ * or plain value provided via `input` (see {@link IterationResult `IterationResult` })
40
60
*
41
- * @see {@link IterationResult }
42
- *
43
- * @example
44
- * ```tsx
45
- * // In its simplest:
46
- *
47
- * import { useAsyncIter } from 'react-async-iterators';
48
- *
49
- * function SelfUpdatingTodoList(props) {
50
- * const { value: todos } = useAsyncIter(props.todosAsyncIter);
51
- * return (
52
- * <ul>
53
- * {todos?.map(todo => (
54
- * <li key={todo.id}>{todo.text}</li>
55
- * ))}
56
- * </ul>
57
- * );
58
- * }
59
- * ```
61
+ * @see {@link IterationResult `IterationResult` }
60
62
*
61
63
* @example
62
64
* ```tsx
@@ -204,10 +206,10 @@ type IterationResult<TVal, TInitVal = undefined> = {
204
206
value : ExtractAsyncIterValue < TVal > | TInitVal ;
205
207
206
208
/**
207
- * Indicates whether the iterated async iterable is still pending on its own first
208
- * value to be resolved.
209
+ * Indicates whether the iterated async iterable is still pending its own first value to be
210
+ * resolved.
209
211
* Will appear `false` for any iterations thereafter and reset back every time the iteratee
210
- * is replaced with a new one.
212
+ * is changed to a new one.
211
213
*
212
214
* Can be used in certain cases for displaying _"loading" states_ metaphorically similar to
213
215
* a how a pending state of a promise is thought of.
@@ -217,13 +219,15 @@ type IterationResult<TVal, TInitVal = undefined> = {
217
219
pendingFirst : boolean ;
218
220
219
221
/**
220
- * Indicates whether the iterated async iterable is done; meaning had either completed (by
221
- * resolving a `{ done: true }` object
222
- * [MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#done))
223
- * or threw an error (in which case the escorting `error` property will be set to it).
222
+ * Indicates whether the iterated async iterable has ended having no further values to yield,
223
+ * meaning either of:
224
+ * - it has completed (by resolving a `{ done: true }` object
225
+ * ([MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#done)))
226
+ * - it had thrown an error (in which case the escorting `error` property will be set to
227
+ * that error).
224
228
*
225
229
* When `true`, the adjacent `value` property will __still be set__ to the last value seen
226
- * until the moment of completing/erroring.
230
+ * before the moment of completing/erroring.
227
231
*
228
232
* Is always `false` for any plain value given instead of an async iterable.
229
233
*/
0 commit comments