Lazy
lazy
is a higher-order component that's used to dynamically load components,
deferring the loading of a component
until it's needed. This is particularly useful for code-splitting, improving the
performance of your application by loading smaller chunks of code.
A component produced by lazy
can receive a fallback
prop,
which is displayed while the promise is being resolved.
It accepts a JSX.Element, typically used to show loading indicators.
Example
import { lazy } from "kaioken"
const DefaultExportedLazyComponent = lazy(() => import("./MyComponent"))
const NamedExportedLazyComponent = lazy(() =>
import("./MyComponent").then((module) => module.MyComponent)
)
const App = () => (
<div>
<DefaultExportedLazyComponent fallback={<div>Loading...</div>} />
<LazyNamedComponent fallback={<div>Loading...</div>} />
</div>
)