Lazy Rendering
comins-grid-layout@0.3.0
Use lazyRenderWidget to defer expensive React widget content until it first intersects the scroll boundary. GridStack item geometry and the package widget shell remain mounted, so this is content deferral rather than full widget virtualization.
<div data-dashboard-lazy-scroll style={{ maxHeight: 480, overflow: "auto" }}> <DashboardGrid lazyRenderWidget widgets={dashboard.widgets} onLayoutCommit={dashboard.commands.applyLayoutSnapshot} renderWidget={(widget) => <ExpensiveChart metric={widget.data} />} /></div>When grid-level lazy rendering is enabled, widgets are lazy by default. Set a widget’s lazyLoad: false to render it eagerly. Setting lazyLoad: true on a widget does not enable the feature unless lazyRenderWidget is also enabled.
Add data-dashboard-lazy-scroll to the nearest scroll container to make it the IntersectionObserver root. Without that ancestor, the viewport is the root. When IntersectionObserver is unavailable, content renders eagerly. Once content becomes visible it stays mounted, including offscreen. This delays the initial content mount; it does not render content only once or virtualize it by unmounting offscreen content. Normal React state and prop updates still rerender mounted content. Re-enabling the option does not hide content that is already mounted.
The native engineOptions.lazyLoad mapping remains only for 0.2.x compatibility and is retained in 0.3.0, with removal deferred to a future version; it does not defer React-owned content. Use the component prop and widget flag for new code.
The package does not supply skeletons, loading placeholders, unmount-on-exit behavior, or data fetching. Implement those inside renderWidget when required.
Playground: /examples/advanced/lazy-load.
The Lazy Content Rendering example reports actual content mounts as a rendered count and per-widget Waiting/Rendered status. Scroll inside its container, compare on/off behavior, and use Restart experiment while enabled to remount the grid and reset the scroll position. Waiting hints and counters are example-only UI, not package data-loading features.