LazyComponent

Component Wrapper to lazy loading a Component.

Demo

INFO

The component uses LazyComponent component to lazy load a component imported dynamically by factory prop. The component loading is delayed by 5 seconds. During this time, fallback prop is shown that renders a p element with the text Loading component....

Loading demo…

Show source code

import { LazyComponent } from "../../..";

export default function LC() {
	return (
		<LazyComponent
			factory={() => import('./LazyComp').then(async res => {
				await new Promise(resolve => setTimeout(resolve, 5000));
				return res;
			})}
			fallback={<p>Loading component...</p>}
		/>
	);
}

Types

LazyComponentProps

• @template T - The module type returned by factory. Must export either a default export or one or more named ComponentType exports.

Props accepted by the LazyComponent component.

Property	Type	Required	Description
factory	() => Promise<{ [k: string]: T }>	✓	A dynamic import factory function that returns a Promise resolving to the module containing the component to render (e.g. () =&gt; import("./MyComponent")). The component is loaded once and cached — subsequent renders reuse the resolved result without re-fetching.
componentName	string		The named export to render from the resolved module. When omitted, the default export is used. Required when the module does not have a default export or when a specific named export should be rendered.
fallback	ReactNode		Content rendered while the component is loading (passed to the internal &lt;Suspense fallback&gt; boundary). Accepts any valid React node.
beforeLoad	() => void		Called synchronously before the factory Promise is initiated. Use this to show a loading indicator or perform pre-load side effects.
afterLoad	() => void		Called after the factory Promise resolves and the component is ready to render. Use this to hide a loading indicator or perform post-load side effects.