What Is React Suspense And When To Use It In React

Hello, devs,

in this react suspense example tutorial, I will discuss react suspense and also show you how to use react suspense. What is the use case of react suspense and when to use it to get better performance of your react application?

I will share with you the source code of react suspense. If you don't know how to use react suspense then this react suspense component example is for you. Let's see what is react suspense.

React 16.6 released a < Suspense > component that lets you “wait” for some code for loading and declaratively specify a loading state (like a spinner) while we’re waiting. Suspense for Data Fetching is a new and very useful feature that lets you also use < Suspense > to declaratively “wait” for anything else, including data.

React Suspense is an awesome way for components to suspend rendering while it's loads data from a cache. It is a fundamentally new capability that:

• It renders a component tree in the background
• While components are working for retrieving data
• Only display those data after the whole dom is ready.

Now update App.js like that

App.js

Now we need to create ContactComponent and update it like:

ContactComponent.js

And we have to create our Preloader component to show the loading spinner. 

Preloader.js

Read also: Use useSelector and useDispatch in Your React Redux Application

Hope it this react suspense will help you.