Comments (8)
Just added first class Suspense support. If interested you may play the suspense example on suspense branch.
git clone [email protected]:crimx/observable-hooks.git --branch suspense
cd observable-hooks
yarn install
yarn build
cd examples/suspense
yarn start
from observable-hooks.
Hi Chris,
If the Component doesn't handle loading or error state then you don't need a stream of React elements. Create a stream of values instead.
But then, how will the parent components get triggered for suspense or error boundaries?
For Suspense use use-suspensible on the emitted values.
For error boundaries I think you raised a very good question. Currently useSubscription
and useObservableState
(which uses useSubscription
under the hood) will silently swallow the error by default. With useSubscription
you can throw the error in the error callback. It is not possible now to do the same with useObservableState
.
I think to support error boundaries useSubscription
should throw the error by default if no callback is provided.
from observable-hooks.
After some digging I just realized that this is not what error boundaries are for. Error boundaries should be used for preventing uncontrollable render errors on children breaking the Component, not for intentional conditional rendering.
The ErrorUI
in the example represents the error of the logic not the Component rendering. It is part of the failed state.
I think the current error handling of useSubscription
and useObservableState
is the right behavior.
from observable-hooks.
Thank you @crimx for the background on all of this.
So, if I understand correctly, error boundaries probably don't relate at all to what happens in the observable pipelines since they are failure state, and not rendering error state.
When trying to leverage suspense, just use streams of values and hook them into the usual suspense mechanism or with the use-suspense.
Do you think that there's much difference in terms of performance using streams of React elements compared conditional rendering? A colleague of mine raised a concern about the implications of virtual DOM in the context of observable pipeline. I didn't think that there would be much difference from conditional rendering, but perhaps I'm not understanding the way that this all works in React.
from observable-hooks.
So, if I understand correctly, error boundaries probably don't relate at all to what happens in the observable pipelines since they are failure state, and not rendering error state.
Yes. Even though the docs says "It would catch both rendering errors and errors from Suspense data fetching." which sounds like a feature, I would say it is more of a limitation. The data fetching promise is thrown to Suspense. If you want to handle error inside Suspense you'll have to catch the error beforehand and return something like { result, error }
which defeats the purpose of Suspense.
This can easily lead to wrapper hell. But since Suspense is still experimental, the React team may come up with other ways to handle this in the future.
Nevertheless, this is the only option on the docs right now. I should explore the possibilities of better intergration for folks who want to adopt the pattern.
A colleague of mine raised a concern about the implications of virtual DOM in the context of observable pipeline.
React elements are just objects. Observable emitted elements are no different than the normal elements. In fact the Observable pipeline is like useMemo on elements. It will be faster on re-rendering when the element does not need to update. This could happen a lot in function components.
from observable-hooks.
Finally finish testing and writing docs. v2.2.0
is released! See Render-as-You-Fetch (using Suspense).
from observable-hooks.
Thanks @crimx I'm reading and learning from the example now. I can close this issue if you'd like.
from observable-hooks.
Sure. You may reopen if you think the issue needs further discussion.
from observable-hooks.
Related Issues (20)
- 老哥多出些rx的文章呗
- rfc: 为 useObservable 添加泛型以匹配多种 Observable HOT 1
- 请问下现在这个库再react18中使用,有多大的风险,有列举有风险的api吗 HOT 1
- 如何使用 useObservableEagerState 获取“从无到有”的 BehaviorSubject 值? HOT 2
- Question - descendent re-rendering? HOT 2
- `useObservableCallback`: allow callback with no parameters, or > 1 parameters HOT 4
- Specify custom dependencies for `useObservableSuspense` HOT 7
- useSubscription typescript wont allow undefined or null input$ HOT 4
- 为啥国内作者,文档全是英文呢? HOT 3
- ❓ Question: How can i use useObservable to create a subject HOT 1
- useObservableState: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. HOT 5
- Provided sourcemaps reference the src folder which isn't distributed HOT 3
- RxJs 7.0 support HOT 2
- Feature proposal: A hook to create a Observable State HOT 2
- 违背hooks原则 HOT 1
- useObservableEagerState missing emit HOT 13
- useObservableState(BehaviorSubject) gives undefined when first rendering HOT 2
- useSubscription 会触发 JS 报错导致页面白屏 HOT 27
- Make XHR requests using ObervableResource with a parameter HOT 4
- 如何实现替换react官网的useEventCallback? HOT 11
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 observable-hooks.