Suspense
defer rendering part of app until some condition is met
2 Uses:
code splitting: the condition is the download of a chunk of your app when the user wants to access to it,
data fetching: the condition is the download of data.
React adds 100ms delay before rendering fallback
Lazy Components
As of 10/10/19, this is the only use case:
React.lazy
takes a function that will execute the dynamic import. It returns a component that will run this function during its first rendering.
import React, { Suspense } from 'react';
import Loading from './Loading';
const PokemonList = React.lazy(() => import('./List/PokemonList'));
const StarWarsList = React.lazy(() => import('./List/StarWarsList'));
function App(props) {
return (
<Suspense fallback={<Loading />}>
{/* We use PokemonList like any imported component */}
{props.route === 'pokemon' && <PokemonList />}
{props.route === 'starwars' && <StarWarsList />}
</Suspense>
);
}
Webpack must be configured to handle dynamic imports, it is in most boilerplates including CRA and Next
Future
Data fetching...
Last updated