Comments (2)
A summary of that docs section that's most relevant to the question is:
Given
const [useFoo, foo$] = bind(of(1))
When you don't have defined a default value, what should useFoo()
return the first time it's run, if no one has subscribed to the shared observable (foo$
) yet?
It just can't return anything. useFoo()
would have to subscribe to the observable, which would violate React's rules about subscribing on render. And even if it did, there's no guarantee that the observable emits something synchronously so that it can be returned on that hook call. In this specific case it would, because it's of(1)
, but on most of the cases it actually won't.
So if you haven't defined a default value for that hook you need an active subscription to the underlying observable beforehand. <Subscribe>
can help in two ways:
- It takes in a
source$
property, which you can use so that it subscribes to that observable before rendering its children. (less "magic" than the other way) - It takes in all the subscriptions needed by its children automatically - More powerful, but with great power comes great responsibility.
What's actually happening when useFoo()
is called for the first time is (and why the error "Missing subscribe" is thrown):
useFoo()
checks whetherfoo$
has an active subscription.- If it does, it checks whether
foo$
has emitted any value previously.- If it has, then it returns the last value emitted.
- If it hasn't, then it either returns the default value, or triggers suspense waiting for the first value to come through.
- If it doesn't have an active subscription, then it checks whether it has a default value or not.
- If it has, then it returns the default value.
- If it hasn't, then it communicates to the nearest
<Subscribe>
parent (through a react context provider) for that<Subscribe>
to perform a subscription tofoo$
. Then it triggers suspense untilfoo$
emits something. - If no parent
<Subscribe>
is found, then it throws theMissing Subscribe
exception.
- If it does, it checks whether
(I need to make a flow chart out of this 😅 )
The parent <Subscribe>
is a component that has already been mounted, so it can handle all the subscriptions of its children even when they are getting rendered for the first time. The only thing to note is that the owner of that subscription is the <Subscribe>
, not the actual child. If the child that triggered one specific subscription unmounts, the subscription will still be active. The component that will clean up that subscription is that specific <Subscribe>
, its owner, once it unmounts.
That's why the second approach is powerful, reduces a lot of boilerplate, but you need to be careful - Using a <Subscribe>
on the root of your application is probably a bad idea, since it will pick up every subscription of every child and keep them alive throughout the whole lifetime of your app.
We still need to add docs for this, but on a recent version we released <RemoveSubscribe>
(source code), in order to prevent some children from accessing a parent <Subscribe>
directly, which can be useful to work around that.
from react-rxjs.
@mbret you have to either use <Subscribe>
or pass a default value: https://react-rxjs.org/docs/core-concepts#streams-as-state
from react-rxjs.
Related Issues (20)
- Observable emitting error should not cause infinite loop on Subscribe HOT 1
- Question - Todo App Demo
- Testing a signal HOT 1
- Are there any projects that use React-RxJS?
- hook returned by bind(functionAcceptingArrayReturningAsyncObservable$) should not cause infinite render loop HOT 2
- takeUntil operator cannot complete a StateObservable HOT 1
- Server side rendering is missing `getServerSnapshot` HOT 2
- [BUG] bind is returning an array when an Object is passed through the observer. HOT 1
- Use native react use-sync-external-store instead of package HOT 2
- batchUpdates compatibilities HOT 3
- bind hook only firing once with scan and aggregated map HOT 3
- TypeScript moduleResolution: NodeNext expects core.es2017.d.ts types file
- Subscribe incorrectly rendering fallback on initial mount HOT 5
- NextJS 13 getServerSnapshot issue HOT 3
- Binding to observables that emit SUSPENSE with a default value does not trigger React.Suspense to render the `fallback` component HOT 1
- `<Subscribe>` without `source$` does not seem to work as advertised HOT 7
- "Inner" <Subscribe> is skipped in case of nested <Subscribe>s HOT 3
- Basic Todos Example no longer works as of utils version 0.9.7 HOT 4
- SSR and react-rxjs HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-rxjs.