A Quick Intro to Suspense in React 18
Vložit
- čas přidán 3. 01. 2022
- Learn the basics of how to work with Suspense in React 18!
CodeSandbox: codesandbox.io/s/github/samse...
GitHub: github.com/samselikoff/2021-1...
(Note: As of this recording Data Fetching with Suspense is not fully supported.) - Zábava
Killer video! This is by far the most digestible demo of Suspense that I've seen
Great demo for the concept. Call me crazy but the UX before suspense was added is better in this example IMO. render the static content immediately and then fill in the dynamic data. Otherwise you have way to much movement on the page waiting for data to be loaded before rendering the component
Definitely a valid argument! You can opt to build in these sort of skeleton screens as you like throughout your app. But personally I find that they introduce "UI anxiety" because they give the user too many things to look at. I prefer at most one intermediate screen if an app is transitioning from a pending to a loaded state, because it minimizes how much the user has to "guess" until the app is ready. I find most (all?) native iOS apps behave this way.
Came here for suspense. Ended up learning about useSWR, emmet wrap with abbreviation, and framer-motion. Great video!
This is awesome. I love how you show off the power of Suspense in such a simple way!
Thanks Sam! Really love the clean and informative style you have. Inspiring!
Sam your explaining skills are from another level.
Thanks for the awesome videos.
Subscribed
So glad I discovered this channel!
Absolutely loved your explanation
Something about the way you explain, dude. Makes it sound really easy to understand.!
This is awesome but simple, thank you so much!
Thanks Sam! Very helpful video!
Thank you very much, very good quality and content
You got yourself a new subscriber!
I really enjoyed this video. Thanks for the great content!
Great video, super clear!
Awesome video !! Thanks for the amazing content
So it basically marks something as being async and doing an await at component level. This is pretty cool since it’s a very basic paradigm to wait for data fetching. You would do it the same way by working a bit with the data store and setting some flags, manually
Just stumbled upon your channel. Super informative content and presentation. Thank you.
Love this!!
Awesome video man thanks!
Great video! Would love to see if you make react server components videos
Awesome teaching method dude
Thanks for this great video!!!
Underrated channel 😍
This is cool but -- how does centralizing this in the parernt handle it if one (or more) of the child components cannot be fetched? It seems like it would just show the spinner indefinitely for the whole group -- whereas before, we would at least see the stats from the child components that did complete their fetches.
You can make it throw an error so you can use Error Boundaries to handle that case. It's actually really nice because before we couldn't use error boundaries with async code, but Suspense basically turns async code into sync code. I think I'll make a video on this because several folks have asked!
Awesome content.
Great demo
Great video! Explained so well! Thank you! Can you please share with us how you are wrapping your tags when you highlight them in your code? I assume it’s an extension?
it's emmet in vscode, ctrl+shift+p -> wrap with abbreviation. If you use it recently it will be just ctrl+shift+p -> enter, so it's pretty fast
Great video. I’d love to learn more about how (if possible) you can use different suspense boundaries depending on the render - i .e on initial page load delegate to top level suspense boundary, but if the user navigates to another page within the same app, delegate to a lower-level suspense boundary.
This is something I've wondered as well! There is currently a unstable_avoidThisFallback prop that does just this, but the team has said they don't know if it will change or even be part of the final API. I'm hacking on some demos for how to do this cleanly today, stay tuned...
Check out the original PR for more info: github.com/facebook/react/pull/15578
1:38 does anyone know how he pulled the trick to warp the div? or what ext did he use?
Wow, really love the style of this video, so clean and so infomative, subscirbed already❤
This is awesome
awesome video
I’m hoping you can help clear up something I’ve struggled with for years. I see that you have a component for each platform where you fetching data for each. Is that the recommend approach or do you typically create a single component and pass the data in as a prop? This would require that you fetch all your data at a higher component. Looking forward to your answer! Thanks for any help.
Thanks for this video!
Could you please share your VSCode configurations with list of extensions?
Thank you, sir. Swift explanation.
How should we enable this suspense option if we are using fetch API ?
Hello would like to know, hiw about when each component time to fetch data varies cant one render each has it has data instead of waiting for all to have data
if one of the children fails to fetch would it prevent others from rendering to display?
Suspense lets you use Error Boundaries for data fetching like you're used to doing for rendering errors! reactjs.org/docs/concurrent-mode-suspense.html#handling-errors
@@samselikoff thank you for a quick reply. May I ask one more question (I hope it is not getting annoying=): when you use useSWR, I noticed you didn't supply second argument (i.e. fetcher), is it because you are using miragejs? or is not specific to mirage but swr?
@@jimshtepa5423 No prob + def not annoying, love getting questions! I always use the global config via the provider to set up a single fetcher for all my API requests, you can see it in the demo here: github.com/samselikoff/2021-11-18-suspense/blob/16c41689f55d0747de06528d73cef93f89f19e16/pages/_app.js#L17-L21
@@samselikoff understood. thank you
if i need one spinner for each component, i need wrap the suspense in each of them?
Thanks for good explanation. But what if one of children throws an error or times out? all of them will time out then?
i downloaded the code, which api of twitter and others did you use?
thanks bro
Will Suspense only render the page when all of the images are FULLY loaded? I've noticed a number of my images load initially fairly fast but then load in quarter increments so I'd like to use Suspense if that's the case.
The idea is you can control whether each image should block rendering or not (by rendering a fallback)
How does the suspense know that there is some async fetch happening down the tree? Does the useSWR hook do something that makes Suspense component aware of this?
SWR with suspense: true uses Suspense, which means it throws a promise during render if the data is not there yet. That works no matter how deep in the tree - any component that throws a promise during render will cause the whole tree to suspend until all the promises resolve, then React tries to render again.
Suspense is nice to use with atomic state managers like jotai or recoil
are you using vscode vim?
Yep! Love it
But what if one of the API calls fail to response? Then we'll have an invalid data.. What will suspense do then? Show the spinner forever?!
Hmm, not sure I understand this sentence at 4:03 "... in Suspense this data will always be populated, if it's not...". If it's always populated, how can it not be populate :) ?
lazy method is does not need in suspense in react 18 ??
But what if all the components have loaded but one component require more time, then others have to also wait for it to load
You can move the Suspense boundaries around to tweak the loading behavior - check out my follow-up video to this one! czcams.com/video/h_vVsPwvcsg/video.html
i honestly prefer before you applied the suspense. esp if there are calculations and different api latency for each call.
There are some more composability benefits with Suspense, especially around error handling. Check out this vid if you haven't yet: czcams.com/video/h_vVsPwvcsg/video.html
@@samselikoff i am using Error Boundaries, so im good. i'd rather incrementally load what is ready than load the whole thing at once
what if a single stat components fails to load the data?
Suspense lets you use Error Boundaries for data fetching like you're used to doing for rendering errors! reactjs.org/docs/concurrent-mode-suspense.html#handling-errors
Can I have my parent handle deep nested suspended child (not just immediate child)?
Yep, any component that suspends will look up the tree for the nearest ancestor Suspense component, even if that nearest ancestor is all the way at the root!
can I also get that spinner animation ? 😅
Bruh I thought this was a video on how to use suspense in a story -_-
Love your channel and the quality of these videos. Thanks Sam!