Comments (7)
Thank you for your thorough response, @josepot. I'm planning to rely heavily on this library in a staffing application I am developing at FDNY and want to get to know it well before I begin. For now I can confirm that I was running an old version. I think I installed it with npm install react-rxjs
: would that explain it?
from react-rxjs.
When I remove the Subscribe component, nothing bad seems to happen.
That's because you must be using an old version of the library, or because you have subscribed from somewhere else. Because this is what happens with the current version if the a subscription on the underlying observable is not present when the hook is evaluated on render.
In previous versions of this library we were trying to make the hooks work without the need of using Subscribe
. In other words: we allowed for the initial subscription to happen on render, but then we realized that it was too hacky and full of edge cases that we didn't want to deal with.
Also, we realized that wasn't the kind of mental models that we wanted to promote, because ideally the subscriptions that trigger io side-effects (fetch, websocket connections, etc) should always happen before render, while there are lots of subscriptions that can (and should) take place after the component is mounted. So, eventually we gave up on trying to support that madness, and we decided to promote other patterns, instead. Like using Subscribe
.
That being said, Subscribe
is not always necessary. Subscribe
is just a super-set of Suspense
with the fallback parameter defaulted to null
. All what it does is to use Suspense
and subscribe to the source after mount. However, if you don't want to leverage Suspense
, then bind
accepts a second optional parameter that's the default value that can be used when there is no subscription (or when there is a subscription, but no value has been emitted yet), if you use that overload of bind
, then you don't need to use Subscribe
because in that case the hook returned from bind
will never trigger "Suspense".
Also, there are instances when what you want is a top level subscription (so that the requests happen ASAP) combined with Suspense
, for instance.
Anyways, sorry if I gave you too much information. I just wanted to make sure that you understand the "magic" behind "Subscribe" π
We need to improve the docs and we need to find ways to explain these things better. So, if you wan to help us with that, we are very open to suggestions π.
from react-rxjs.
I'm planning to rely heavily on this library in a staffing application I am developing at FDNY and want to get to know it well before I begin
Nice! Thanks for letting me know that! We are heavily relying on this library on many different projects at Adaptive (the company that I work for) and so far it's working out really well for us. Although, I have to find ways to make sure that we are able to spread the knowledge and the mental-models that we want to promote beyond our company. That's why -among other initiatives- we are working on a re-architected version of ReactiveTrader.com, if you are interested, the code of this re-architected version can be found here. We still have to add READMEs and document things properly, but maybe it could be useful for you to pay attention at the things that we are doing in there. Also, please feel free to raise any issues/questions/comments if you need help with something.
I can confirm that I was running an old version. I think I installed it with npm install react-rxjs: would that explain it?
yes! my bad! I just added a deprecation message to it. So, at least now if someone else installs it, then they will get a warning asking them to install @react-rxjs/core
instead.
from react-rxjs.
I'd love to help out and I would be happy to read any WIP mental-model documents or threads you have.
from react-rxjs.
Hi @hoclun-rigsep ,
I'm very sorry that it took me this long to get back at you. If you are still interested, we would love to get some help and feedback from you, please send me a DM on twitter if you are still up for the challenge π, because we could defenitelly use some help π. We are about to release v1 and we want to completely re-write the docs. Also, if you would like to know more about the mental models that we want to promote with this library, I think that you could find this presentation helpful.
Also, we have improved the way that Subscribe
works and it's a lot more ergonomic now.
Once again, I'm very sorry for the late response π
from react-rxjs.
Hi @josepot,
I am sorry but I do not use Twitter. I also seldom view recorded talks, but I watched your whole presentation and wish to tell you that I found it extremely effective in establishing the justification for React-RxJS. For a couple of years I've been working on an Angular application, and the more I learned about RxJS, the more I used it to manage state. In Angular there's perhaps less need for a binding such as yours because you can just subscribe in the component. But the way components can be expected to update, the opacity or verbosity of other things in Angular, et cetera, make me think that if I could do it over again I think I'd go with React and React-RxJS.
I have a useless comment to make: the way you compared the component tree with the state graph was brilliant, but for some reason I didn't get the same value out of the diagram at https://react-rxjs.org/docs/tutorial/github-issues#identifying-the-state-of-the-app. If I can put my finger on exactly why, I'll let you know. :)
I am an able writer and I am willing to help with documentation. However, I'm not sure you would want someone who hasn't written an application that manages state this way, and the project at work that I had in mind is "on hold"βprobably forever. (It's a long story.)
Anyway, if you wish to reach me other than via this thread, my email address is [email protected] and if you want my PGP key let me know. I'm also still subscribed to this thread so that works too.
from react-rxjs.
I stumbled on this issue searching for how to use <Suspense>
with react-rxjs. It appears that it doesn't work like:
<Suspense fallback={<p>Loading</p>>
<ThingThatUsesHook />
</Suspense>
That was a bit confusing because the docs https://react-rxjs.org/docs/core-concepts#suspense doesn't appear to say that you're not supposed to do this and instead Subscribe
is what you want.
<Subscribe>
<ThingThatUsesHook />
</Subscribe>
Question though, if I have a list like:
{
todoIds.map((id) => (
<ThingThatUsesHook key={id} id={id} />
))
}
What's the best place to put the <Subscribe>
? Inside the the map, or surrounding the map?
from react-rxjs.
Related Issues (20)
- Uncaught Error: Missing Subscribe HOT 2
- 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.