Project Initialisation

What is React Suspense?

Suspense allows developers to display a temporary fallback UI when the component is doing the asynchronous operation. When the operation is completed, the actual UI is rendered. Suspense can be used when a child component is lazily loaded or fetching data....

Project Initialisation

Initialise a react project. In this example project, we will use TypeScript, but if you are not comfortable with it, use JavaScript....

Traditional Data Fetching Techniques

Fetch on Render:...

How Suspense works?

React Suspense uses exception control flow. It is related to JavaScript Promise. Regardless, whether if you are using traditional new Promise() or async/await syntax, a JavaScript Promise always has 3 states....

Use cases of React Suspense

1. Revealing nested components while data is loading...

Suspense with Server Components in Next.js

In next.js, we can create a special file called loading.js (or .jsx) for specific route or in root level that automatically wraps page.jsx and other nested routes. We can have small components like spinner, skeleton that are pre-rendered and can be instantly shown while page is loading data. We can define define laoding.jsx in for every route. We can even change the behaviour by defining our own suspense....

Conclusion

In this article, we have explored React Suspense, its benefits, functionality, and practical application through a hands-on React project demonstration. We have covered how Suspense redefines data fetching patterns, addresses loading state challenges, how Suspense works under the hood, and how to use it with React meta-frameworks like Next.js. By mastering Suspense, we have elevated our React development skills and streamlined our application’s performance....