🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Expert Masterclasses.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEreact

react Documentation

LOADING ENGINE...

React Handling Loading with Suspense

Master React components, hooks, and best practices.

Handling Loading with Suspense

Author

Pascual Vila

Frontend Instructor.

Suspense is a React component that allows you to "wait" for some code to load dynamically and show a loading indicator in the meantime. It's commonly used together with React.lazy to implement lazy loading of components, but it can also be useful for other asynchronous operations like data fetching.

Using Suspense to show a fallback:

        {`import React, { lazy, Suspense } from 'react';

const AnotherLazyComponent = lazy(() => import('./AnotherLazyComponent'));

function Dashboard() {
  return (
    

Dashboard

Loading Dashboard...

}>
); } export default Dashboard;`}

The fallback prop of Suspense accepts any React element you want to display while the deferred component is loading. This provides a smoother user experience.