Today I learned

React Suspense Lazy Loading Components

Edit this Post Opens in new tab

While Suspense for Data fetching Opens in new tab 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(() =>

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

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 Opens in new tab.

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

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

I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me on Twitter Opens in new tab or via Email Opens in new tab.

If you want to support me, you can buy me a coffee. I would be very happy about it!

☕️ Buy me a coffee ☕️

I wish you a wonderful day! Marco