What is React Suspense and How to Use It in React Application

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  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  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 background”
  • while components are busy fetching data
  • only display them after the whole tree is ready.

 

Let assume for slow connections, it will give you full control over where and when to show a placeholder. It never destroys the previous view while this is happening. So in this article, I will show you how to show a loader while the component is being lazily loaded using react suspense.

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 will help you.

 

Facebook Github
A web enthusiastic, a self-motivated full-stack software engineer from Dhaka, Bangladesh with experience in developing applications using Laravel , React and Vue js