Today I learned
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!
I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me on Twitter ↗ or via Email ↗.
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