Skip to content

Commit 8252d3a

Browse files
authored
add clarification around Subscribe initial render (#58)
1 parent 49b0cda commit 8252d3a

File tree

2 files changed

+10
-6
lines changed

2 files changed

+10
-6
lines changed

docs/api/core/subscribe.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,11 @@ const Subscribe: React.FC<{
1818
}>
1919
```
2020
21+
:::caution Important
22+
This Component first mounts itself rendering the fallback (or `null` if it wasn't provided), subscribes to `source$` and
23+
then it renders its children.
24+
:::
25+
2126
#### Properties
2227
2328
- `source$`: (Optional) Source Observable that the Component should subscribe to, before its children renders.
@@ -28,11 +33,6 @@ const Subscribe: React.FC<{
2833
This Component doesn't trigger any updates if any of its subscription emits.
2934
:::
3035
31-
:::note Important
32-
This Component first mounts itself rendering `null`, subscribes to `source$` and
33-
then it renders its children.
34-
:::
35-
3636
## See also
3737
3838
- [`<RemoveSubscribe />`](./RemoveSubscribe)

docs/core-concepts.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,11 @@ function App() {
148148

149149
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.
150150

151-
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$`
151+
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.
152+
153+
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`.
154+
155+
`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$`
152156

153157

154158
```tsx

0 commit comments

Comments
 (0)