Skip to content

Commit 23d8c50

Browse files
authored
docs: edits for useAsyncIter's JSDocs (#10)
1 parent 6cd3695 commit 23d8c50

File tree

1 file changed

+37
-33
lines changed

1 file changed

+37
-33
lines changed

src/useAsyncIter/index.ts

Lines changed: 37 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -11,52 +11,54 @@ export { useAsyncIter, type IterationResult };
1111
/**
1212
* `useAsyncIter` hooks up a single async iterable value into your component and its lifecycle.
1313
*
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+
*
1431
* 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.
1633
* If `input` is a plain (non async iterable) value, it will simply be used to render once and
1734
* immediately.
1835
*
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
2037
* `input` is passed the same object reference each time (similar to the behavior of a
2138
* `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
2340
* should be recreated with React's [`useMemo`](https://react.dev/reference/react/useMemo).
2441
* Whenever `useAsyncIter` detects a different `input` value, it automatically closes a previous
2542
* `input` async iterable before proceeding to iterate any new `input` async iterable. The hook will
2643
* also ensure closing a currently iterated `input` on component unmount.
2744
*
2845
* The object returned from `useAsyncIter` holds all the state from the most recent iteration
2946
* of `input` (most recent value, whether is completed or still running, etc. - see
30-
* {@link IterationResult}).
47+
* {@link IterationResult `IterationResult`}).
3148
* In case `input` is given a plain value, it will be delivered as-is within the returned
3249
* result object's `value` property.
3350
*
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+
*
3454
* @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
3656
* emission___ of the ___first given___ async iterable, defaults to `undefined`.
3757
*
3858
* @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`})
4060
*
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`}
6062
*
6163
* @example
6264
* ```tsx
@@ -204,10 +206,10 @@ type IterationResult<TVal, TInitVal = undefined> = {
204206
value: ExtractAsyncIterValue<TVal> | TInitVal;
205207

206208
/**
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.
209211
* 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.
211213
*
212214
* Can be used in certain cases for displaying _"loading" states_ metaphorically similar to
213215
* a how a pending state of a promise is thought of.
@@ -217,13 +219,15 @@ type IterationResult<TVal, TInitVal = undefined> = {
217219
pendingFirst: boolean;
218220

219221
/**
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).
224228
*
225229
* 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.
227231
*
228232
* Is always `false` for any plain value given instead of an async iterable.
229233
*/

0 commit comments

Comments
 (0)