Write Clean Code with React Suspense | React Error Boundaries Explained

[@mocastello9253]

what a really great video and best explaination of react error boundary I've ever seen!! I've got a valuable knowledge after that and knowing more about using the APIs of that library thank you for sharing your expertise with us! all best from Berlin

[@ALLAOUAOKBA]

All perfect thanks dave just one question: does suspense work only with server components also does it work with simple fetch example?

[@mattburgess5697]

Some of this feels like it’s being done at the wrong level. There might be an error on Dave, but not on Susan, and logically it should be able to show all the others, with an error on only the broken one. The same applies to the data access. In actual fact there were two requests, the first for the big list and one for the details. Logically the skeleton should be on the individual items rather than the whole block. I can see there being a place for placing a suspense or error boundary on the components in a loop but I do worry about the implications. In any case this is not the first time I’ve run into your content and you’ve definitely earned a sub from me. Good content aimed at real devs.

[@stevereid636]

Fantastic! I always get some valuable knowledge from everyone of your videos 👍🏾

[@DaveGrayTeachesCode]

Glad to hear it!

[@madhavnagpal1860]

in PostList we havent returned null, while loading, then how useSwr notifiy Suspense that children are in loading state ?

[@genesissaquibal3252]

when im trying to import this useErrorHandler from react-error-boundary i got an error saying that it does not provide a named export for it.

[@staybalancedn]

What made you recommend the ZTM courses, I clicked on them expecting to see you as the teacher...Great video by the way

[@DaveGrayTeachesCode]

That would be nice, but no, I am not an instructor there. However, I do think they are a good resource for further learning.

[@nicolaichristensen6531]

Apart from making super components by not following JSX standards, {component} vs , great video.

[@DaveGrayTeachesCode]

Thank you - timestamp and reference for me to review please 😃

[@qwertyuio53]

​@@DaveGrayTeachesCode Around 9:02. { content } could be turned into if you just defined it as a function that returns JSX, instead of `let content = Not like this`.

[@DaveGrayTeachesCode]

@@qwertyuio53 that's a very common pattern though. But yes, it could work as a function. Any references I should read on why it is not recommended?

[@qwertyuio53]

@Dave Gray Not that I know of. I was just trying to point out the timestamp since op hasn't replied yet. Personally though, I would do it the function form so it's easier to track which are state/computed and which are components.

[@DaveGrayTeachesCode]

@@qwertyuio53 coming back to this as I've searched "super component" and from my findings, the pattern I'm using doesn't reach the definition I'm finding. Still curious about OP's reference here. That said, here's an example of the pattern I'm using shown in the RTK Query docs tutorial (PostsList): redux.js.org/tutorials/essentials/part-7-rtk-query-basics#displaying-posts-with-queries

[@carlosraul6578]

Fantástico, muchas gracias amigo, justo lo que ocupo

[@MOJICA7257]

Good Job! Thanks For Sharing Dave.

[@DaveGrayTeachesCode]

You're welcome! 💯

[@okbaalla8451]

Dave, you're a legend, P.E.R.F.E.C.T ❤❤❤❤

[@DaveGrayTeachesCode]

You are too kind - thank you!

[@folarichards8704]

Does anyone know why I don't get syntax highlighting when I open a vite project in VSCode?

[@ProMinecraftSprite]

Do you have a video in which you explain the useContext hook?

[@DaveGrayTeachesCode]

It is a chapter in my React for Beginners series here: kzbin.info/www/bejne/pJi5p3ebnNh0jZo I also use the useContext hook in several other videos on my channel 😀

[@TravinskiyVladislav]

Thank you, Dave

[@DaveGrayTeachesCode]

You're welcome!

[@sakirhusain7276]

Thanks

[@DaveGrayTeachesCode]

Welcome

[@MegaClockworkDoc]

Thank you for putting this together. 👍

[@DaveGrayTeachesCode]

Glad you enjoyed it!

[@DrewSpencer]

Great video! Is suspense ok to use with react-query or is it the same deal as SSR?

[@DaveGrayTeachesCode]

Here you go: tanstack.com/query/v4/docs/react/guides/suspense

[@vinayakmane6414]

make a full course on NestJs please :)

[@DaveGrayTeachesCode]

Great request!

[@vinayakmane6414]

@@DaveGrayTeachesCode Please fulfill it sir.

[@belkocik]

How to implement scaling error boundary for different components (different messages depend on which page you are) in whole React application?

[@DaveGrayTeachesCode]

A couple of things to notice about the error boundaries that I point out in the tutorial: 1) It applies to all child components of the parent you wrap in the error boundary. No need to wrap each component. Instead think about starting at the top of the section. 2) If you use the component from the docs like I did here, it will display the actual error message which could be helpful - not a custom message. If you really wanted custom messages, you could tweak the error fallback component to provide them.

[@sarahibrahim8943]

Thank youu 💖💖💖💖

[@DaveGrayTeachesCode]

Welcome!

[@siddiqahmed3274]

Sir i want to ask on what should i learn react query or useSwr? i think they both do similar things as i have watched your videos on both. And thank you for the tutorial. suspense and error boundary is really great.

[@DaveGrayTeachesCode]

Thank you! Good question and yes, Tanstack Query (aka React Query) is good to know. It has different features that could be useful, too. I do really like SWR 2.0 as well. Keep learning something new every day! 💯🚀

[@bekirs4240]

No wrong answer here, whatever you pick is a great option

[@okonkwo.ify18]

SWR is cooler

[@mattburgess5697]

I’ve only used React-Query, but they both look to be doing more or less the same thing. You won’t go wrong either way IMO.

[@alexanderten9540]

Suspend detecting indirect speech in the posts of 'current' user

[@slahomar1497]

can I use suspense with Redux RTK ?

[@DaveGrayTeachesCode]

I'm not seeing much on suspense in the RTK docs.

[@7doors847]

🔥! 🤘

[@DaveGrayTeachesCode]

💯🚀🚀

[@marouaniAymen]

Thanks for the video, but what if, our suspense have to show a full page spinner that is transparent above the current parent component instead of returning another component ?

[@DaveGrayTeachesCode]

For this need, it sounds like you would need to apply a CSS class to the current component instead of changing components.

[@marouaniAymen]

@@DaveGrayTeachesCode Ok, thanks

[@kalupatrick6863]

Thanks. But, whats the difference between SWR and React Query

[@DaveGrayTeachesCode]

This question might make for a good comparison video. I just published a video on SWR 2.0 last week.

[@ermias_bahru]

first comment

[@divyanshusinghthakur1447]

Thanks

[@DaveGrayTeachesCode]

Welcome