React lazy components: Difference between revisions
From wikinotes
Line 6: | Line 6: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
| React.lazy/Suspense docs || https://reactjs.org/docs/react-api.html# | | React.lazy/Suspense docs || https://reactjs.org/docs/react-api.html#suspense | ||
|- | |||
| Transitions docs || https://reactjs.org/docs/react-api.html#transitions | |||
|- | |- | ||
|} | |} |
Latest revision as of 02:08, 11 December 2022
Lazy component imports let you postpone an import,
and render a 'suspense' component in it's place until it has loaded.
Documentation
React.lazy/Suspense docs https://reactjs.org/docs/react-api.html#suspense Transitions docs https://reactjs.org/docs/react-api.html#transitions
Lazy Component Imports
A component import can be wrapped in a
React.lazy()
, which delays the component from loading until it is called.
While it is loading, the nearest parentReact.Suspense
component will be rendered in it's place (ex. loading-bar, spinner).const MyComponent = React.lazy(() => import('./MyComponent')); function RootComponent() { return ( <React.Suspense fallback={<Spinner />}> <div> <MyComponent /> </div> </React.Suspense> ) }