Skip to content

Commit

Permalink
add clarification around Subscribe initial render (#58)
Browse files Browse the repository at this point in the history
  • Loading branch information
voliva authored Oct 23, 2023
1 parent 49b0cda commit 8252d3a
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 6 deletions.
10 changes: 5 additions & 5 deletions docs/api/core/subscribe.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,11 @@ const Subscribe: React.FC<{
}>
```
:::caution Important
This Component first mounts itself rendering the fallback (or `null` if it wasn't provided), subscribes to `source$` and
then it renders its children.
:::
#### Properties
- `source$`: (Optional) Source Observable that the Component should subscribe to, before its children renders.
Expand All @@ -28,11 +33,6 @@ const Subscribe: React.FC<{
This Component doesn't trigger any updates if any of its subscription emits.
:::
:::note Important
This Component first mounts itself rendering `null`, subscribes to `source$` and
then it renders its children.
:::
## See also
- [`<RemoveSubscribe />`](./RemoveSubscribe)
6 changes: 5 additions & 1 deletion docs/core-concepts.md
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,11 @@ function App() {

When a React-RxJS hook has a default value and no one is subscribed to its observable, on the first render it will return that value, and then it will safely subscribe to the source after mounting. If the underlying observable did have a subscription before the component was mounted, it will directly get the current value instead.

If you don't give it a default value, you will need to make sure that observable has a subscription active before the Component that uses that hook is called. React-RxJS has a utility that helps with this: `<Subscribe source$={stream}>{ children }</Subscribe>` will render `{ children }` only after subscribing to its `source$`. `Subscribe` also subscribes to all the observables used by its children (as if it were a React's Context), so in this case we can just omit `source$`
If you don't give it a default value, you will need to make sure that observable has a subscription active before the Component that uses that hook is called.

React-RxJS has a utility that helps with this: `<Subscribe source$={stream}>{ children }</Subscribe>` will render `{ children }` only after subscribing to its `source$`. On the initial render, when it hasn't subscribed to the stream yet, it will render `null`.

`Subscribe` also subscribes to all the observables used by its children (as if it were a React's Context), so in this case we can just omit `source$`


```tsx
Expand Down

0 comments on commit 8252d3a

Please sign in to comment.