Today I learned
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
Go back to other today-I-learned posts