October 29, 2020

React Suspense Lazy Loading Components

While Suspense for Data fetching is still an experimental feature in React and is not yet available in a stable release, React 16.6 also added a <Suspense> component.

This <Suspense> component lets you specify the loading indicator in case some components in the tree below it are not yet ready to render.

This is a super cool and easy way to add a loading state with a loading component to your React application.

Here is a simple example:

import * as React from 'react';
import { LoadingComponent } from './loading-component';

const ComponentWithAsyncData = React.lazy(() =>
  import('./component-with-async-data')
);

const App = () => {
  return (
    <React.Suspense fallback={<LoadingComponent />}>
      <ComponentWithAsyncData />
    </React.Suspense>
  );
};

export default App;

While the <ComponentWithAsyncData /> may not be ready to render yet because it's still waiting for an API Request, React.Suspense will handle that and show our <LoadingComponent /> instead.

What's even cooler, is that React can also lazy load the component with the async data by using React.lazy. So it's not even imported, until it's ready. Awesome!

You rean read more about it in the official React docs.

So that's what I learned today. What about you?

Just send me an email or message me on twitter about your learnings. I would really like to here from you!

Greetings Marco