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 "kiru"

const DefaultExportLazyComponent = lazy(() => import("./MyComponent"))
const NamedExportLazyComponent = lazy(() =>
  import("./MyComponent").then((module) => module.MyComponent)
)

const App = () => (
  <div>
    <DefaultExportLazyComponent fallback={<div>Loading...</div>} />
    <NamedExportLazyComponent fallback={<div>Loading...</div>} />
  </div>
)