Write Clean Code with React Suspense | React Error Boundaries Explained

React Suspense is Scary Good! In this tutorial, React Suspense & React Error Boundaries are explained with examples. You will learn how to provide a fallback loading state component and a fallback error component to improve your app's user experience.

🚀 Become a full-stack web dev with Zero To Mastery Courses:

👇 Follow Me On Social Media:

React Suspense & React Error Boundaries with SWR

(00:00) Intro
(00:25) Welcome
(00:48) Starter Code & Start up
(02:26) SWR Data Fetching
(05:02) Enable Suspense in SWR
(05:29) Conditional logic to replace
(06:27) Adding React Suspense
(12:16) PostsList component clean up
(13:10) Why We Need Error Boundaries
(14:05) Install react-error-boundary
(15:06) Adding an Error Boundary
(16:53) A Better Error Boundary
(23:13) Reviewing the Refactor
(24:19) Closing Notes

📺 Suggested Videos:

📚 Tutorial References:

Was this React Suspense & React Error Boundary with SWR tutorial helpful? If so, please share. Let me know your thoughts in the comments.

#react #suspense #explained

[mocastello]

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 <3

[ALLAOUAOKBA]

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

[stevereid]

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

[mattburgess]

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.

[madhavnagpal]

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

[dwayneneckles]

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

[genesissaquibal]

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.

[carlosraul]

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

[folarichards]

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

[okbaalla]

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

[nicolaichristensen]

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

[MegaClockworkDoc]

Thank you for putting this together. 👍

[belkocik]

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

[DrewSpencer]

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

[siddiqahmed]

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.

[alexanderten]

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

[ProMinecraftSprite]

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

[anazi]

Wow ! Thats very similar to React Query... I'll keep watching

[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 ?

[vinayakmane]

make a full course on NestJs please :)