Suspense in ReactJS

In this article, we will learn how to show a loader while the component is being lazily loaded.

When the components are lazily loaded, it requires a fallback to be shown to indicate that the component is being loaded in the DOM.

Syntax

<Suspense>

Example

In this example, we will build a Routing application that lazily loads the component and displays a loader while the component is being loaded lazily.

App.jsx

import React, { Suspense, lazy } from 'react'; import { BrowserRouter as Router, Route } from 'react-router-dom'; import Loader from './Loader.js'; const Contact = lazy(() => import('./Contact')); const App = () => (    <Router>    <Suspense fallback={<Loader />}>    <Route exact path="/contact" component={Contact} />    <Route       path="/"       exact       render={() => (          <div>             <h1>TutorialsPoint</h1>             <a href="/contact">Contact Us</a>          </div>       )}    />    </Suspense>    </Router> ); export default App;

Contact.js

import React from 'react'; const Contact = () => {    return (       <div>          <h1>Contact Us</h1>          <h4>You already know us</h4>       </div>    ); }; export default Contact;

Loader.js

import React from 'react'; const Loader = () => {    return <div>Please wait...</div>; }; export default Loader;

In the above example, when the component is being lazily loaded, the Loader component is loaded in the DOM as a fallback to this component.

Output

This will produce the following result.